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.
- la section <header>
<header role="banner" class="branding clearfix">
{# afficher tous les blocs qui ont été assignés à la section "header" #}
{{ page.header }}
</header>
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.
- {# 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
- 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 :
<main role="main">
<!-- voir la section colonne gauche ci-dessous -->
<!-- voir la section article role="main" ci-dessous -->
<!-- voir la section colonne droite ci-dessous -->
</main>
Ce balisage n'a d'intérêt que pour la CSS et permettra d'assurer l'affichage de la page en 3 colonnes
- 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.
- 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 #}
- 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