Rangée de métadonnées

La rangée de métadonnées est la bande sous le titre d’un article : la date de publication, la date de mise à jour lorsqu’elle diffère, le temps de lecture et, sur les pages de blogue et de TIL, un bouton copier en Markdown, séparés par des barres obliques. Un seul composant regroupe ce que d’autres systèmes de conception séparent en composants « Timestamp » et « Readtime » distincts. Le lien de section au-dessus du titre ne fait pas partie de cette bande; il appartient à la rangée de section de l’en-tête de page.

La rangée ci-dessous est le composant rendu avec les dates de cette page :

Quand l’utiliser#

• Chaque page datée reçoit la même bande dans le même ordre : bouton de copie, date de publication, date de mise à jour, temps de lecture, lien de collection, tags — les éléments s’activent ou se désactivent, ils ne changent jamais d’ordre
• La date de mise à jour apparaît seulement lorsqu’elle diffère de la date de publication; le partial compare les deux, donc une page n’affiche jamais une mention « Mis à jour » redondante
• Les défauts de section font l’essentiel du travail — les pages de blogue reçoivent le bouton de copie et le temps de lecture, les pages TIL le bouton de copie — alors n’utilisez le front matter pageHeader: que lorsqu’une page dévie réellement
• Pas un endroit pour de nouveaux types d’éléments : la bande est assemblée par le partial partagé et les pages ne l’écrivent jamais à la main

Implémentation#

pageHeader:
  showReadingTime: true
  showCopyMarkdown: true
  useLastmod: false

{{/* Chemin normal : défauts de section fusionnés avec le front matter pageHeader: */}}
{{ partial "entry-title-block.html" . }}

{{/* Appel direct quand un gabarit choisit lui-même les éléments */}}
{{ partial "page-header.html" (dict "page" . "showReadingTime" true "showCopyMarkdown" true) }}

<div class="mt-[var(--space-s)] flex flex-wrap items-center gap-x-[var(--space-xs)] gap-y-[var(--space-2xs)]" data-pagefind-ignore>
  <span class="meta">Publié <time datetime="2026-08-16">2026.08.16</time></span>
  <span class="meta" aria-hidden="true">/</span>
  <span class="meta">Mis à jour <time datetime="2026-08-16">2026.08.16</time></span>
  <span class="meta" aria-hidden="true">/</span>
  <span class="meta">4 min de lecture</span>
</div>

La rangée est le gabarit meta dans layouts/partials/page-header.html, piloté par layouts/partials/entry-title-block.html, qui fixe les défauts de section et fusionne les valeurs du front matter pageHeader: avant de déléguer. La rangée n’est rendue que lorsqu’au moins un élément est activé. Les libellés de dates viennent des clés i18n publishedOn et updatedOn, le temps de lecture de readingTime. Il n’y a aucun JavaScript dans la rangée elle-même — le bouton de copie apporte le sien, documenté sur Copier en Markdown — et pas de fichier CSS distinct; les éléments partagent la classe .meta dans assets/css/site.css.

Options#

Accessibilité#

• La rangée est un simple <div> d’éléments <span class="meta"> — du texte affiché, pas un point de repère, et elle n’a besoin d’aucun rôle
• Les dates sont des éléments <time> avec un attribut datetime lisible par machine (2026-08-16) derrière le format maison affiché (2026.08.16), et les libellés suivent la langue par les clés i18n publishedOn et updatedOn
• Le temps de lecture est un simple texte affiché qui n’a besoin d’aucun ARIA; les séparateurs / portent aria-hidden="true", donc les lecteurs d’écran les ignorent
• Clavier : seuls les éléments interactifs reçoivent le focus — le bouton de copie, le lien de collection, les tags; une rangée de dates et de temps de lecture n’a aucun arrêt de tabulation
• Évitez d’écrire la bande à la main dans un gabarit — le aria-hidden des séparateurs et les formats datetime appariés ne restent corrects que par le partial partagé