Eleventy: Document example of Next/Previous blog post links (with or without pagination)

[zachleat]

Things I said in a private conversation that are probably useful here

https://www.11ty.io/docs/pagination/
the pagination.nextPageLink and pagination.previousPageLink contain urls to the next/previous pages (edited)
if you have trouble wiring up your pagination template, please let me know and I can help with that too
https://www.11ty.io/docs/pagination/#paging-a-collection
if you’re using pagination to generate your individual blog post pages, you’ll want to have them in a collection and then use size: 1
Another thing you can do is to just make each post its own template, that’s how the starter kit does it: https://github.com/11ty/eleventy-base-blog/tree/master/posts

If you make each post its own template, it’s a little harder to do previous/next links because you have to go through the collection yourself and find the current page and then use the next/previous items in the collection to link. I’ll make this easier with a Quick Tip or something more explicit in the docs.

Uh, but cc @minamarkham on this issue for no reason whatsoever

[edwardhorsford]

Thanks for opening this. I'd read through the documentation but couldn't see an obvious way of having next and previous links between pages. None of the example sites include pagination either.

I'm likely to have separate files for each of my pages, so I don't think pagination works for me.

FWIW, after realising that I could iterate over collections, I came up with this macro. Posting here in case it's useful to anyone:

Used in page

{{ macro.getNextItemInCollection('design') }}

Where design is the collection I want to page.

Macros file - needs context

{% macro getNextItemInCollection(collection) %}

{% set currentItemIndex = 0 %}
{% set countOfItems = collections[collection].length %}

{% for item in collections[collection] %}
  {% if item.url == page.url %}
    {% set currentItemIndex = loop.index0 %}
    {% endif %}
{% endfor %}

{% set nextItemIndex = currentItemIndex + 1  %}
{% set nextItem = collections[collection][nextItemIndex] %}

{% if nextItem %}
<p>Next Item: <a href="{{ nextItem.url | url }}" class="">{{ nextItem.data.title }}</a></h2>
{% endif %}

{% endmacro %}

I don't know if macros is the best place for this - it's just what I'm familiar with. I'm also unsure if page.url is the best thing to compare against. Seems to work though ¯_(ツ)_/¯

It would be great if something could be included by default for this use case. I assume (?) it's a common need based on the number of blogs I see that include next or previous navigation.

[zachleat]

cc @snookca who might want to follow along here.

[zachleat]

This repository is now using lodash style issue management for documentation requests. This means documentation issues will now be closed instead of leaving them open.

View the documentation queue backlog here. Don’t forget to upvote the top comment with 👍!

[zachleat]

Docs are updated for the 0.10.0 release which has some nicer options here for the pagination method.

Check this out: https://www.11ty.io/docs/pagination/nav/

The non-pagination method still needs an example.

[zachleat]

819 filed for the non-pagination TODO