Web Analytics Made
Easy - StatCounter

Displaying posts by tag in Jekyll, using Liquid.

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.

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:

(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.

© Amy Tabb 2018 - 2021. All rights reserved. The contents of this site reflect my personal perspectives and not those of any other entity.