Annonce

Une annonce est une bannière pleine largeur au-dessus de l’en-tête qui porte un seul message court et limité dans le temps pour tout le site. Elle est pilotée par les données : sans enregistrement actif dans data/announcements.yml, aucune bannière ne se rend. Le même fichier peut porter des calendriers distincts pour le site principal et le site de marque.

Portée#

Un enregistrement planifié s’applique à un site, plutôt qu’à sa page d’accueil. La mise en page de base partagée rend l’enregistrement actif sur chaque page du site, afin qu’une personne qui arrive directement sur un article ou une référence reçoive le même avis opportun. Placez un enregistrement pour le site principal sous main et un avis propre à la marque sous brand; ne dupliquez pas une annonce dans chaque page.

Exemple#

Quand l’utiliser#

• Un seul message court et limité dans le temps qui compte pour tout le site : un lancement, un événement, une promotion
• En haut de page seulement, au-dessus de l’en-tête — jamais dans le contenu
• Retirez-la quand la nouvelle expire; une bannière permanente est de la navigation, pas une annonce
• Utilisez un page de contenu interne lorsqu’une page publiée porte le détail, ou une url externe lorsque la destination est hors de ces sites; chaque enregistrement accepte exactement une destination

Implémentation#

brand:
  - id: brand-preview
    starts_at: 2026-08-19
    ends_at: 2026-09-02
    message:
      en: "The brand documentation is currently being refined."
      fr: "La documentation de marque est en cours de mise au point."
    link:
      label:
        en: "Read the component documentation"
        fr: "Lire la documentation du composant"
      page: /docs/site-implementation/components/announcement/

<aside class="announcement" aria-label="Annonce" data-announcement-id="brand-preview">
  <div class="announcement-inner">
    <p class="announcement-copy">La documentation de marque est en cours de mise au point.</p>
    <a class="announcement-link" href="/fr/docs/site-implementation/components/annonce/">Lire la documentation du composant</a>
  </div>
</aside>

layouts/partials/announcement.html sélectionne les enregistrements du site courant, en rend un seul lorsque starts_at à ends_at comprend le moment de compilation et fait échouer la compilation si des calendriers se chevauchent. Il résout link.page dans la langue courante; link.url se rend comme lien externe avec rel="noopener noreferrer". scripts/check-announcements.mjs valide les textes bilingues, dates, identifiants uniques, un seul type de destination et calendriers non chevauchants avant la compilation Hugo. Le composant utilise les jetons générés component.announcement.* pour sa surface, sa bordure signal, son lien et son espacement.

Options#

Accessibilité#

• Le lien d’évitement reste le premier élément atteignable au clavier. L’annonce statique le suit, avant l’en-tête, afin que les personnes au clavier puissent toujours contourner immédiatement la navigation répétée.
• La bannière est un <aside> nommé, non une région dynamique ou un role="alert" : son contenu est disponible au chargement initial et ne doit pas interrompre la lecture.
• Le contenu comprend un texte porteur de sens. Il n’y a ni état basé seulement sur une icône, ni état basé seulement sur une couleur.
• Sa destination facultative est un lien ordinaire. Les liens externes ouvrent un nouvel onglet avec la relation appropriée; les liens internes restent dans le même onglet.
• La validation et le partial assurent qu’un seul enregistrement peut être actif pour un site. Des bannières empilées multiplieraient le contenu répété que chaque personne doit traverser.