Twig Breadcrumb Navigation mit split('/')

Eine Breadcrumb Navigation können Sie leicht mit Befehlen des Twig in PICO CMS leicht selbst erzeugen - so gehts.

home » pico » eine breadcrumb navigation mit current page url split und ohne pico plugin mit twig

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

WordPress 6 - Das umfassende Handbuch. Über 1.000 Seiten zu WordPress inkl. Themes, Plug-ins, WooCommerce, SEO und mehr - Mit WordPress mehr als nur ein Blog betreiben - es ist auch ein weit verbreitetes Content-Management-System. Im Buch finden Sie das Rundumpaket für jedes Anwendungsszenario: alle Installationen, Entwicklung und Administration eigener Themes und Plugins und Einstieg in HTML und CSS. Als Fortgeschrittener in Sachen WordPress werden Sie viele wertvolle Tipps und Hilfe finden, etwa bei Themen wie Custom Post Types oder Programmieren von Erweiterungen. So sind Sie schnell in der Lage, Ihr Webprojekt zum Erfolg zu bringen.

Wir können mit so genannten Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Impressum


CMSWorkbench ist ein Tec- und Entwickler-Seite, rund um die Webtechniken der Content Management Systeme.

Datenschutz


Diese Webseite nutzt keine Cookies oder sonstige Speichermechanismen, die einen Rückschluss auf das Leserverhalten zulassen.

Kontakt


Sie können mit der Redaktion oder dem Administrator via eMail unter der Adresse: Kontakt@Oliver-Lohse.de aufnehmen.