Guide de création de templates

Créer des layouts et shortcodes Hugo maintenables avec les jetons du thème et Tailwind.

Conservez les adaptations dans le site consommateur: Hugo donne priorité aux layouts locaux sur ceux du module. Choisissez le plus petit point d’extension: shortcode pour un composant de contenu, partial pour du markup réutilisable ou layout de section pour une structure différente.

Activez [build.buildStats] enable = true dans hugo.toml.
Installez @tailwindcss/cli et versionnez le fichier de verrouillage.
Créez par exemple layouts/shortcodes/status-panel.html.
Employez des classes littérales comme bg-surface, text-hi, border-default, rounded-lg et p-6; Tailwind ne découvre pas fiablement les classes construites dynamiquement.
Préférez les variables sémantiques telles que --color-surface, --space-5 et --radius-lg.
Ajoutez les SVG Tabler dans assets/icons/ avec un nom accessible lorsque l’icône transmet une information.
Testez production, modes de couleur, texte à 200 %, clavier, mobile, impression et toutes les langues.
Comparez chaque override local au nouveau template upstream lors des mises à jour.

Consultez Tailwind et jetons de design pour les classes et jetons disponibles.