Lien compagnon
Un lien compagnon est un petit encadré directionnel qui apparaît près du début d’une page. Utilisez-le lorsque la page courante est une note, une liste de vérification ou une procédure ciblée, et qu’une autre page explique le contexte plus large.
Quand l’utiliser#
- La page courante est une note, une liste de vérification ou une procédure ciblée, et une seule autre page porte l’explication plus large
- Une seule relation principale — le composant répond à ceci : « cette page est utile seule, mais lisez cette autre page si vous avez besoin de l’explication complète »
- Pas pour des recommandations générales, des listes de lecture en fin de page ou des groupes d’articles associés — déclarez-les plutôt dans le front matter
related:
Implémentation#
<aside class="companion-link not-prose" aria-label="Note compagnon">
<span class="companion-link-icon" aria-hidden="true">↩︎</span>
<p class="companion-link-copy">
<span class="meta">Note compagnon —</span>
<a href="/fr/docs/site-governance/content/renvois/">Renvois</a>
explique les trois mécanismes de renvoi.
</p>
</aside>Le shortcode Hugo est layouts/shortcodes/companion.html. Il résout la page cible, affiche son titre et ajoute le libellé localisé du lien compagnon. Un mauvais chemin fait échouer la compilation au lieu de publier un lien mort. Il n’y a pas de JavaScript; les classes CSS du composant dans assets/css/site.css composent le traitement de bordure, de couleur et d’espacement soutenu par les jetons.
Options#
| Option | Rôle |
|---|---|
premier / to | Chemin de contenu de la page cible (requis) |
prefix | Texte placé avant le lien |
label | Remplace le titre de la page cible comme texte du lien |
| contenu interne | La phrase après le lien expliquant pourquoi la lectrice ou le lecteur devrait y aller |
Accent#
Une seule variante d’accent existe : l’accent en ligne — une ligne verticale à gauche (border-l-2 border-line) avec le glyphe ↩︎ en couleur d’accent. Il n’y a pas d’option d’accent en bas.
Manifeste d’interface
- Nature
- Composant
- Catégorie
- Navigation
- Statut
- Implémenté
- Implémentation
- Shortcode:
layouts/shortcodes/companion.htmlCSS:assets/css/site.cssi18n:companionNote
Accessibilité#
- Le composant est un
<aside>avec unaria-labellocalisé (« Note compagnon ») : les lecteurs d’écran l’annoncent comme un point de repère complémentaire nommé - Le glyphe
↩︎est décoratif et portearia-hidden="true"; c’est le libellé visible « Note compagnon », et non le glyphe, qui identifie le composant - Le seul élément interactif est le lien unique : Tab l’atteint, Entrée le suit — il n’y a ni JavaScript ni gestion de touches particulière
- Évitez de placer du contenu interactif autre que le lien unique dans l’
<aside>; le contrat est une seule destination, et des contrôles supplémentaires diluent ce que le point de repère annonce