Pagination links break when using eleventyComputed to write permalinks in *.11ty.js templates #1555
Comments
|
So, this is hardly a solution, but a “working” set of pagination navigation links can be created to match those built by Eleventy: // Modified data object in content/pages/blog.11ty.js
export var data {
eleventyComputed: {
permalink: data => `${data.site[data.locale].postsArchive.url}/index.html`
}
}I happened upon this wrench by accident. I was testing to see what would happen if I removed the ternary operator for the |
|
@reubenlillie I guess, you're right. eleventy/src/Plugins/Pagination.js Line 245 in 7ee3e15 The referenced Lines 118 to 158 in 26bf047 |
|
@Ryuno-Ki, well, can you imagine a way to override this behavior in JS templates? I'm stumped. |
|
Hm, I'd first better understand what's going on. But I can't find log messages in the initial post containing the |
|
I think I'm coming up against the same problem. From the following: I'm getting the following files outputted: |
|
Could you turn on DEBUG mode, @johnpuddephatt? |
|
Sure – full output here: https://pastebin.com/YNSn7qJs |
|
Line 144 looks 'correct' – i.e. what I'd expect...
Line 202 however has an unexpected
|
|
@Ryuno-Ki and @johnpuddephatt, I'm away from my computer now. I'll try to share some DEBUG ouput soon. |
|
I'm pasting the lines relevant to the Debug Log for the Template: |
|
@reubenlillie I'm off to bed anywhen soon now. I'm wondering right now, whether a „nested pagination” like #1597 (comment) might work here, too. The thinking goes in the lines of having a pagination of size - and each of those broken into „sets of pagination”, so that there wouldn't be „a second page”. |
|
In my case I've realised I don't need to use eleventyComputed at all... just setting: works fine. The question is why I was using it in the first place. I think it came from googling and reading a recent issue on GitHub... |
|
@Ryuno-Ki, I created a separate branch |
|
@reubenlillie Thanks. I have the tab open but have some other things cooking for this week. |
|
I think, problem is here: eleventy/src/Plugins/Pagination.js Lines 184 to 187 in 26bf047 I found a hack: permalink: '/',
eleventyComputed: {
permalink: function(data) {
return `/${data.article.fileSlug}/`
}
}Possible fix: if (pageNumber > 0 && !(this.data[this.config.keys.permalink] || this.data.eleventyComputed[this.config.keys.permalink])) {
cloned.setExtraOutputSubdirectory(pageNumber);
} |
zachleat
added
bug
feature: 📦 pagination
Describe the bug
Using
eleventyComputedto write permalinks in *.11ty.js templates, as described in #1076, does not produce the expected pagination links.To Reproduce
Steps to reproduce the behavior:
eleventy-dot-js-blogstarter project to a soon-to-be-bug-ridden project directory and install node packages locally:./content/pages/archive.md:Also, notice how these same pagination navigation links appear in the markup when browsing 🌎 http://localhost:8080/blog/. The Markdown/Liquid–Nunjucks front matter permalinks work. 👌
./content/pages/archive.mdfrom Markdown to a JavaScript template and translate its content:NB: code updated on January 19, 2021 since the starter kit now supports ES modules
Run 🧪
npx eleventy --serveagain. This time, notice how the output files in the command line interface remain unchanged 😃. But, … also notice how in the browser, the pagination navigation links now render ashttp://localhost:8080/{{page.fileSlug}}/🐛. The proper routes are output by the new JavaScript template, but the pagination navigation is different.🤔 These strange pagination navigation links resemble the permalink rules in
./content/pages/pages.11tydata.js. So, it would seem like the logical next step is to update those toeleventyComputedsyntax too 🤷♂️:npx eleventy --serve, notice how the output has changed 🪲:And, in the markup, the pagination navigation links are now
http://localhost:8080/content/pages/archive/andhttp://localhost:8080/content/pages/archive/1/accordingly, which look more like real pages, but they don’t exist in the output 🐜. That is, both the output and the pagination navigation links are broken after basically exchanging 💱 Markdown/Liquid–Nunjucks for Eleventy-topped vanilla JavaScript.Expected behavior
The output and pagination navigation links should match, and
eleventyComputedshould continue to be unquestionably awesome.Environment:
Additional context
The pagination navigation is generated from
./_includes/shortcodes/pagination-nav.js. It’s a built-out version of what I prepared for the Eleventy docs. If youconsole.log(data.pagination)somewhere in the return statement for any of steps 3–6 above, you can verify the mutations to that object. But I’ve got no clue why the permalinks are behaving this way with pagination.The text was updated successfully, but these errors were encountered: