I recently rewrote Tweaks.com using Eleventy (11ty) to build the entire site with static HTML pages moving away from dynamic server pages that powered this site for over 20+ years. This change increases site performance and scales extremely well. There are a few useful tricks I learned along the way, starting with this article about pagination-generated pages missing from the "all" collection in Eleventy which was a big problem for me.
The inspiration for this post was a problem with my sitemap.xml file that was missing all but one of my article tag list pages. Sitemap.xml is a special file that tells search engines about your content so naturally, I want all of my tag pages, that serve as a table of contents of articles to be included.
The template behind the sitemap.xml file iterates through the all collection and according to the official documentation should contain all content (except for pages that you explicitly excluded via eleventyExcludeFromCollections in a page's front matter). So why was only one of my tag pages showing up in this collection?
To provide some more context, my tag pages were heavily inspired by Quick Tip #004—Zero Maintenance Tag Pages for your Blog which demonstrates how to use a pagination template trick to generate a page for each tag in your tag collection as shown below.
---
pagination:
data: collections
size: 1
alias: tag
permalink: /tags/{{ tag }}/
---
<h1>Tagged “{{ tag }}”</h1>
<ol>
{% set taglist = collections[ tag ] %}
{% for post in taglist | reverse %}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ol>
This template code (using nunjucks) will create a page for each tag, and then for-loop through all articles with the tag, to create a nice list of articles with the most recent articles listed first (thanks to the reverse filter). It's a cool way to use pagination, pass in the tag via nunjucks in the permalink field, to automatically generate all of these pages. But one problem with the implementation is Eleventy thinks this is just one page and only adds the first "page" to collections.all.
After much research, I came across a github issue posted by edwardhorsford in the Eleventy repo that described the same issue I experienced. After some community debate, a bug was opened and a work around was created that allows pages to opt-in when they want all pages, generated with pagination, to be added to collections.all.
The fix was extremely simple, I just had to add addAllPagesToCollections: true to the front matter under pagination. Below is an updated example template that will now add every pagination-generated "page" to collections.all.
---
pagination:
addAllPagesToCollections: true
data: collections
size: 1
alias: tag
permalink: /tags/{{ tag }}/
---
<h1>Tagged “{{ tag }}”</h1>
<ol>
{% set taglist = collections[ tag ] %}
{% for post in taglist | reverse %}
<li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ol>
It is unclear if this will ever become the default behavior as there was some discussion in the github issue. There are certain situations, different from this use case, where I don't want all 148 pagination-generated pages from my main index.html template added to collections.all polluting my sitemap.xml file so I appreciate the current opt-in approach.
Hopefully, this article helped someone avoid wasting time researching the missing collection pages. A pull request was submitted to update the official documentation was.
