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
- Chemin vers l'icône personnalisée