Twig Breadcrumb Navigation mit split('/')

Breadcrumb mit dem Twig Filter split

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

Code

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.

Der Code

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 %}

Code

Beschreibung des Code

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

Code

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

Code

wird als Entsprechung gebildet.

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

Ergebnis des Codes

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

Code

Alternative

Alternativ ist statt des URL-Attributes

current_page.url|split('/')

Code

auch der Twig-Befehl über die Beitrags-ID

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

Code

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.

FlightCMS
2024-01-28
PHP8
post
0