Mon thême

Réaliser son propre thème nécessite 3 étapes.

  1. Préambule
  2. Définir la maquette ( sur le papier !) de l'organisation de la page
  3. Les fichiers pour réaliser la maquette
  4. Créer ou Adapter les fichiers de gabarit.

 

  1. Préambule :

Pour faciliter la compréhension de ce billet, je décide que mon  thème se nommera "dh".
Dans l'organisation des thèmes (voir ici) de Drupal V8, (cela signifie donc  que les fichiers réalisant  ce thême seront stockés dans un dossier intitulé "dh" situé sous  theme/custom (ie : theme/custom/dh)
Ce nom devra être repris dans les noms des fichiers décrivant le thème : 

  • dh.info.yml (définition des bibliothèques et des régions (cf : la maquette)
  • dh.librairies.yml (liste des fichiers JS et CSS)
  • dh.theme ( modification du comportement par défaut de drupal)

 

  1. La maquette :

Ci-dessous figure la maquette du site à réaliser. En jaune, figurent les régions tels qu'elles doivent être définie dans le fichier "dh.info.yml" du thème et tel qu'un administrateur pourra les visualiser dans la page du menu d'administration " dont le lien url est admin/structure/block" (ou dans structure - mise en page des blocs en suivant les items du menu) en cliquant sur le lien "aperçu des régions des blocs" .

 

La mise en page du site se décompose donc ainsi :

  • un entête  pour essentiellement le logo du site et le menu principal.
  • une colonne à droite pour l'agenda, le bloc de recherche....
  • une colonne centrale ou figureront les articles qui est formée de :
    • un menu "fil d'ariane";
    • 3 blocs d'information (aide ; mise en évidence ; caractéristique) ;
    • le bloc pour afficher le contenu des billets ;
    • le pied de page
  • une colonne à gauche pour le menu contextuel, le calendrier...

soit 10 régions au minimum.

Lire dans l'onglet ci-dessous, le contenu du fichier "dh.info.yml"

  1. Les fichiers pour réaliser la maquette
     

Dans Drupal V8, comme dans tout site web, 2 types de fichiers sont utilisés :

  • le premier se décline en HTML ( php, html, twig..) et définit la structure ("layout") de la page ;
  • le second est une feuille de style CSS

La mise en page (layout) du site est réalisée dans le fichier "page.html.twig" situé dans le dossier template du thème (ie : du dossier dh dans notre cas). Voir son contenu dans l'onglet ci-dessous.

En html5, il y a des balises spécialisées pour la mise en page globale, à savoir :

  • <header> pour les entêtes.
  • <nav> pour les menus.
  • <article> pour le contenu proprement-dit.
  • <aside> pour les colonnes.
  • <footer> pour les pieds de page.
  • <section> pour le reste .

Il peut être très utile de préciser la définition de la balise, par exemple pour la distinguer ( l'identifier) d'une autre. C'est le rôle de l'attribut : role.

Dans la feuille de style, dont un extrait est affiché dans un des onglets ci-dessous, on lira donc ce genre de ligne : aside[role="colonne-gauche"] qui  met en forme le contenu de la balise du codage html : <aside role="colonne-gauche> ....</aside>
 

Notons les largeurs de chacune des régions 19% + 50% + 20% = 99% de la largeur d'affichage disponible et l'élément "display:inline-block" sans lequel les 3 régions s'afficheraient les unes sous les autres.

  1. Créer ou Adapter les fichiers de gabarit.