Theming

L'esthétique de votre site est normalement quelque chose de personnel. Mais créer son propre thème ( jargon Drupal) n'est pas si évident que cela et demande des compétences qui ne sont pas que du domaine graphique. Il vaut mieux avoir de bonnes bases sur les "langages du web" tels que HTML dans sa version 5 (quand à faire), CSS (version 3), PHP,  Javascript et TWIG

L'article présenté ici comporte 3 parties :

  1. le thème de base ( niveau débutant).
  2. la personnalisation d'un thème (niveau débutant à confirmé).
  3. la création d'un thème (niveau confirmé à expert).

1. Le thème de base

Mais on peut commencer simplement en utilisant soit un des thèmes fournis avec votre version de Drupal, soit un des nombreux thèmes du site "drupal.org"

Une installation par défaut de Drupal comprend 2 thèmes :

  • un thème pour l'administration du site nommé "Seven"
  • un thème pour la navigation standard : "Bartik"

L'item  "apparence" du menu d'administration permet de les remplacer.

Pour cela,  se rendre sur Drupal.org pour copier l'adresse du thème qui vous plait et utiliser dans la page "apparence" le bouton "ajouter un nouveau thème".
Cette adresse sera de la forme "https://ftp.drupal.org/files/projects/xxxxxxx.tar.gz"

Lorsque le téléchargement est effectué, le thème téléchargé apparait dans la partie "thèmes désinstallé de la page "apparence" comme l'illustre l'image ci-dessous.
En cliquant sur le lien "installer et définir par défaut", ce thème deviendra le thème de votre site.

Cliquer pour agrandir l'image

2. Personnalisation d'un thème

Ma première personnalisation d'un thème téléchargé.

Avant de personnaliser  un thème (je ne parle pas ici de questions de droit, d'auteur par exemple), il faut comprendre l'organisation d'un thème sous Drupal et l'arborescence des fichiers associés.

Cette arborescence, illustrée ci-dessous, se trouve dans le dossier thème du site, dans un dossier portant le nom du thème, par exemple le dossier "dh" pour le thème 'dh"

A la racine de ce dossier du thème ("dh" pour l'exemple), figurent les fichiers

  • dh.info.yml  (obligatoire)
  • dh.layouts.yml
  • dh.libraries.yml (obligatoire)
  • dh.theme

et par exemple, la sous-arborescence de répertoires :

  • css
  • images
  • js
  • templates
Cliquer pour agrandir l'image

 

Pour la simplification de la présentation, les fichier décrits par la suite sont ceux correspondant à un thème qui se nommerait "dh", ce nom doit être remplacé par celui de votre thème.

2.1. Le fichier dh.info.yml (obligatoire)

le fichier d'extension ".info.yml" a pour principal objet  la description du thème en définissant

  • le thème "coeur drupal" sur lequel s'appuie le thème étudié (généralement "classy") ;
  • la liste (ou dictionnaire selon la terminologie YAML) des bibliothèques qui sont utilisées ;
  • la liste (ou dictionnaire) des "régions qui composent les pages du site.

Il doit respecter la syntaxe YAML.

Quelques mots-clé pour ce fichier :

  • name : le nom du thème (obligatoire)
  • type : theme (obligatoire pour définir un thème)
  • core: 8.x
    core_version_requirement: ^8 || ^9
  • libraries: liste des bibliothèques CSS et JS utilisées
  • base theme: (obligatoire)
  • logo: l'emplacement du fichier pour le logo du site
  • screenshot: l'emplacement du fichier pour l'image du thème dans la page "apparence"
  • regions: le dictionnaire qui établit votre liste  des régions qui formeront vos pages. On y trouve une liste telle que ci-dessous
      header: "L'entête"
      content: 'Le contenu du billet'
      help: "L' aide"
      breadcrumb: "Le fil d'Ariane"
      page_top: 'Le haut de page'
      page_bottom: 'Le bas de page'
      highlighted: 'La mise en evidence'  
      featured: 'La remarque'
      sidebar_first: 'La colonne gauche'
      sidebar_second: 'La colonne droite'  
      footer: 'Le pied de page'
     
Cliquer pour agrandir l'image


L'image ci-dessus montre les régions définies dans le fichier .info.yml à travers la page "Mise en page des blocs"  ( point 2 de l'image) du menu d'administration. Elle est  obtenue par l'item "structure" (point 1 ). Ces régions forment également la liste déroulante (point 3) permettant de choisir la position d'un bloc dans la page.

2.2. Le fichier dh.libraries.yml

2.3. Les gabarits du dossier "templates"

On appelle gabarit les fichiers d'extension ".html.twig" (exemple "page.html.twig").
Ce sont les fichiers qui définissent les différentes structures de pages .  "page.html.twig" est le gabarit principal pour l'affichage des pages du site.

Il faut à présent les adapter à nos besoins.

Il ne faut pas modifier les fichiers du thème de base présents dans le coeur de Drupal mais en faire une copie (en gardant la structure de l'arborescence) dans le dossier "templates" de votre thème et faire vos modifications sur cette copie.


 

La première adaptation concerne le fichier "page.html.twig"  pour prendre en compte les régions définies dans le fichier .info.yml de votre thème.
Ci-dessous, le gabarit page.html.twig de mon site, simplifié au maximum, pour ne garder que les éléments qui structurent  la page.

L'image ci-dessous montre l'architecture des pages du site. Elle est réalisée par le gabarit "page.html.twig"

Cliquer sur agrandir l'image

Suivre ce lien pour étudier ici quelques exemples de fichier gabarit :

  • page.html.twig (la structure des pages)
  • region--sidebar-first.html.twig (la colonne gauche)
  • breadcrumb.html.twig (le menu fil d'Ariane)
  • region--content.thml.twig (les billets)

 

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>

2.4. Le fichier dh.layouts.yml (optionnel)

Le fichier d'extension ".layouts.yml" a pour principal objet  la description de couches additionnelles pour le gestionnaire de mise en page ("layout builder") pour les pages du thème.

2.5. Le fichier dh.theme (optionnel)

Le fichier d'extension ".theme" a pour objet la modification du comportement par défaaut du CMS Drupal. Ces modifications sont réservées aux utilisateurs très expérimentés.

3. Créer son propre thème