How to Add Related or Previous Next Pagination in Jekyll?

Feb 26, 2016 - sharathdt

Giving a link to next and previous posts at the bottom of the article helps to keep your users hooked to checkout more content on your website. If they like your current article, then there is a good chance that they would like to browse more articles.

A long time ago I was writing 4 posts on WordPress installation tutorial. At the end of every article, I had to leave the next or previous article link. I used to do it manually in this way “To read my previous article on WordPress basics read part 1” and “for useful WordPress plugins read part 3”

Manually linking articles was a tedious job if I had more articles. May be there was a plugin for that, but I was fed up with too many plugins! In Jekyll, it is wasy to implement navigation because we have nice little variables page.previousand page.next which can handle navigation without breaking a sweat.

Finding content on your blog should be easy. Let’s say a new visitor is checking out an article on your website about How to begin with Angular JS. Maybe your article is really helpful and many users have a high success rate trying it. Then users will look for more articles from you.

So there is a 83%(yes this is from How I Met Your Mother) chance that a user is going to check more of your content if he/she likes the current one. You should give him/her an easy access to other content of yours right after the current article!

Adding next-previous post link or related post link is a good way to engage your audience with more posts and if the posts are good then the audiens may turn into subscribers.

Jekyll has a variable to show the related posts (up to 10). But the problem is that they are just a list of your latest posts that’s all. I have no idea why they chose to call it related posts. It must be called recent posts.

But anyway it is a great way to let users know about your latest articles. It can be improved with some complex process of category wise matching. But I will write a detailed post in the update. For now refer to this thread.

Here is the code I have used on my chess blog.

<div class="related">
          <h2>Related Posts</h2>
          <ul>
            {% for post in site.related_posts limit:3 %}
              <a href="{{ post.url }}">
                  <li>
                  <h3>{{ post.title }}&nbsp;&nbsp;{{ post.date | date_to_string }}</h3>
                  </li>
              </a>
            {% endfor %}
          </ul>
</div>

The output should look like the screenshot below

When you implementing this, make sure you tell Jekyll to paginate your posts by changing the parameters in _config.yml.

paginate: 6
paginate_path: /page:num/

This way you are asking Jekyll to load 6 posts per page. First 6 will be loaded in the index(or wherever you call it), next 6 will be loaded in the url /page-1/, next 6 in /page-2/ and so on.

Also make sure you do the following change while loading posts.

{% for post in site.posts %}

should be changed to

{% for post in paginator.posts %}

How to add Prev-Next Post links in Jekyll?

I think it is a better thing to insert Previous-Next Post link after an article than related post link. If you are writing articles around only one topic then this is ideal since you always write related articles.

If there is a big article which has many parts in it and you are writing those parts in consecutive articles even then next and previous post links is the best choice.

Here is the code how I have implemented previous next links in my Jekyll blog.

<div class="Previous-next">
  {% if page.previous.url %}
    <a class="previous" href="{{page.previous.url}}">&laquo; {{page.previous.title}}</a>
  {% endif %}
  {% if page.next.url %}
    <a class="next" href="{{page.next.url}}">{{page.next.title}} &raquo;</a>
  {% endif %}
</div>

That should look some what like the below screenshot.

Remember, the latest post will not have page.next since it is the last post and likewise the first post will not have page.previous.

May be you have to style the links so that they appear in two directions or at least a little apart.

    .next {
        float: right;
    }

Change your code accordingly to make it responsive.

You can also use the code as a template that can be called anywhere on your blog. Read Step 4 of How to add Comments on Jekyll to implement related post as a template.

I hope this article has helped you to make a navigation link of your own in your Jekyll blog. Let me know if you have any doubts. Subscribe for updates on upcoming articles.

Thanks for reading!

Comment