Multi-level pagination in 11ty?

Question

All the documentation I've found on Eleventy pagination has to do with a single level, and I've got that working pretty well.

• Take a collection (ex. of tags) and create one page each
• Take a collection of posts and put 10 on each page and so on.

What I'd like to do now is combine them: loop over all the tags, and then paginate each tag's collection so if I use some tags a lot, they don't end up with 50 posts on the same page. Basically the way WordPress generates paginated views for each tag.

Something like this: (simplified, I know filters need to be in there)

pagination:
  data: collections
  size: 1
  alias: tag
  pagination:
    data: tag
    size: 10
    alias: tagpost

Though that didn't seem to work.

Is there some way to do multi-level pagination, or would I need to take some other approach for the outer loop?

Answer 1

That has been the thorn in my side from the beginning. There is an issue post on 11ty's GitHub explaining how to flatten the data and then paginate using Javascript, but then you'll lose all the nice pagination features already built in 11ty. Another big issue is how to get Tags dynamically from the API. If you need a single template file for each Tag, paginated or not, you have to do it manually for each tag. So if there's a new tag coming from CMS through API 11ty has no way to handle it automatically.

There are a zillion tutorials for 11ty and not a single one explaining how to do two things that literally every site needs to have.

Good luck with it.

BTW, that being said, I love 11ty, I really do.

Answer 2

You can build a custom collection

config.addCollection("tagpages", function(api) {
  // Map over api.getAll() to build TagPage or TagGroup that contains
  // an array of Pages
}); 

that has the format:

TagPage {
  id: Number;
  tag: string;
  posts: post[]; 
}

Then the front matter:

---
Pagination:
  Data: collections.tagpages
  Size: 1
  Alias:tagpage
Permalink: /{TagPage.tag}/{TagPage.id} 
---

Display your tag and X posts.

You could have your config customize by tags and number of items per page.

config.addCollection("tagpages", buildTagPages(tag, numItems));