Eine Breadcrumb Navigation mit current_page.url|split('/') und ohne PICO Plugin mit Twig

Juli 5, 2023 - Lesezeit: 2 Minuten

Inhalt

• Breadcrumb mit dem Twig Filter split
• Der Code
• Beschreibung des Code
• Ergebnis des Codes
• Alternative

Das folgende Coding zerlegt mit Hilfe des Twig-Filter split die URL auf der sich der Leser gerade befindet in eine traditionelle Breadcrumb Navigation:

home » Pico headless Flat File CMS » Eine Breadcrumb Navigation ohne Plugin

Der Filter trennt die einzelnen URL-Bestandteile (z.B. http//localhost/ordner/beitrag) anhand des Zeichens / (Slash) auf und erzeugt darus ein Array welches dann die einzelnen Bestandteile der URL ohne Schrägstrich enthält.

010  {% set tokens = current_page.url|split('/') %}
011  {% for token in tokens %}
012      {% if token != 'http:' and token > '' %}
013
014          {% if loop.index in [3] %} 
015              <a href="/" title="home" class="text-navbar">{{pages["_meta"].title}}</a>
016          {% endif %}
017
018          {% if loop.index in [4] %}
019              {% set folder    = token %}
020              {% set full_path = [token, '/index']|join %}
021              {% set title     = pages[full_path].title %}
022
023              &#187; 
024              <a href="/{{ token }}" title="Folder" class="text-navbar">
024                  {{ title }}
025              </a> 
026              <span class="px-1">&#187;</span>
027          {% endif %}    
028
029          {% if loop.index in [5] %}
030              <span>{{ current_page.title }}</span>
031          {% endif %}    
032
033      {% endif %}
034  {% endfor %}

Zeile 010 erzeugt ein Array tokens, welches die Bestandteile aufnimmt. Aus der URL http://localhost/Ordner/Beitrag wird das Array

[1] = http:
[2] = //
[3] = localhost
[4] = Ordner
[5] = Beitrag

gebildet.

Zeile 014...016 gibt statt des localhost einen Link auf das home-Verzeichnis aus - der Klassiker.

Zeile 018...021 ermittelt in 019 den Namen des Ordners und verbindet ihn in Zeile 020 mit der dortigen index.md Datei mittels join-Filter des Twig. Die Zeile 021 kann dann im Anschluss anhand des vollqualifizierten Slug (ordner/index) den Titel des Ordners aus der dortigen index.md lesen. Der Befel

pages['ordner/index'].title

wird als Entsprechung gebildet.

Zeile 029...031 ermittelt lediglich noch den Titel des aktuell angezeigten Beitrags und zeigt ihn ohne Link an.

Wird der Code ausgeführt, entsteht die folgende Breadcrumb Navigation, die leicht im Template untergebracht werden kann:

home » Pico headless Flat File CMS » Eine Breadcrumb Navigation ohne Plugin

Alternativ ist statt des URL-Attributes

current_page.url|split('/')

auch der Twig-Befehl über die Beitrags-ID

current_page.id|split('/')[0]

ebenfalls möglich und sogar sicherlich meist vorteilhafter, da dieser bereits den Betsnadteil http:// entfernt hat und den einfachen Slug (ordner/beitrag) des Beitrags enthält.

Dieses Coding ist speziell auf eine einstufige Ordnerstruktur ausgelegt und muss ggf. angepasst werden, wenn Ordner auch Unterordner enthalten. Allerdings ist aus SEO Gründen eine tifere Schachtelung nicht sehr empfehlenswert, Google und co bevorzugen eine Schachtelungsebene, hingegen werden tiefere Strukturen mit schlechtem SEO-Score von Google bestraft.

Schlagworte: