Breadcrumb Navigation mit split('/')

home pico twig

KI für Content Creation - Texte, Bilder, Audio und Video erstellen mit ChatGPT und Co   -  Nominiert für den Tiger-Award 2024 in der Kategorie „Business Bestseller“. Schnell und effektiv Content erstellen mit ChatGPT und DeepL. Texte optimieren für SEO mit Semrush und Yoast. Bilder, Audio und Videos kreieren mit DALL-E, Midjourney, Adobe Firefly, Adobe Podcast u.v.m. KI-Tools sinnvoll in den gesamten Content-Marketing-Prozess integrieren. KI-Technologien wie ChatGPT und Co. erleichtern Content Creation um ein Vielfaches – Sie müssen nur wissen, wie diese Tools effektiv eingesetzt werden können.

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

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

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.


 28.01.2024    Kontakt@Oliver-Lohse.de    Breadcrumb Navigation

VBA mit Excel - Der leichte Einstieg - Vom ersten Makro zur eigenen Eingabemaske   -  Erweitern Sie den Funktionsumfang von Excel, indem Sie z. B. Routineaufgaben mit Makros erledigen, benutzerdefinierte Dialogfenster und Eingabemasken erstellen oder Ihre eigenen Funktionen programmieren. Dieses Buch richtet sich an Excel-Anwender, die in die VBA-Programmierung einsteigen möchten, aber noch keinerlei Vorkenntnisse besitzen. Es führt Sie Schritt für Schritt und mit vielen Beispielen in die Grundlagen der VBA-Programmierung ein und zeigt, wie Sie in VBA mit Excel-Objekten, z. B. Tabellenblättern, Zellen und Zellbereichen umgehen. Erfahren Sie außerdem, wie Sie mit UserForms*, Steuerelementen und VBA-Anweisungen eine komfortable Benutzeroberfläche für viele Zwecke und auch für ungeübte Excel-Anwender erstellen.

Wir sind Mitglied im Amazon.Partnernet und können mit Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Weitere passende Beiträge

Step Back Template Navigation für Pico

 pico  Breadcrumb Navigation


Möchten Sie einen Zurück-Button in jedem Beitragsverzeichnis im PICO CMS implementieren, dann lesen Sie diesen Beitrag und nutzen das folgende Coding.

PicoPagesList mit Twig ohne Plugin realisieren

 pico  Breadcrumb Navigation PicoPagesList


Pico CMS bietet das Plugin PicoPagesList, das weitere Beiträge des Ordners zeigt, alternativ kann diese Funktion mit Twig ohne Plugin realisiert werden

Breadcrumb Navigation anpassen

 automad  Navigation Breadcrumb


Passen Sie die beliebte Breadcrumb Navigation in Ihrer Webseite an eigene Wünsche an. Versuchen Sie den Codeschnipsel des Beitrags und werten Ihren Blog auf.

Bessere Breadcrumb Navigation mit Twig

 pico  Breadcrumb Navigation


Mit wenigen Twig-Befehlen implementieren Sie eine Breadcrumb-Navigation in einem Twig-Template für das PICO CMS

Top- und Sub-Level Menüs

 pico  Menue Navigation


Top-Level vs Sub-Level Menüs in Pico CMS. Zeigen Sie immer die oberen Menüebene oder die aktuell untergeordneten Menüebene an. Mit diesem Code geht es

Subpages im WonderCMS Theme abfragen und anzeigen lassen

 wondercms  Navigation Menue


Mit diesem Code zeigen Sie die so genannten subpages in einem WonderCMS Theme an. Es sind nur zwei PHP Schleifen nötig, um Subpages in das Theme einzubinden.

Beiträge und Kategorien rekursiv anzeigen

 yellow  Navigation Menue Ordner Post Beitrag


Die Standard URL für den Admin Login in Datenstron Yellow und wie Sie ihn verstecken bzw. verbergen. So schützen Sie sich vor einem Hacker-Angriff auf das CMS

Beitragsmenü ohne Plugin in Pico

 pico  Menue Navigation Beitrag


Für die Einbindung eines Menüs gibt es kostenlose Plugins, Sie können dies auch mit Mitteln des Templates umsetzen und verzichten auf unsichere Plugins

Impressum


CMSWorkbench.de ist eine reine Entwickler-Webseite und dient vorwiegend als Wissensspeicher für die Entwicklung von CMS

Datenschutz


Die Webseite verwendet keinerlei Tracking- oder Speicher-Mechanismen, die Rückschlüsse auf Ihre IP oder das Leseverhalten zulassen

Affiliate


Wir sind Mitglied im Amazon Partnernet und können mit Affiliate-Links (* den Betrieb der Seite etwas unterstützen, für Sie ist das natürlich kostenlos

Kontakt


Sie können mit uns über eMail Kontakt aufnehmen, schreiben Sie an Kontakt@Oliver-Lohse.de