mitsake

Adding more stuff to the web

Archives in Jekyll


Tags: site, jekyll

After setting up the RSS feed, the next thing I wanted to add to mitsake was a set of ‘proper’ archives by both date and tag rather than just the reverse chronological list of posts. Although this wasn’t as straightforward as setting up RSS, a bit of searching turned up some sites that helped me get everything running.

Tags

Although there’s built-in support for tags in Jekyll, there isn’t an easy way to access them via Liquid. Fortunately, the Jekyll wiki has links to a number of useful plugins including Jose Gonzales’ Generic Blog Plugins. The one I’m using is iterator.rb, which gives a new set of template data accessible from site.iterable.tags (as well as site.iterable.categories if you’re using them instead). Once the plugin was installed, I used Liquid to access the tags along with their names and the posts filed under that tag.

{% for tag in site.iterable.tags %}
<h3>{{ tag.name }}</h3>
<ul>
	{% for post in tag.posts %}
		<li><a href="{{ post.url }}">{{ post.title }}</a></li>
		<time>{{ post.date | date: "%e %B %Y" }}</time>
	{% endfor %}
</ul>
{% endfor %}

Archiving by date

Because a list of posts in reverse chronological order can be readily accessed in Jekyll through site.posts, all that’s needed is to use some clever Liquid markup to process it. I found a good example by Mike Rowe he made to group his archives by year which I adapted slightly to allow my archives to be broken down by month.

{% for post in site.posts %}
	{% capture month %}{{ post.date | date: '%m%Y' }}{% endcapture %}
	{% capture nmonth %}{{ post.next.date | date: '%m%Y' }}{% endcapture %}
		{% if month != nmonth %}
			{% if forloop.index != 1 %}</ul>{% endif %}
			<h3>{{ post.date | date: '%B %Y' }}</h3><ul>
		{% endif %}
	<li><a href="{{ post.url }}">{{ post.title }}</a></li>
	<time>{{ post.date | date: "%e %B %Y" }}</time>
{% endfor %}

The above code uses the {% capture %} tag to get the month and year of each post and the one that follows it before comparing them. If they’re different, the month and year are inserted before a link to the post while if they’re the same, the post is simply added to the list for that month. The only tricky bit I ran into was closing the <ul> tag at the end of each month’s list. After checking out the Liquid documentation my solution was to close the tag before each header, excluding the first by using forloop.index.

That’s about it! Hopefully this is a useful reference for anyone that’s looking to make their Jekyll archives a bit more accessible.