Example showing pagination and tags working

[neilberry]

Hey, Eleventy looks great!

Can we have another example blog showing pagination and tags working? A designer like me is struggling to get this working at the moment, so any help would be appreciated!

Thanks!

[chrisdmacrae]

Hey Neil,

Good request! For the interim:

1. You add "tags" to each blog post's front matter to add it to a "collection"
2. You then add "pagination" to the page you want to show the paginated list on; this will autogenerate the output files for each "page" of items
3. You then loop through the "pagination items" on the page in Install hangs - dependency slug-rfc asking for a passphrase #2

See the following example:

/blog/example-post.md:

---
title: Example Blog
tags:
- post
---
# My awesome post!

/blog/index.html

---
title: My Blog
pagination:
  data: collections.post
  size: 6 
  alias: posts
---
{{ for post in pagination.items }}
  {{ post.title }}
{{ endfor }}

{# Here we'll use the "posts" alias we defined above to make things cleaner #}
{{ for post in posts }}
  {{ post.title }}
{{ endfor }}

[zachleat]

Hey @chrisdmacrae—thanks for the example! What templating syntax is that HTML file using?

[zachleat]

I modified your example to show how it works in Nunjucks and Liquid:

post.md:

---
title: Example Blog
tags:
  - post
---
# My awesome post!

index.njk or index.liquid:

---
title: My Blog
pagination:
  data: collections.post
  size: 6
  alias: posts
---

{% for post in posts %}
  {{ post.data.title }}
{% endfor %}

[zachleat]

Here’s an interesting use case related to a question from @philhawksworth: tag pages. This might not work until 0.3.6, blocked by #135

---
pagination:
  data: collections
  size: 1
  alias: tag
permalink: /tags/{{ tag }}/
---

[zachleat]

Alright @philhawksworth, I did give the tag pages a shot on the eleventy-base-blog repo and ran into an issue—pagination only works on arrays and not objects (like collections). So, I’ve filed #139.

However, you can implement tag pages pretty easily if you create a whitelist array of the tags you want pages for. I’ve implemented an example in a PR so you can see all the changes in the same place, have a look:

https://github.com/11ty/eleventy-base-blog/pull/9/files

[philhawksworth]

Now that 0.3.6 is out (🎉) could you explain a little more about how the above suggestion would work, @zachleat? (Assuming that is indeed something that is now possible).

The requirement I keep coming back around to is for creating a set of tag pages listing all of the items for each given tag.

[zachleat]

@philhawksworth I started to write a Quick Tip describing the whitelisted tag pages approach implemented at https://github.com/11ty/eleventy-base-blog/pull/9/files but I decided to implement #139 instead to make this automatic instead of having to manually manage the whitelist. I think this will wait until 0.3.7, sorry!

Feel free to use the whitelisted approach for now but the docs will describe this new method going forward.

[zachleat]

Added a couple of examples for v0.4.0:
https://www.11ty.io/docs/quicktips/tag-pages/
https://www.11ty.io/docs/pagination/#paging-a-collection

[philhawksworth]

Niiiice.
I missed some of the activity here and used the whitelisted tags implementation, but now that v0.4.0 is out (🏎) I'll use that snazzy new approach.

The site in question is here (https://templates.netlify.com/), should you want to add that to your list of places using eleventy in the wild, @zachleat .

Wonderful stuff. Thanks!

[zachleat]

Thanks @philhawksworth!!