Adding Previous and Next Post Navigation
In this post, I’ll show how to add links to a previous and next posts. This makes it easier to navigate between posts back and forth.
The final result looks like this:
The code for the previous and next post links can be found in the previous-next-post-links.html include. The implementation looks like the following:
<div class="previous-next-post-links">
<div>
{% if page.previous != nil %}
<a class="arrow arrow__left" href="{{ site.baseurl }}{{ page.previous.url }}">{{ page.previous.title }}</a>
{% endif %}
</div>
<div>
{% if page.next != nil %}
<a class="arrow arrow__right" href="{{ site.baseurl }}{{ page.next.url }}">{{ page.next.title }}</a>
{% endif %}
</div>
</div>It uses page.next and page.previous variables to render links. If a next or previous post is not available, the value will be nil.
The include is added to the post.html layout, so these links will be rendered for every blog post.
CSS styles for links are defined in previous-next-post-links.scss.