Paginating tag pages?

[j9t]

For an Eleventy site I’m running into the problem that tag pages get exceedingly long: for an example, see https://frontenddogma.com/topics/accessibility/. I’d like to cap this at 100 entries, and paginate these tag pages just like I would an index page (like https://frontenddogma.com/). (Repository: https://github.com/j9t/frontenddogma.com)

As tag pages are already paginated pages (using pagination), I could not so far figure out a way to paginate these pages further.

The best I could find for this has been #134, but https://github.com/11ty/eleventy-base-blog/pull/9/files is not a viable solution because it’s not practical to duplicate every tag in metadata.json.

Is there an Eleventy feature or an example that I’m missing? Has someone implemented this for their site and could share?

[pdehaan]

I haven’t tried complex pagination like that yet, but I was thinking you could maybe use lodash.chunk to pre-chunk the collection into 20 items (possibly using pagination.before with JavaScript front matter), and then set your pagination.size to 1. I’ll see if I can make a sample repo when I get a minute.

Maybe some good pointers in https://github.com/11ty/eleventy/search?q=lodash.chunk&type=issues

[j9t]

Thanks @pdehaan! I dug into this and one approach I found is @jeromecoupe’s https://www.webstoemp.com/blog/basic-custom-taxonomies-with-eleventy/. This may be a thing for me to customize to my needs, however it also begs the question whether Eleventy could offer something out of the box?

@zachleat, are there any plans for advanced/multi-level pagination? I second what Jérôme writes in said post:

[…] paginating posts on tag or category pages is a relatively common requirement, even for simple websites that have a fair amount of content, like blogs for example. In my humble opinion, pagination as it currently stands has two distinct drawbacks:

• It can be used to generate single pages from data/collections and to paginate arrays and objects, which can make it confusing for newcomers.
• Since it lives in the front-matter of templates, it can only be used once per template instead of being usable in context with any iterable.

If most use cases are limited to two levels of depth, then distinguishing pagination from single pages generation would probably fit the bill, since we could then combine both usages. Maybe something like a generatePages() collection method would be a good candidate.

Thanks for considering!

[j9t]

If anyone sees this, does 1.0.0 provide a solution to this, or make this easier? (I cannot find anything in the release notes.)

[jeromecoupe]

In case anyone is interested, here is a repo showcasing what I currently use to paginate (multiple) taxonomies.

[j9t]

If you don’t mind, @zachleat, @pdehaan, does Eleventy 2.0.0 come with something built-in for this issue?

[pdehaan]

@j9t As far as I know this isn't a core feature, but there are GitHub issues and examples above that show how to use custom, paginated taxonomies.

[j9t]

Since some time had passed, resulting in a new major version, it seemed worth checking.

Back then I didn’t get the lodash solution to work but could re-try, and follow up. Thanks again, Peter!

[lexoyo]

maybe a plugin could do that?
i just went through implementing this again, it works fine with lodash pagination but i had to handle languages, next/prev, ...

would a plugin like this help?

• what config? a collection to paginate ?
• whout output? would a new collection that contains items with a paginated array in it + next / prev ?

[yuanzhou]

@j9t I came across this same problem recently. I have pagination for the "All Posts" and now I wanted to add pagination for "Posts per tag" where that page is already using the pagination. Wondering if you ever solved this issue and mind sharing your solution? Thanks.

[j9t]

Yes, I managed to solve this back then.

What seems to have helped me was @zachleat and his comment in #332.

Please have a look—if that doesn’t work, I could look into sharing one of the two currently private projects, or try to trim the code so that it’s easier to adopt (it’s pretty tailored in both cases).

[yuanzhou]

Thanks for the pointer! That code snippet looks like it'll do it.

[Ryuno-Ki]

If you could select an answer as solution that would help others find it, I believe.

[j9t]

@Ryuno-Ki, from scanning this again I don’t think it was actually ever really answered. But as I figured out a solution that I’m linking to, I’ll mark my own response as that answer 😅

[lexoyo]

have you seen pagebreak? I use it for double pagination (11ty's built-in pagination + pagebreak)
it's FOSS, really solid, and maintained by cloudcannon
https://github.com/CloudCannon/pagebreak