03 — Créer un thème Twig sobre
Comprendre les templates Twig et construire un thème minimal sans empiler de framework CSS inutile.
Avant de commencer
- Être à l'aise avec HTML/CSS.
- Avoir terminé le module 02.
Comprendre le rôle de Twig
Twig assemble le HTML du thème avec les données de la page. Le fichier default.md est généralement rendu par un template default.html.twig du thème actif.
user/themes/mon-theme/templates/default.html.twig- Je sais relier default.md à default.html.twig.
Créer une structure minimale
Pour apprendre, garde peu de fichiers : déclaration du thème, templates, partials et CSS.
Grav ne t'oblige pas à utiliser Bootstrap, Tailwind ou un autre framework.
user/themes/mon-theme/
├── mon-theme.yaml
├── blueprints.yaml
├── templates/
│ ├── partials/
│ └── default.html.twig
└── css/site.css- Le thème peut être activé dans Grav.
Afficher le contenu de la page
Commence avec un HTML sémantique et affiche seulement le titre et le contenu. Ajoute ensuite navigation et composants petit à petit.
<main>
<h1>{{ page.title|e }}</h1>
<div class="content">{{ page.content|raw }}</div>
</main>- Le titre et le contenu s'affichent avec mon thème.
Choisir héritage ou thème maison
Grav permet l'héritage de thèmes : surcharger quelques templates est souvent plus maintenable que copier tout un thème.
Pour un projet très sobre, un petit thème maison reste parfaitement valable.
- Je sais expliquer pourquoi je pars sur héritage ou thème maison.
Faire l'exercice Potager
Transforme les quatre pages du module 02 en vitrine responsive avec header, navigation, contenu et footer.
N'ajoute aucun JavaScript tant qu'un besoin réel ne le justifie.
- Le site fonctionne sur mobile.
- Le HTML reste sémantique.
- Chaque dépendance ajoutée a une raison précise.
🧯 Erreurs fréquentes
Le template Twig n'est jamais utilisé
Cause probable : Thème actif, nom de fichier ou template incorrect
Correctif : Vérifier le thème actif, le nom du .md et le template correspondant.
Une variable Twig est vide
Cause probable : Propriété inexistante ou donnée absente
Correctif : Revenir à page.title et page.content puis ajouter les données une par une.
Notes
- Objectif : profiter de Twig sans transformer le thème en usine.
Sources de vérification
Ces liens servent à recontrôler le tuto quand l'outil ou l'hébergeur évolue.
Historique de la fiche
L'historique détaillé reste aussi disponible dans Git.