20 Mar 2016
If your blog lists all posts in only one section, you can always use {{post.previous.url}}
and {{post.next.url}}
to make links to previous and next posts1. However, sometimes we group our posts in defferent sections by category. In this case, post.previous
and post.next
are no longer handy to navigate because they will link to posts in other categries which are not supposed to be shown in current section. To navigate previous/next post within one category, the following code template is presented2.
{% if page.categories %}
{% assign category = page.categories[0] %}
{% assign posts = site.categories[category] %}
{% for post in posts %}
{% if post.url == page.url %}
{% assign post_index0 = forloop.index0 %}
{% assign post_index1 = forloop.index %}
{% endif %}
{% endfor %}
{% for post in posts %}
{% if post_index0 == forloop.index %}
{% assign next_post = post %}
{% endif %}
{% if post_index1 == forloop.index0 %}
{% assign prev_post = post %}
{% endif %}
{% endfor %}
{% endif %}
{% if next_post %}
<a href="{{site.baseurl}}{{next_post.url}}" class="prev">« {{next_post.title}}</a>
{% endif %}
{% if prev_post %}
<a href="{{site.baseurl}}{{prev_post.url}}" class="next">{{prev_post.title}} »</a>
{% endif %}