Leitfaden zur Template-Erstellung

Upgrade-sichere Hugo-Layouts und Shortcodes mit Theme-Tokens und Tailwind erstellen.

Erweiterungen gehören in die konsumierende Website, weil lokale Hugo-Layouts vor dem Theme-Modul aufgelöst werden. Wählen Sie den kleinsten Erweiterungspunkt: Shortcode für Inhaltskomponenten, Partial für wiederverwendbares Template-Markup oder ein Bereichslayout für eine abweichende Seitenstruktur.

Aktivieren Sie [build.buildStats] enable = true in hugo.toml.
Installieren Sie @tailwindcss/cli und versionieren Sie den Lockfile.
Legen Sie beispielsweise layouts/shortcodes/status-panel.html an.
Verwenden Sie vollständige Klassen wie bg-surface, text-hi, border-default, rounded-lg und p-6; dynamisch zusammengesetzte Klassen werden von Tailwind nicht zuverlässig erkannt.
Bevorzugen Sie semantische Variablen wie --color-surface, --space-5 und --radius-lg.
Ergänzen Sie Tabler-SVGs unter assets/icons/ und vergeben Sie für bedeutungstragende Symbole einen zugänglichen Namen.
Prüfen Sie Produktion, Farbmodi, 200 Prozent Textgröße, Tastatur, Mobilansicht, Druck und alle Sprachen.
Vergleichen Sie lokale Overrides bei jedem Theme-Upgrade mit dem neuen Upstream-Template.

Die vollständigen Klassen und Tokens beschreibt Tailwind und Design-Tokens.