Aller au contenu principal


breadcrumb.html.twig

Le code ci-dessous affiche le fil d'ariane du site

Cliquez sur le bouton pour copier le code dans le presse papier
{#
/**
 * @file
 * Theme override for a breadcrumb trail.
 *  Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */
 #}
    {% if breadcrumb %}
        <nav role="dh-breadcrumb" aria-labelledby="system-breadcrumb">
            <h3 id="system-breadcrumb" class="visually-hidden">
                {{ 'Breadcrumb'|t }}
                {{  'Vous êtes ici :'|t  }}
            </h3>
                <ul>
                    {% for item in breadcrumb %}
                        <li>                       
                          {% if item.url %}
                           <span> <a href="{{ item.url }}"> {{ item.text }}</a> </span>
                          {% else %}
                            <span>{{ item.text }}</span>
                        {% endif %}
                        <span>&nbsp;<img src="/themes/custom/dhv3/css/images/task-list.png"></span>
                    </li>             
                {% endfor %}            </ul>
    </nav>
{% endif %}
 

Ce code se déchiffre ainsi :

  • {% if breadcrumb %} : si un menu fil d'ariane est défini faire
  • {{ 'Breadcrumb'|t }} : écrire la traduction de 'Breadcrumb
  • {% for item in breadcrumb %} : pour chaque iten du menu faire

On observe également la mise en place de la balise CSS nav role="dh-breadcrumb" qui est responsable de la mise en forme du menu.

information complémentaire disponible en cliquant ici

  • {# afficher tous les blocs qui ont été assignés à la section "header" #} est un commentaire
  • {{ content }} signifie "rendre-évaluer-exprimer-produire" le résultat de la variable "content"
    • {{ }} est utilisé pour afficher la valeur d'une variable ou le résultat de l'évaluation d'une expression
  • {% instruction %} signifie "exécuter l'instruction
    • {% if ... %} ....{% else %} ... {% endif %}
    • {% for ... in ... %} {% else %} ... {% endfor %}
    • {% block .... %} ... {% endblock %}
  • plus d'information sur le moteur de template twig