Jekyll: Next and Previous Post Links


On a blog site, a must have is the ability to click on a link to the chronologically next or previous post, particularly if the current post is is a part of a sequence of posts on a specific topic. This post show how to do this for a Jekyll blog site for all posts and for within a specific Category of posts.

Page Next and Previous

When a Jekyll site is built, the date of each post is collected as meta-information from the markdown filename (all posts have a date embedded in the filename) or from the date in the page’s Front Matter. Hence posts are normally listed in reverse chronologically order, latest first. Pages have a next and previous properties that can be used in links. Both of these have url, title and subtitle (if available) sub-properties. For example, the link to the previous page can be generated from:

<a href="{{page.previous.url}}">{{page.previous.title}}</a>

To avoid errant code, checks can be made for if the various properties are available so that the generated HTML does not display null links. For example:

    {% if page.next %}
    {% if page.next.url %}
    ...
    {% endif %}
    {% endif %}

The option I have taken is that if the post is a one-of on a topic (no subtitle), then the title for the next/previous page is used as the displayed text for the link. If though its is part of a sequence on the same topic then the title is displayed but the subtitle is the active link:

    {% if page.next %}
    {% if page.next.url %}
    {% if page.next.subtitle %}
    {{page.next.title}}&nbsp;<a href="{{page.next.url}}">{{page.next.subtitle}}</a>
    {% else %}
    <a href="{{page.next.url}}">{{page.next.title}}</a>
    {% endif %}
    {% endif %}
    {% endif %}

    {% if page.previous %}
    {% if page.previous.url %}
    {% if page.previous.subtitle %}
    {{page.previous.title}}&nbsp;<a href="{{page.previous.url}}">{{page.previous.subtitle}}</a>
    {% else %}
    <a href="{{page.previous.url}}">{{page.previous.title}}</a>
    {% endif %}
    {% endif %}
    {% endif %}

Category Next and Previous

Given that my blog site has an expanding menu in the sidebar based upon post Categories, and given that you may chronologically jump around with respect to post categories, any sequence of posts chronologically won’t be the same category. So it would be nice to be able to generate next and previous links restricted to the current post’s category. I found a nice howto referred to in StackOverFlow that uses a plugin by ajclarkson. Thanks Adam.
Simply put, the page.next and page.previous properties in the code above are replaced by page.next_in_category and page.previous_in_category with that plugin. The code above then becomes:

    {% if page.next_in_category %}
    {% if page.next_in_category.url %}
    {% if page.next_in_category.subtitle %}
    {{page.next_in_category.title}}&nbsp;<a href="{{page.next_in_category.url}}">{{page.next_in_category.subtitle}}</a>
    {% else %}
    <a href="{{page.next_in_category.url}}">{{page.next_in_category.title}}</a>
    {% endif %}
    {% endif %}
    {% endif %}

    {% if page.previous_in_category %}
    {% if page.previous_in_category.url %}
    {% if page.previous_in_category.subtitle %}
    {{page.previous_in_category.title}}&nbsp;<a href="{{page.previous_in_category.url}}">{{page.previous_in_category.subtitle}}</a>
    {% else %}
    <a href="{{page.previous_in_category.url}}">{{page.previous_in_category.title}}</a>
    {% endif %}
    {% endif %}
    {% endif %}

Implementation

See the generated implementation as below, below the purple line.
The full code for the table can be seen here.
The code is implemented in an HTML Table and is placed at the bottom of the layout page for all blog posts, just below the  {{ content }} entry.
In the table, in the row above the category links, the current post’s category is displayed with a link to an index page that lists all posts in that category. A partial implementation of this in the table is:

 {% if page.category %}
    {% for section in site.data.sections %}
    {% assign attr = section[0] %}
    {% if attr == page.category %}
    {% assign label = section[1] %}
    {% endif %}
    {% endfor %}
    {% if label %}
    <tr><td><i>This Category:</i></td><td><a href="/cats/{{ page.category }}/">{{ label }}</a></td></tr>

Footnotes

  1. Above the table I placed a purple horizontal line. That was implemented in css (taking an each way bet for different browsers, IE uses the last one) using:

       hr {
     border-top: 1px solid purple;
     border-color: purple;
     background-color: purple;
     color: purple;
   }
  2. To show Jekyll code in Markdowm, enclose it in raw tags.
    For example:

    Jekyll raw code

  3. I sometimes throw in a<br> tag into my markdown to make sure a new line unequivocally appears.
 TopicSubtopic
  Next: >  
<  Prev:   HSQLDB.Net
   
 This Category Links 
Category:Web Sites Index:Web Sites
  Next: > This blog site construction
<  Prev: