Bessere Breadcrumb Navigation mit Twig

home pico twig

SEO-Wissen für erfolgreiches Online-Marketing - Komplett aktualisiert und erweitert   -  Die Suchmaschinen-Optimierung ist eine der wichtigsten Disziplinen im Online-Marketing. Wenn es Ihnen darum geht, für Ihre Webseite oder Ihren Webshop ein Top-Ranking in den SERPs zu erzielen, müssen Sie wissen, wie Suchmaschinen ticken und welche Stellschrauben Sie wie einstellen. Sebastian Erlhofers SEO-Handbuch ist für Ihre SEO-Ausbildung ein wichtiger Begleiter und ein Quell an Wissen, aus dem Sie Praxiswissen und Profitipps schöpfen.

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.

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

Die so genannte Breadcrumb Navigation (Brotkrumen Navigation) hat sich im Internet sehr stark verbreitet und gehört, zumindest auf komplexen Webseiten, zur Standardnavigation.

<a href="/" class="badge bg-secondary">home</a>
{% for path in current_page.id|split('/',-1) %}
    {% set tmp = [tmp,path]|join('/') %}
    <a href="{{tmp}}" class="badge bg-secondary">{{path}}</a>
{% endfor %}

Code: automatische Breadcrumb Navigation mit Twig

Das kurze Coding stellt im Style des Bootstrap-CSS eine Reihe von klickbaren Buttons dar, der zum jeweilig übergeordneten Ordner verzweigen kann. Je Verzeichnis ein Button.

Alternative Variante

Wollen Sie einen etwas leichter lesbaren Code erstellen, können Sie auch gerne das folgende Code-Beispiel nutzen.

{% if page.id|split('/')[0] %} {{ page.id|split('/',-1)[0] }} {% endif %}
{% if page.id|split('/')[1] %}/{{ page.id|split('/',-1)[1] }} {% endif %}
{% if page.id|split('/')[2] %}/{{ page.id|split('/',-1)[2] }} {% endif %}
{% if page.id|split('/')[3] %}/{{ page.id|split('/',-1)[3] }} {% endif %}

Code: diskrete Programmierung

Der Befehl split() zerlegt die gesamte URL in ein Array und der if prüft die Existenz und zeigt den Inhalt der entsprechenden Stufe an.

Allerdings müssen Sie diese Variante manuell erweitern, wenn mehr als vier Verzeichnisebenen in Ihrer Webseite vorkommen. Aus SEO-Sicht, bevorzugen die Suchmaschinen jedoch sehr flache Strukturen und belohnen diese mit gutem Ranking. Eine Strukturebene ist hervorragend.


 07.07.2024    Kontakt@Oliver-Lohse.de    Breadcrumb Navigation

Angular das große Handbuch zum JavaScript-Framework. Einführung und fortgeschrittene TypeScript-Techniken   -  Angular ist das JavaScript-Framework für professionelle Webapplikationen - hier lernen Sie es umfassend kennen! Christoph Höller macht Sie mit allen relevanten Technologien, Standards und Kernbestandteilen des Frameworks vertraut. Am Praxisbeispiel einer Projektverwaltung führt Ihnen der Webprofi die Komponenten und Konzepte von Angular vor. Formulare, Routing, HTTP-Anbindung und Testing - hier lernen Sie Schritt für Schritt, wie Sie eigene Angular-Webapplikationen erstellen. Inkl. aller neuen Features und Komponenten. Aktuell inkl. Material Design.

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 mit split('/')

 pico  Breadcrumb Navigation


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

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.

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