Pico CMS Tag Liste als Twig Template entwickelt

Für das Pico CMS erzeugt dieses Codebeispiel eine Tagliste, die Beiträge mit gleichen Tags auflistet. Binden Sie diese Twig Template in einen Beitrags ein.

Tag Liste für Pico CMS

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 Twig Template

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

JavaScript Kompendium

JavaScript Kompendium - Keine moderne Webseite kommt heutzutage ohne die Nutzung der Programmiersprache JavaScript aus. Aus vielen Anwendungsfällen des modernen Webs ist sie daher gar nicht wegzudenken. Mehr und mehr dringt JavaScript auch in Entwicklungsbereiche außerhalb der klassischen Web Entwicklung vor. Da ist von der Smartphone App Entwicklung bis zur UI einer Weltraumrakete für jeden was dabei. In diesem Buch lernen Sie neben den Sprachgrundlagen verschiedene Anwendungsmöglichkeiten kennen. Natürlich kommen dabei auch moderne Entwicklungsansätze und Tools zur Sprache. Alle Aspekte werden von Grund auf erläutert sodass Sie keine Vorkenntnisse mitbringen müssen. Am Ende des Buches haben Sie nicht nur Ihre erste vollständige Webanwendung erstellt, Sie sind auch mit dem nötigen Wissen zu Hosting und Wartung ausgestattet. (*

lesen...

© CMSWorkbench.de

hit counter zaehler rank ranking

about me

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und Markup-Dialekten, z.B. Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.