Prompt utilisé pour régénérer cette page :
Page "Tags" du theme-debugger de web-cylian-org.
Catégorie : Theme Debugger — catalogue complet du shortcode Hugo {{< tag >}}
avec toutes les variantes de couleurs et styles.
=== FRONT MATTER (index.md) ===
title: "Tags"
description: "Test des tags et du shortcode tag"
icon: "tag-outline"
tags: ["design", "css", "typography"]
Pas de js ni scss — page statique utilisant le shortcode Hugo.
=== FRAGMENT LEFT (_fragment.left.md) ===
Navigation partagée du theme-debugger (identique sur toutes les pages).
Front matter : title "Navigation", weight 100, _build render/list: never.
Contenu : h5 "Theme Components" + 9 liens.
=== CONTENU HTML (index.md) — 5 sections ===
Section 1 "Basic Tags" (<section class="section full visual">) :
- <h3>Basic Tags</h3>
- Table avec class="typo-table", 2 colonnes :
th class="typo-col-grow" "Rendu" | th class="typo-col-nowrap" "Shortcode"
- 4 lignes, chacune avec le tag rendu + son code shortcode HTML-escaped :
1. {{< tag label="Tag simple" >}} — tag sans paramètre optionnel
2. {{< tag label="Tag icône" icon="tag" >}} — avec icône
3. {{< tag label="Tag lien" link="#" >}} — avec lien
4. {{< tag label="Tag lien + icône" icon="link" link="#" >}} — icône + lien
- <h3>Tags with Icons (Filled)</h3>
- Même structure de table, 4 lignes :
1. danger + alert-circle-outline + filled=true
2. success + check + filled=true
3. warning + alert-outline + filled=true
4. info + information-outline + filled=true
- Le code shortcode dans la colonne droite utilise des HTML entities
({{< tag ... >}}) pour l'affichage.
Section 2 "Couleurs sémantiques" (<section class="section full visual">) :
- <h3>Couleurs sémantiques</h3>
- Table typo-table, 6 lignes — chaque ligne montre outline + filled côte à côte :
- danger / warning / notice / success / info / muted
- Format de chaque cellule : {{< tag label="X" color="X" >}} {{< tag label="X" color="X" filled=true >}}
Section 3 "Couleurs chromatiques" (<section class="section full visual">) :
- <h3>Couleurs chromatiques</h3>
- Table typo-table, 14 lignes — chaque ligne montre outline + filled :
red, orange, yellow, lime, olive, green, teal, aqua, blue, navy,
purple, fuchsia, maroon, silver
- Même format que les couleurs sémantiques.
Section 4 "Alignement" (<section class="section full visual">) :
- <h3>Alignement</h3>
- Un <p> contenant 4 tags côte à côte pour tester l'alignement vertical :
1. {{< tag label="Text" color="blue" >}}
2. {{< tag label="Icon" icon="check" color="blue" >}}
3. {{< tag label="Text" color="green" filled=true >}}
4. {{< tag label="Icon" icon="check" color="green" filled=true >}}
=== SHORTCODE {{< tag >}} — PARAMÈTRES ===
Le shortcode accepte les paramètres suivants :
- label (string) : texte du tag — obligatoire
- color (string) : couleur — sémantique (danger, warning, notice, success,
info, muted) ou chromatique (red, orange, yellow, lime, olive, green,
teal, aqua, blue, navy, purple, fuchsia, maroon, silver)
- icon (string) : nom d'icône MDI (Material Design Icons)
- link (string) : URL — rend le tag cliquable
- filled (bool) : true pour fond coloré, false/absent pour outline
=== CLASSES CSS UTILISÉES ===
- .typo-table : table pleine largeur
- .typo-col-grow : colonne qui s'étend (width: 100%)
- .typo-col-nowrap : colonne sans retour à la ligne (white-space: nowrap)
- .section.full.visual : wrapper de section standard du debugger
=== OBJECTIF ===
Référentiel visuel complet du shortcode tag : tester toutes les
combinaisons de paramètres, vérifier la cohérence des couleurs
sémantiques et chromatiques, et valider l'alignement vertical
des tags avec/sans icônes, outline/filled.
Page entièrement générée et maintenue par IA, sans intervention humaine.