How-to: Darstellung von Tags in Jekyll posts
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+00: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+00: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>