Shortcodes

Les shortcodes sont la porte de sortie de Hugo: un moyen de placer dans une page ce que le Markdown ne sait pas exprimer, sans basculer dans du HTML brut. Consultez les Composants pour les gabarits HTML rendus par les mises en page.

Chaque référence de shortcode suit un de trois modes de documentation. Le mode par défaut, live, rend le shortcode dans sa propre page de référence, à l’intérieur de component-preview lorsqu’un cadre aide à isoler le résultat. Une interface dependent pointe avec component-relationship vers le parent ou la page de contenu qui peut rendre son état réel. Une interface nonvisual documente son résultat et ses contraintes au lieu d’inventer une maquette décorative.

npm run lint:interfaces vérifie le mode choisi dans les deux langues : une référence active doit appeler le shortcode, une référence dépendante doit pointer vers une cible qui l’appelle, et une référence non visuelle doit contenir les sections Résultat et Contraintes.

Navigation

CompanionUn renvoi en haut de page vers une page liée, avec une phrase justifiant le lien.
Index d’ancrageUne passerelle Markdown vers le composant partagé d’index d’ancrage pour les liens vers des sections de la même page
Relation de composantUn lien d’une interface dépendante vers le parent qui rend son véritable exemple

Action

Liste déroulanteUne passerelle Markdown vers le composant partagé de liste déroulante native

Contenu

Aperçu de composantUn exemple vivant encadré d’un composant ou d’un shortcode dans la documentation
Aperçu de gabaritUn aperçu visuel compact de l’anatomie d’un gabarit de page documenté
Aperçu de thèmeUn sélecteur local de thème clair ou sombre pour les exemples de documentation
Arborescence de fichiersUne arborescence de fichiers imbriquée, composée des shortcodes de conteneur, dossier et fichier.
CardUne carte cliquable avec icône et titre.
CardsGrille adaptative pour un ensemble de card.
ChronologieUne chronologie verticale de jalons datés; chaque titre ### est une entrée.
CodeUn bloc de code avec en-tête de nom de fichier et bouton de copie.
DéfinitionUne infobulle de glossaire, résolue depuis data/series/ref/glossary.yml.
DetailsUne section repliable.
EncadrésLes six types d’encadrés du site, écrits en Markdown standard pour que les notes circulent sans retouche entre Bear, GitHub et Hugo
ÉtapesUne séquence verticale numérotée pour la documentation procédurale
État du siteUne passerelle Markdown vers le composant partagé d’état opérationnel lié
InfobulleUne passerelle Markdown vers le composant partagé d’infobulle accessible
MermaidUn diagramme Mermaid rendu à partir d’une définition texte.
PullquoteUne citation mise en exergue.
TabUn panneau dans un groupe tabs.
TabsUn groupe d’onglets; contient des tab.
Vidéo intégréeUne passerelle Markdown vers le composant partagé d’intégration vidéo différée

Données

Accessibility-contractUn contrat d’accessibilité piloté par les données, avec des preuves de contraste dérivées des jetons et des règles système liées.
Brand-changelogUn changelog filtré pour le système de marque, rendu depuis data/brand/changelog.yml.
Colour-paletteDes cartes de couleurs de marque ou Web avec les noms de jetons, les groupes de rôles et les rapports de contraste WCAG générés.
Colour-systemUn explorateur interactif des jetons de couleur publics, des valeurs de thème, des alias et des preuves de contraste déclarées
Content-countUn décompte en ligne tiré des pages Hugo ou des données du site.
Design-processUn cycle piloté par les données qui lie les étapes du processus de conception à leurs preuves et à leur documentation de gouvernance.
Design-system-overviewUn aperçu imprimable et piloté par les données des six parties reliées et du flux de ce système de conception.
EmojiUn émoji recherché par nom dans data/series/ref/emojis.yml.
État d’implémentationUn état d’implémentation documenté et des critères d’acceptation pour une interface spécifiée
Glossary-tableUn tableau de glossaire triable, rendu depuis data/brand/glossary.yml par défaut.
Interface-manifestUn profil piloté par les données de la page de composant ou de shortcode courante.
Interface-migration-matrixUn tableau d’audit généré pour les métadonnées, sources et manifestes des composants.
Missing-indexL’arriéré des pages qui déclarent une liste d’artefacts missing:.
Pattern-manifestUne fiche de preuves pilotée par les données pour la page de motif orienté vers une tâche courante.
Portée documentaireUne ligne de métadonnées compacte entre les règles de gouvernance et les détails d’implémentation
Rangée de filtresUne passerelle Markdown vers le composant partagé de rangée de filtres pour les contrôles qui changent les lignes ou éléments visibles
Shortcode-indexUn tableau généré de tous les shortcodes locaux, de leur rôle et de leur exemple d’utilisation.
Tableau d’analyse WebUn tableau comparatif triable et filtrable d’outils d’analyse Web, rendu depuis data/til/web_analytics.yml
Token-tableUn tableau généré d’une catégorie de jetons, rendu depuis data/brand/tokens.yml.

Utilitaire

ArrowUne flèche ← ou → en ligne, utilisée comme repère d’annotation à côté d’un terme.
KbdUne touche de clavier, pour les raccourcis.
VersionUne étiquette d’ajout, de modification ou d’obsolescence.