Développement d'un Thème

Création du dossier pour le thème

Nom du thème créé : mytheme

Créer le dossier /themes/custom/mytheme

Y créer l'arborescente suivante :

themes
   custom
       mytheme
           css
               style.css
           js
               main.js
           templates
               page.html.twig
           mytheme.info.yml
           mytheme.libraries.yml

Configuration du Thème

Fichier mytheme.info.yml 

name: My Theme
description: This is my first theme project
type: theme
base theme: stable9
core_version_requirement: ^10
regions:
  header: Header
  content: Content
  sidebar_left: Sidebar Left
  sidebar_right: Sidebar Right
  footer: Footer
libraries:
  - mytheme/global-css

Le thème est basé sur stable9 afin de garantir que la base du thème évolue en même temps que les évolutions de Drupal. Si on se basait sur rien il faudrait soi-même adapter à chaque évolution de Drupal.

Librairies

Fichier mytheme.libraries.yml

global-css:
  version: VERSION
  css:
    theme:
      css/main.css: {}
  js:
    js/main.js: {}
  dependencies:
    - core/jquery

Structure des templates du core

x-- core/modules/system/templates/html.html.twig
|
|   
|       
|       
|
|       
|
|       x-- core/modules/toolbar/templates/toolbar.html.twig
|       |
|       x--
|
|       x-- core/modules/system/templates/off-canvas-page_wrapper.html.twig
|       |
|       |   x-- core/modules/system/templates/page.html.twig
|       |   |
|       |   x--
|       |
|       x--
|
|       
|   
|
x--

Activer le mode debug

Depuis le menu Configuration > Développement > Paramètres de développement

Cocher les deux cases Ne pas mettre en cache le balisage et Mode développement de Twig

Réécrire un template

Fichier templates/page.html.twig



   {{page.header}}



   {{page.content}}



   {{page.footer}}

Intégrer Bootstrap

Doc de Bootstrap 5.0 : https://getbootstrap.com/docs/5.0

Télécharger Bootstrap sur https://getbootstrap.com/docs/5.3/getting-started/download/

  • Prendre la version Compiled and JS bootstrap-5.3.1-dist.zip
  • Décompresser ce fichier vers un dossier

Copier bootstrap.min.css et bootstrap.min.js dans les dossiers css et js du thème.

themes
   custom
       mytheme
           css
               bootstrap.min.css
               style.css
           js
               bootstrap.min.js
               main.js

Référencer ces fichiers dans la librairie :

Fichier mytheme.libraries.yml

global-css:
  version: VERSION
  css:
    theme:
      css/bootstrap.min.css: {}
      css/main.css: {}
  js:
    js/bootstrap.min.js: {}
    js/main.js: {}
  dependencies:
    - core/jquery

Favicon

Inclure le fichier favicon.png dans le thème perso :

themes\
   custom\
      mytheme\
         favicon.png

Aller dans les paramètres du thème, et configurer la section comme ceci :

  • Favicon
    • Chemin vers l'icône personnalisée
      • themes/custom/mytheme/favicon.png