En-tête de page

L’en-tête de page est le bloc de titre standard en haut d’une page : un lien de section, le titre, une rangée de métadonnées (dates, temps de lecture, tags) et une description optionnelle. Il établit la section, le titre, les métadonnées et le contexte principal sans exceptions personnalisées.

L’en-tête ci-dessous est le composant rendu avec le contenu de la page de confidentialité du site de marque :

Quand l’utiliser#

• Chaque type de page reçoit le même bloc — lien de section, titre, rangée de métadonnées, description optionnelle — sans exception personnalisée par page
• Gardez l’alignement, la largeur et les éléments optionnels cohérents entre les types de pages; variez avec les options documentées, jamais avec un nouveau balisage
• Ajustez par page avec le front matter pageHeader: et par gabarit en passant des options au partial

Implémentation#

pageHeader:
  kind: legalEntry
  kindUrl: /legal/
  dateLabel: publishedOn
  showLastmod: true

{{/* Chemin normal : libellé, lien et bascules dérivés de la section */}}
{{ partial "entry-title-block.html" . }}

{{/* Appel direct quand un gabarit contrôle tout lui-même */}}
{{ partial "page-header.html" (dict "page" . "kind" "Mentions légales" "showLastmod" true) }}

<header>
  <div>
    <p class="entry-kind-row" data-pagefind-ignore>
      <a class="entry-kind entry-kind-link" href="/fr/legal/">Mentions légales</a>
    </p>
    <h1 class="article-heading"><span>Confidentialité</span></h1>
    <div class="mt-[var(--space-s)] ..." data-pagefind-ignore>
      <span class="meta">Publié <time datetime="2026-07-11">2026.07.11</time></span>
    </div>
  </div>
</header>

Le partial Hugo est layouts/partials/page-header.html. Les gabarits l’appellent via layouts/partials/entry-title-block.html, qui choisit le libellé et le lien de section selon la section de la page, résout les clés i18n et fusionne le front matter pageHeader: avant de déléguer. Il n’y a ni JavaScript ni fichier CSS distinct; le bloc s’appuie sur les classes partagées (entry-kind-row, article-heading, section-heading, meta) définies dans assets/css/site.css.

Options#

Variantes#

Deux variantes de titre existent. article (le défaut) utilise la classe article-heading et affiche la rangée de métadonnées. Toute autre valeur — entry-title-block.html passe split pour les pages de taxonomie et de terme — utilise section-heading, masque la rangée de métadonnées par défaut et présente la description comme amorce page-intro.

Accessibilité#

• Le bloc est un élément <header> qui contient l’unique <h1> de la page; les variantes changent la classe du titre, jamais son niveau de titre
• Les dates sont des éléments <time> avec un attribut datetime lisible par machine; le temps de lecture est un simple texte affiché qui n’a besoin d’aucun ARIA
• Les séparateurs / entre les métadonnées portent aria-hidden="true", et le lien de l’icône RSS nomme la page par aria-label pendant que son SVG reste aria-hidden="true"
• Clavier : le lien de section, les tags, le lien de collection, le lien RSS et le bouton copier en Markdown reçoivent le focus dans l’ordre de lecture; Tab passe de l’un à l’autre et Entrée les active (le bouton accepte aussi la barre d’espacement)
• Évitez un deuxième en-tête de page ou de rétrograder le titre avec headingClass — une page garde un seul <h1>, et c’est pourquoi la démonstration de cette page le remplace par un <p>