Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document example of Next/Previous blog post links (with or without pagination) #211

Closed
zachleat opened this issue Sep 7, 2018 · 5 comments
Closed

Comments

@zachleat
Copy link
Member

@zachleat zachleat commented Sep 7, 2018

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

This comment has been minimized.

Copy link
Contributor

@edwardhorsford edwardhorsford commented Sep 8, 2018

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

This comment has been minimized.

Copy link
Member Author

@zachleat zachleat commented Jan 8, 2019

cc @snookca who might want to follow along here.

@zachleat zachleat added the needs-votes label Jan 8, 2019
@zachleat

This comment has been minimized.

Copy link
Member Author

@zachleat zachleat commented Jan 8, 2019

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

This comment has been minimized.

Copy link
Member Author

@zachleat zachleat commented Nov 11, 2019

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

This comment has been minimized.

Copy link
Member Author

@zachleat zachleat commented Dec 12, 2019

#819 filed for the non-pagination TODO

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.