Pied de page

2026.08.18 Mise en page

Le pied de page est la bande unique au bas de chaque page : la mention de droit d’auteur, une courte rangée de liens d’information et les icônes GitHub et LinkedIn. Les liens viennent de données partagées, avec des exclusions propres à chaque site pour les petites différences.

Le pied de page de cette page est le composant en direct. Le site de marque utilise le même pied de page que le site principal, sauf qu’il exclut le lien Colophon.

Quand l’utiliser#

Chaque page, automatiquement : layouts/_default/baseof.html affiche le partial une seule fois et les pages n’ajoutent jamais le leur
Liens d’information seulement : mentions légales, plan du site, colophon; le pied de page est une bande d’information de production, pas une deuxième navigation
Utilisez data/footer.yml comme propriétaire partagé des liens et des profils sociaux
Utilisez params.footer.excludeLinks pour les omissions propres à un site, comme l’absence de Colophon sur le site de marque

Implémentation#

{{ partial "footer.html" . }}

params:
  footer:
    excludeLinks:
      - colophon

<footer class="footer-shell">
  <div class="footer-inner">
    <span class="footer-copyright">© Benoît H. Dicaire 1989–2026</span>
    <nav class="footer-nav" aria-label="Informations du site">
      <a class="footer-link" href="/fr/legal/">Mentions légales</a>
      <a class="footer-link" href="/fr/sitemap/">Plan du site</a>
    </nav>
    <nav class="footer-social" aria-label="Profils sociaux">
      <a class="footer-social-link" href="https://github.com/bhdicaire" aria-label="GitHub" rel="me">
        <svg viewBox="0 0 24 24" aria-hidden="true">…</svg>
      </a>
    </nav>
  </div>
</footer>

Le partial Hugo est layouts/partials/footer.html, appelé une seule fois par layouts/_default/baseof.html. Il lit la liste de liens dans .Site.Params.footer.links et se replie sur la liste partagée hugo.Data.footer.links de data/footer.yml; chaque entrée résout son libellé et son URL selon la langue de la page, avec la clé key comme repli du libellé et l’URL anglaise comme repli de l’URL. Le partial filtre toute clé listée dans params.footer.excludeLinks, puis affiche les profils sociaux partagés de data/footer.yml sauf si params.footer.showSocial est à false. Il n’y a ni JavaScript ni fichier CSS distinct; le style vient des règles .footer-* dans assets/css/site.css.

Options#

Option	Rôle
`params.footer.links`	Liste de liens propre au site; chaque entrée porte une clé `key` plus `label` et `url` par langue
`params.footer.excludeLinks`	Liste propre au site des clés de liens partagés à omettre, comme `colophon` sur le site de marque
`params.footer.showSocial`	Désactive la rangée d’icônes sociales; activée par défaut
`data/footer.yml`	Repli partagé — la liste de liens par défaut et les profils `social` dont la rangée d’icônes se nourrit

Manifeste d’interface

Nature: Composant
Catégorie: Mise en page
Statut: Implémenté
Implémentation: Partial:layouts/partials/footer.htmlDonnées:data/footer.ymlCSS:assets/css/site.cssi18n:footerSiteInformationfooterSocialProfilesConfiguration:config/brand/hugo.yml

Accessibilité#

Le composant est un <footer> natif au premier niveau de la page; les technologies d’assistance l’exposent comme point de repère contentinfo
Les liens d’information et les icônes sociales occupent deux points de repère <nav> distincts, localisés par les clés i18n footerSiteInformation et footerSocialProfiles
Chaque lien social en icône seule porte un aria-label (« GitHub », « LinkedIn ») plus rel="me", et son SVG est aria-hidden="true"; au clavier, Tab parcourt tous les liens du pied de page et Entrée en suit un
Évitez d’ajouter un lien en icône seule sans aria-label — le SVG est masqué aux technologies d’assistance, alors le lien n’aurait aucun nom accessible