Tag Schlagwort Liste als Twig Template für Pico CMS entwickeln

Juli 5, 2023 - Lesezeit: 3 Minuten

Inhalt

• Tag Liste für Pico CMS
• Das Twig Template

Das folgende Codebeispiel kann unterhalb eines Pico Beitrags-Templates eingesetzt werden und listet dort alle passenden Beiträge zum aktuell geöffneten auf - anhand gleicher Tags. Der Code ist für das freie CSS-Framework Bootstrap erstellt, kann aber für jedes andere CSS einfach angepasst werden. Ziel des Codings war, ohne die Nutzung eines Plugins auzukommen und die Tag-Liste mit Mitteln der Template-Engine Twig zu realisieren.

Das folgende Coding ist in Twig entwickelt und kann im Pico CMS eingesetzt werden. Diese Variante des Pico nutzt das freie Bootstrap CSS Framework.

000  {% set id_liste = "" %}
001  {% if current_page.meta['Tags'] %}
002      {% for tag1 in current_page.meta['Tags']|split(',') %}
003
004          {% for page in pages %}
005              {% for tag2 in page.meta['Tags']|split(',') %}
006                  {% if tag1|lower == tag2|lower and page.id != current_page.id %}
007
008                      {% if page.id in id_liste %}
009
010                      {% else %}
011                          {% set id_liste = [id_liste, ';', page.id]|join %}
012
013
014                          <div class="row align-items-md-stretch mb-4">
015                              <div class="col-md-4">
016                                  <div class="h-100 p-5 text-dark -bg-dark rounded-3">
017                                      <a href="{{ page.url }}" hreflang="de" role="button" title="{{ page.title }}" class="fs-3">{{ page.title }}</a>
018                                      <p>{{ page.meta['Tags']|replace(',', ' ') }}</p>
019                                  </div>
020                              </div>
021                              <div class="col-md-8">
022                                  <div class="h-100 p-5 -bg-light _bg-secondary text-dark -shadow-sm -border rounded-3">
023                                      {% include('page-description-check.twig') %}
024                                  </div>
025                              </div>
026                          </div>
027
028                      {% endif %}
029                  {% endif %}
030              {% endfor %}
031          {% endfor %}
032      {% endfor %}
033  {% endif %}

000 - In Zeile 000 wird eine leere Liste angelegt die sich später einige Beiträge merken soll.

002 - Die Tags des göffneten Beitrags werden jetzt Schritt für Schrit iteriert. Der Filter split() regelt die Zerlegung anhand des Komma-Zeichens, sofern diese durch Komma getrennt wurden.

004 - Ein weiterer Loop beginnt alle Seiten des Blog zu iterieren, auch hier werden die Tags mittels split() in Zeile 005 getrennt und ein iterierbares Objekt für den Loop zurückgegeben.

006 - In Zeile 006 geschieht die Magie. Jeder einzelne Tag des aktuell offenen Beitrags (tag1) und des gerade iterierten Blog-Beitrags (tag2) werden verglichen. Zur besseren Vergleichbarkeit, werden alle Tags mit dem Filter lower in kleiner Schreibweise umgewandelt. Zudem darf es sich nicht dabei um den aktuell offenen Beitrag handeln den der Besucher liest, sonst würde er doppelt gelistet werden.

008...011 - In diesen drei Zeilen wird ein Gruppenwechsel ausgeführt, ist der aktuell durchsuchte Beitrag bereits in der Merliste vorhanden passiert nichts, ansonsten wird er der Liste in Zeile 011 zugefügt, dabei handelt es sich um eine Semikolo separierte Stringliste.

014...026 - In diesen Zeilen wird die Darstellung der gefundenen Treffer zu passenden Tags abgewickelt. Dieses Segment ist für Bootstrap optimiert und kann durch jedes andere CSS ersetzt werden. Zeil 017 Zeigt den Titel des Beitrags an. Zeile 023 gibt im wesentlichen die meta.description aus, wird hier jedoch durch ein ausgelagertes Twig-Template ersetzt.

Tipp - Es macht natürlich sehr viel Sinn wenn Sie dieses Codesegment als eigenes Twig-Template in Pico auslagern. Dieses können Sie dann später bei Bedarf jedem Beitrags-Template am Ende via include() anhängen

Schlagworte: