Articles associés

Les articles associés forment une liste de fin de page des pages étroitement liées, pilotée par la clé de front matter related:. La liste apparaît à la fin d’un billet, d’une note AJA ou d’une page de documentation lorsque la lectrice ou le lecteur peut raisonnablement continuer après la page courante.

Cette page déclare related: dans son propre front matter : le composant se rend donc en direct au bas de cette page, sous le titre « Composants liés » que le gabarit de la documentation lui transmet.

Quand l’utiliser#

• Plusieurs pages forment un groupe, une séquence ou un ensemble de soutien, et la lectrice ou le lecteur peut raisonnablement continuer après la page courante
• La relation n’a pas besoin d’une phrase explicative dans l’introduction. La liste se suffit à elle-même en fin de page.
• Gardez la liste courte et intentionnelle : une page associée doit ajouter du contexte, poursuivre une série ou couvrir une décision voisine
• Pas un nuage de mots-clés, une liste d’archives ou un remplacement des liens intégrés dans le texte
• S’il y a une seule page que la lectrice ou le lecteur devrait connaître avant de lire la page courante, utilisez plutôt le composant de lien compagnon

Implémentation#

related:
  - /docs/site-implementation/components/companion-link/
  - /docs/site-governance/content/cross-references/

{{ partial "related-posts.html" . }}

{{/* Remplacement du titre : le gabarit de la documentation utilise cette forme */}}
{{ partial "related-posts.html" (dict "Page" . "heading" "Composants liés") }}

<aside class="flow-section not-prose border-t border-line pt-[var(--space-s-m)]" aria-labelledby="related-posts-heading">
  <h2 id="related-posts-heading" class="meta m-0">Composants liés</h2>
  <div class="mt-[var(--space-xs)] grid gap-0 border-t border-line">
    <a class="index-row sm:grid-cols-[minmax(0,1fr)_7rem]" href="/fr/docs/site-implementation/components/lien-compagnon/">
      <span class="collection-row-title min-w-0">Lien compagnon</span>
      <time class="meta sm:text-right" datetime="2026-08-11">2026.08.11</time>
    </a>
  </div>
</aside>

Le partial de rendu est layouts/partials/related-posts.html. Les layouts de page unique des billets et des notes AJA l’appellent avec la page et obtiennent le titre localisé « Billets liés »; le gabarit de la documentation l’appelle avec la forme dict pour afficher « Composants liés » sur les pages de composants et « Pages liées » ailleurs. Les chemins sont indépendants de la langue : chaque site de langue les résout dans ses propres pages, de sorte que la même liste peut être copiée dans le front matter des fichiers .en.md et .fr.md. Un chemin qui ne correspond à aucune page produit un avertissement à la compilation et est retiré de la liste au lieu de publier un lien mort.

Options#

Accessibilité#

• La liste se rend comme un <aside> avec aria-labelledby="related-posts-heading" pointant vers son propre <h2> : le point de repère est annoncé sous le titre que l’appelant a transmis
• Chaque entrée est un lien ordinaire.
  • Tab parcourt les entrées et Entrée en suit une.
  • Il n’y a pas de JavaScript.
• Les dates se rendent comme des éléments <time> avec un attribut datetime ISO lisible par machine (YYYY-MM-DD) à côté de la forme affichée YYYY.MM.DD
• Un chemin qui ne correspond à aucune page est retiré avec un avertissement à la compilation, comme décrit sous Implémentation, de sorte que la liste rendue ne porte jamais d’entrée morte
• Évitez de rendre le partial deux fois sur une même page : l’identifiant de titre related-posts-heading est fixe, et un identifiant en double brise l’association aria-labelledby