page.html.twig

Mots Clé Système
  1. 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.

information complémentaire disponible en cliquant ici
Il n'est pas du rôle de ces portions de code, de gérer l'aspect graphique qui est pris en charge par le CSS qui traite des balises "main", "aside", "role", etc
  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>

information complémentaire disponible en cliquant ici

Le code {{ page.header }} affiche tous les blocs que vous placez dans la région "header" ou "entête" de votre site (cf : la page mon thême).

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.

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 l'expression "content"
  • {%  instruction   %} signifie "exécuter l'instruction
    • {%  if ... %} ....{%  else  %}  ... {%  endif  %}
    • {%  for  ... in ... %} {%  else  %}  ... {%  endfor %}
    • {%  block ....  %}  ... {%  endblock %}
  • plus d'information sur le moteur de template twig
  1. la section <section "role contenu">

<main role="main">   
     <section role="contenu">
         <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>
    </section> <!-- /contenu -->  
 </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 :

<main role="main">
    <section role="contenu">
          <!-- voir la section colonne gauche ci-dessous -->
          <!-- voir la section article role="main" ci-dessous -->
         <!-- voir la section colonne droite ci-dessous -->
   </section> <!-- /contenu -->
</main>

Ce balisage n'a d'intérêt que pour la CSS et permettra d'assurer l'affichage de la colonne gauche comme 1er bloc à gauche de la page.

  1.    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.

  1. 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  #}

  1. 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.tpl.twig