Les gabarits

Les gabarits  (template) sont les fichiers contenant les instructions aux formats TWIG et  HTML qui déterminent 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 assigner dans la section  "twig.config" du fichier "sites/default/services.yml"

  • le paramètre "debug" à "true" (au lieu de false) ;
  • le paramètre "cache"  à "false" (au lieu de true) pour ne pas être obliger de vider manuellement le cache à chaque modification de vos gabarits ;
  • le paramètre "auto_reload" à "true" (au lieu de null).

 twig.config:
    debug: true
    auto_reload : true
    cache : false

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

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

 <!-- 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

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
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é des variables  que vous pouvez utiliser  ;
    ou <ol>
      {% for key, value in _context  %}
        <li>{{ key }}</li>
      {% endfor %}
    </ol>

    plus long mais plus lisible
  • {{ dump (variable) }}          pour obtenir le contenu de  "variable".

Consulter "autopsie d'un gabarit" : billet qui détaille pas à pas la création du gabarit "block--tagclouds.html.twig" qui met en forme le bloc "mots clé en colonne gauche du site.
Consulter cette documentation pour en savoir plus sur la découverte et l'analyse des variables d'un gabarit.

 

Quelques gabarits du site

Cliquez sur le bouton pour copier le code
dans le presse papier
<header role="banner" class="branding clearfix">
    {# / afficher tous les blocs qui ont été assignés à la section "header" #}
    {{ page.header }}
</header>

<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">  
        {# / colonne-centrale  : le contenu  ( region--content.html.twig  #}
            {# le menu  breadcrumb  ( breadcrumb.html.twig  #}
                {{ page.breadcrumb }}
            {% if page.highlighted %}
                 <section role="highlighted">
                    <div class="section clearfix">
                    {{ page.highlighted }}
                    </div>
                </section>
            {% endif %}
            {% if page.help %}
                 <section role="help">
                    <div class="section clearfix">
                    {{ page.help }}
                    </div>
                </section>
            {% endif %}
            {% if page.featured %}
                 <section role="featured">
                    <div class="section clearfix">
                    {{ page.featured }}
                    </div>
                </section>
            {% endif %}
            {# le contenu de la page   #}
            <section role="contenu">
                {{page.content}}
            </section>
            <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>
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 sur le bouton pour copier le code
dans le presse papier
{#
/**
 * @file
 * affichage du bloc "mots clé".
 */
 #}
<section role="le-bloc">
      {{ title_prefix }}
      {% if label %}
        <h2{{ title_attributes }}>{{ label }}</h2>
      {% endif %}
      {{ title_suffix }}
    {% block content %}
        <div class="dh_tagcloud">
            <div>
               {{content[0]}}
            </div>
           <div>
               </br>
               <a href="{{content[1]["#url"]}}">
                   <img src="http://localhost/themes/custom/dhv4/css/images/plus.png"
                        alt="{{content[1]['#title']}}" height="20" width="50">
               </a>
           </div>
        </div>
    {% endblock %}
</section>

Cliquez ici