Mit wenigen Twig-Befehlen implementieren Sie eine Breadcrumb-Navigation in einem Twig-Template für das PICO CMS
Breadcrumb Navigation mit Twig
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