Series Navigation In Jekyll
I love Jekyll. Simple to use, easy to set up, and runs great in GitHub pages without much effort. You can see how I have this blog set up in it’s GitHub repo.
Recently, I have been writing blog posts that really fit into a series. Initially I was using copy pasta to update each series post with the latest links. Well, it was tedious - so I wanted a better way.
Using some Liquid template logic and the data already being passed around, it turned out to be relatively easy.
Each post used the following YAML Front Matter:
---
title: My Blog Post
series: My Series Title
---
And I modified my post.html
layout file to include:
{{content}}
{% if page.series %}
<h4>{{page.series}}</h4>
<ol>
{% for post in site.posts reversed %}
{% if post.series == page.series %}
{% if page.url != post.url %}
<li><a href="{{site.baseurl}}{{post.url}}" title="{{post.title}}">{{post.title}}</a></li>
{% else %}
<li class="active">{{post.title}}</li>
{% endif %}
{% endif %}
{% endfor %}
</ol>
{% endif %}
Essentially I grab all posts in reversed
order (so they are in order by posted date ascending) and check for the series
to match the current page. When that’s true, I check if the page is not the current one with {% if page.url != post.url %}
and provide a link to the other posts, and no link if the page is the one you are currently on.
Really easy way to create some great navigation for a series of tutorials. Hope it helps!