I started the journey of setting up tags in the web site. There are many things that could be done with tags:

  1. For tags to be shown under the title in pages with lists of posts.
  2. For tags to have their own pages (a list of all posts for that tag).
  3. For tags to work as filters in a page.

And probably more things that I can’t think of right now.

I decided to start by adding the tags in all pages where posts are listed. It’s quite simple to add the tags into a loop:

<div class="tag-container">
  {%- for tag in post.tags -%}
    <span class="tag">
      {{tag}}
    </span>
  {%- endfor -%}
</div>

Now that each post is shown with its tags in the list, it makes sense to have a specific include file with title and tags (to avoid repeating code in each page), so I created it at _includes/post-card.html. The way that I use the include is by providing the post as an argument:

<ul class="post-list">
  {%- for post in site.categories["page-category"] -%}
  <li>
    {% include post-card.html post=post %}
  </li>
  {%- endfor -%}
</ul>