If you want to add some navigation links within jekyll posts that bring you to the previous and next one, it’s a fairly simple thing to achieve, since all articles are found within the paginator. I’m showing you how to do the same thing for collections.
Collections are a really cool feature of jekyll but also a little complicated if you dive into them for the first time. They are neither pages nor posts. If you are familiar with WordPress you could compare collections with WP custom post types. In jekyll pages they are mostly used for things like a portfolio (for me it’s the themes section, as an example). I was a big fan of them, but then I wanted to navigate through them and had some trouble. So I did some liquid experimenting, as soon as you know what to do it’s fairly simple, but the problem is getting there…
So the solution came to me, as soon as I had found the forloop variables.
What we need is just one variable within the front matter that we’ll use for sorting. For me it was the date. Each file in my collection has date within the front matter, just like a post.
And then it basically goes like this:
1 {% capture the_collection %}{{page.collection}}{% endcapture %}2 {% if page.collection %}3 {% assign document = site[the_collection] | sort: "date" | reversed %}4 {% endif %}5
6 {% for links in document %}7 {% if links.title == page.title %}8
9 {% unless forloop.first %}10 {% assign prevurl = prev.url %}11
12 {% assign prevtitle = prev.title %}13 {% endunless %}14
15 {% unless forloop.last %}16 {% assign next = document[forloop.index] %}17
18 {% assign nexturl = next.url %}19
20 {% assign nexttitle = next.title %}21 {% endunless %}22 {% endif %}23
24 {% assign prev = links %}25 {% endfor %}26
27 {% if prevurl or nexturl %}28 <div class="pagination">29 {% if prevurl %}<a href="{{prevurl}}" class="prev"><i class="fa fa-angle-left"></i> {{ prevtitle}}</a>{% endif %}30 {% if nexturl %}<a href="{{nexturl}}" class="next">{{nexttitle}} <i class="fa fa-angle-right"></i></a>{% endif %}31 </div>32 {% endif %}This navigator is not only good for collectins. If you have a multilingual blog like me you might want to use this for posts as well because it’s rather hard with the paginator, sinve multilingual posts are not natively supported by jekyll. So that’s why I went with this solution. Every post of mine has a lang variable.
1 {% assign document = site.posts | sort: "date" | reversed | where:"lang", page.lang %}2 {% for links in document %}3 {% if links.title == page.title %}4
5 {% unless forloop.first %}6 {% assign prevurl = prev.url %}7
8 {% assign prevtitle = prev.title %}9 {% endunless %}10
11 {% unless forloop.last %}12 {% assign next = document[forloop.index] %}13 {% assign nexturl = next.url %}14 {% assign nexttitle = next.title %}15 {% endunless %}16
17 {% endif %}18
19 {% assign prev = links %}20 {% endfor %}21
22 {% if prevurl or nexturl %}23 <div class="pagination">24 {% if prevurl %}<a href="{{prevurl}}" class="prev"><i class="fa fa-angle-left"></i> {{ prevtitle}}</a>{% endif %}25 {% if nexturl %}<a href="{{nexturl}}" class="next">{{nexttitle}} <i class="fa fa-angle-right"></i></a>{% endif %}26 </div>27 {% endif %}