Les gabarits

Les gabarits  (template) sont les fichiers contenant les instructions aux formats TWIG et  HTML qui détermine le rendu des pages et éléments qui, sous Drupal, forment le site.
Pour connaitre le gabarit responsable d'un affichage, il convient de configurer votre installation en mode "debug".

Pour cela, il faut mettre le paramètre debug de la section twig.config du fichier "services.yml" à true (au lieu de false)

 twig.config:
    debug: true

Ce fichier se trouve dans le dossier /site/default/ de votre installation.

Pour visualiser les effets de cette modification, il faut "effacer tous les caches" dans "administration - configuration - performance" (admin/config/,,,).

L'inspection du code (par exemple avec les outils de développement de firefox) nous indique quel gabarit  produit de l'affichage (ouput).

 <!-- BEGIN OUTPUT from 'themes/custom/dh/templates/layout/page.html.twig' -->
           <!-- BEGIN OUTPUT from 'themes/custom/dh/templates/layout/region--sidebar_first.html.twig' -->
                          --------
           <!-- END OUTPUT from 'themes/custom/dh/templates/layout/region--sidebar_first.html.twig' -->
                          --------
<!-- END OUTPUT from 'themes/custom/dh/templates/layout/page.html.twig' -->
 

Le cadre ci-dessus reproduit l'affichage du mode debug pour mon thème. Dans cet extrait, on peut noter que le gabarit page.html.twig du dossier themes/custom/dh/templates/layout est responsable du rendu du contenu de la page et que le gabarit region--sidebar_first.html.twig du même dossier est responsable de l'affichage du rendu du contenu de la colonne gauche (voir ICI pour plus d'information sur l'organisation du thême).

information complémentaire disponible en cliquant ici

Pour obtenir la liste des variables disponibles dans le gabarit que vous manipulez, il faut  insérez le code : 

  • {{ dump(_context|keys) }} pour visualiser l'intégralité de ce que vous pouvez utiliser  ;
  • {{ dump(variable) }}          pour obtenir la liste complète des variables disponibles..

Quelques gabarits du site

Cliquez sur le bouton pour copier le code
dans le presse papier
    

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

<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">
           {# / colonne-centrale : le contenu ( region--content.html.twig #}
           {# le menu breadcrumb ( region--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 %}

             {# 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-droite #}
                 {% endif %}
    </aside>
  </section>
</main>
         
Cliquez sur le bouton pour copier le code
dans le presse papier
    
{#
/**
 * @file.
 * Available variables:
 * - content: The content for this region, typically blocks.
 * - attributes: HTML attributes for the region div.
 * - region: The name of the region variable as defined in the theme's
 *   .info.yml file.
 */
#}

{%
  set classes = [
    'region',
    'region-' ~ region|clean_class,
  ]
%}           
{% if content %}
    <div{{ attributes.addClass(classes) }}>
        {{ content }}
    </div>
{% endif %}
Cliquez sur le bouton pour copier le code
dans le presse papier

{#
/**
 * @file
 * affichage de la region sidebar_first .
 */
 #}

{% if content %}
    {{ content}}
{% endif %}

Cliquez ici