Bessere Breadcrumb Navigation mit Twig

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