Displaying posts by tag in Jekyll, using Liquid.
31 May 2021I wanted to have a listing of my TIL posts by tag or category, and it turns out that doing so is not too bad. Some links and the process below.
I wanted to have a listing of my TIL posts by tag or category, and it turns out that doing so is not too bad. Some links and the process below.
Links:
- Joe Kampschmidt’s posts by tag,
- Joe Kampschmidt’s posts by tag page,
- Liquid tutorial at Jeykll,
- My posts by tag page.
(Note: I have learned Liquid through the ‘copy-paste-test’ method.)
The first section creates the table of contents – the list of all of the available tags.
<medium>
{% assign sorted_tags = site.tags | sort %}`
{% for tag in sorted_tags %}
<a href="#{{ tag[0] }}" style="background-color: #e0e0e0;">{{ tag[0] | downcase }}</a>
{% endfor %}
<medium>
The second section creates the list of posts sorted by tag, with a <div id = with the name of the tag, and the code above links to those divs.
{% for tag in sorted_tags %}
<div id="{{ tag[0] }}" ><h2>{{ tag[0] | downcase }}</h2></div>
{% for post in tag[1] %}
<a href="{{ post.url }}">{{ post.title }}</a>
<span class="date">{{ post.date | date: "%B %-d, %Y" }}</span>
{% endfor %}
{% endfor %}
Ok, so this all works (for my site at least!). A tricky bit can come if you put a link to this ‘posts by tag’ page on the page with your blog posts that has pagination: page2 will get generated, and there will be no corresponding page2/posts-by-tag/page2 or some such thing. My workaround, from the main blog page TIL, in my case.
Liquid typesetting is acting up again, so will link to a file, but the idea is to test whether you’re on page 1 (or not), and then link accordingly.