page.html.twig

Créer ou adapter le gabarit page.html.tiwg

Ce fichier, qui doit être présent dans le dossier "templates" de votre thème, contient le code "html-twig" qui est utilisé pour structurer toutes les pages du site.
Dans cette partie, je vais documenter le fichier "page.html.twig" de mon site.

1. la section <header>

<header role="banner" class="branding clearfix">
       {#  afficher tous les blocs qui ont été assignés à la section "header" #}
       {{ page.header }}
</header>

De la même façon, {{ page.region }} affichera les blocs de la région "region" dès lors que celle-ci  est définie dans le fichier .info.yml du thème.

2. la section <main "role main">

<main role="main">  
         <aside role="colonne-gauche" >
            {% if page.sidebar_first %}
                {# / colonne-gauche ( region--sidebar_first.html.twig  #}
                {{ page.sidebar_first}}
                {# / fin de colonne-gauche  #}
            {% endif %}
         </aside>
        <article role="main">  

            {# le menu  breadcrumb  ( breadcrumb.html.twig  #}
            {{ page.breadcrumb }}
                
            {% if page.highlighted %}
                 <aside role="highlighted">
                      <div class="section clearfix">
                          {{ page.highlighted }}
                    </div>
                </aside>
            {% endif %}

            {% if page.help %}
                 <aside role="help">
                      <div class="section clearfix">
                         {{ page.help }}
                    </div>
                </aside>
            {% endif %}

            {% if page.featured %}
                 <aside role="featured">
                    <div class="section clearfix">
                    {{ page.featured }}
                    </div>
                </aside>
            {% endif %}

            {# / colonne-centrale  : le contenu  ( region--content.html.twig  #}
            {# le contenu de la page   #}
            {{page.content}}
            
            <footer role="pied-de-page">
                {% if page.footer %}
                        {{ page.footer}}
                {% endif %}
            </footer>
        </article> <!-- /main -->
        {# / fin de colonne-centrale  #}
        
      <aside role="colonne-droite"  >
            {% if page.sidebar_second %}
                {# / colonne-droite ( region--sidebar_second.html.twig  #}    
                {{ page.sidebar_second }}
                {# / fin de colonne-gauche  #}
            {% endif %}
        </aside>
 </main>

Cette section se décompose en 3 parties ( une pour chacune des colonnes qui forme le contenu de la page)  comme schématisé ci-dessous :

21.    la colonne gauche

<aside role="colonne-gauche" >
            {% if page.sidebar_first %}
                {# / colonne-gauche ( region--sidebar_first.html.twig  #}
                {{ page.sidebar_first}}
                {# / fin de colonne-gauche  #}
            {% endif %}
  </aside>

Ce code affiche la code de la région "colonne gauche" de mon thême. Il est décrit dans le gabarit region--sidebar_first.html.twig. Cliquez_ici pour en voir le détail.

22. la section principale

Cette section encadrée par <article role="main"> et </article> a pour objet d'afficher la colonne centrale de la page. C'est dans cette zone que figure l'essentiel de la page. Elle se décompose en cinq sous-sections:

• les "onglets" ou fil d'ariane (breadcrumb) qui affiche le menu de navigation intégrée pour le développement du site  (pour les utilisateurs autorisés) ;
• la section "mise en évidence" (role ="highlighted") qui affiche le cas échéant des informations système (pour les utilisateurs autorisés) ;
• la section "aide" (role ="help)" qui affiche les cas échéant une aide pour les utilisateurs autorisés ;
• la section "caractéristique" (role ="featured)" qui affiche les cas échéant des informations pour les utilisateurs autorisés ;
• le contenu qui affiche le corps de l'article ;
• un éventuel pied de page (role = "pied-de-page")

        <article role="main"> 
            {# le menu  breadcrumb  ( breadcrumb.html.twig  #}
            {{ page.breadcrumb }}
                
            {% if page.highlighted %}
                 <aside role="highlighted">
                      <div class="section clearfix">
                          {{ page.highlighted }}
                    </div>
                </aside>
            {% endif %}

            {% if page.help %}
                 <aside role="help">
                      <div class="section clearfix">
                         {{ page.help }}
                    </div>
                </aside>
            {% endif %}

            {% if page.featured %}
                 <aside role="featured">
                    <div class="section clearfix">
                    {{ page.featured }}
                    </div>
                </aside>
            {% endif %}
            
           {# / colonne-centrale  : le contenu  ( region--content.html.twig  #}
            {# le contenu de la page   #}
            {{page.content}}
            
            <footer role="pied-de-page">
                {% if page.footer %}
                        {{ page.footer}}
                {% endif %}
            </footer>
        </article> <!-- /main -->
        {# / fin de colonne-centrale  #}

23. la section <colonne droite>

      <aside role="colonne-droite"  >
            {% if page.sidebar_second %}
                {# / colonne-droite ( region--sidebar_second.html.twig  #}    
                {{ page.sidebar_second }}
                {# / fin de colonne-gauche  #}
            {% endif %}
        </aside>

Ce code affiche la code de la région "colonne droite". Celui-ci est décrit dans le gabarit region--sidebar-second.html.twig