Ah, endlich etwas eye-candy! Als erstes sollten wir, wenn nicht bereits geschehen, eine Kopie des posts.html Layouts unserer aktuellen Jekyll Theme anlegen, in dem wir diese aus dem Minima-Ordner nach _layout/post.md kopieren.

Jetzt suchen wir uns die Stelle innerhalb des Templates in dem die Tags angezeigt werden sollen.

<header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">How-to: Darstellung von Tags in Jekyll posts</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2021-01-28T00:00:00+01:00" itemprop="datePublished">Jan 28, 2021
      </time>//
      // Vielleicht hier??!
      //
    </p>
  </header>

Schritt 1: Die Tags sollen nur sichtbar sein, wenn wirklich Tags vergeben. Das ist recht einfach umzusetzen durch einen Zugriff auf die liquid-collection page.tags.

{% if page.tags.size > 0 %}
  // do something
{% endif %}

Schritt 2: Plural – Wir sollten ein “s” hinzufügen, falls mehr als ein Tag gefunden wurde.

Tag{% if page.tags.size > 1 %}s{% endif %}:

Schritt 3: Alle Tags mit Hilfe der filter Funktionen von Liquid auflisten:

{{ page.tags | sort | join: ", " }}

Alles zusammen:

{% if page.tags.size > 0 %}
  Tag{% if page.tags.size > 1 %}s{% endif %}: {{ page.tags | sort | join: ", " }}
{% endif %}

Das volle Snippet sieht am Ende so aus:

<p class="post-meta">
    <time class="dt-published" datetime="2021-01-28T00:00:00+01:00" itemprop="datePublished">
    {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
    {{ page.date | date: date_format }}
    </time>
    {%- if page.author -%}
    • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
    {%- endif -%}
    {% if page.tags.size > 0 %}
        - Tag{% if page.tags.size > 1 %}s{% endif %}: {{ page.tags | sort | join: ", " }}
    {% endif %}
</p>