Passer au contenu principal
Utilisez des bannières pour afficher des annonces, des mises à jour ou des notifications importantes sur l’ensemble de votre site de documentation. Les bannières apparaissent en haut de chaque page, prennent en charge la mise en forme Markdown, et vous pouvez permettre aux utilisateurs de les masquer. Par défaut, les bannières utilisent la couleur définie par la propriété colors.dark dans votre docs.json. Vous pouvez modifier l’apparence avec la propriété type ou remplacer entièrement l’arrière-plan avec color. Pour ajouter une bannière, utilisez la propriété banner dans votre docs.json : 
"banner": {
  "content": "🚀 La version 2.0 est disponible ! Consultez notre [journal des modifications](/changelog) pour plus de détails.",
  "dismissible": true
}
Vous pouvez également configurer des bannières par langue en définissant banner dans navigation.languages. Consultez Bannières propres à chaque langue.

​
Propriétés

​
content
string
requis
Le contenu textuel affiché dans la bannière. Prend en charge le formatage MDX de base, y compris les liens, le gras et l’italique. Les composants personnalisés ne sont pas pris en charge.
​
dismissible
boolean
Indique si les utilisateurs peuvent fermer la bannière. Lorsque true, un bouton de fermeture apparaît. Si un utilisateur ferme la bannière, elle reste masquée pour lui jusqu’à ce que vous mettiez à jour le contenu de la bannière. Valeur par défaut : false.
​
type
string
Le style visuel de la bannière. Contrôle la couleur d’arrière-plan afin que les visiteurs puissent reconnaître rapidement l’urgence du message. Valeur par défaut : info.
  • info : Utilise la couleur principale de la marque. Idéal pour les annonces de produits et les mises à jour générales.
  • warning : Utilise un arrière-plan ambre. Idéal pour les avis de précaution, comme une maintenance planifiée ou des dépréciations à venir.
  • critical : Utilise un arrière-plan rouge. Idéal pour les avis urgents nécessitant une attention immédiate, comme des pannes ou des actions requises.
​
color
object
Remplace la couleur d’arrière-plan de la bannière par une valeur hexadécimale personnalisée. Lorsque cette propriété est définie, elle a la priorité sur la couleur impliquée par type. Le texte de la bannière est blanc, alors choisissez un arrière-plan suffisamment foncé pour qu’il reste lisible.

​
Bannières spécifiques à chaque langue

Configurez un contenu de bannière différent pour chaque langue de votre documentation. Définissez ces bannières spécifiques à chaque langue dans le tableau navigation.languages de votre fichier docs.json. 
{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "banner": {
          "content": "🚀 La version 2.0 est en ligne ! Consultez notre [journal des modifications](/en/changelog) pour plus de détails.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["en/overview", "en/quickstart"]
          }
        ]
      },
      {
        "language": "es",
        "banner": {
          "content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog) para más detalles.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Premiers pas",
            "pages": ["es/overview", "es/quickstart"]
          }
        ]
      }
    ]
  },
  "banner": {
    "content": "🚀 La version 2.0 est en ligne !",
    "dismissible": true
  }
}

​
Comportement de repli

Les bannières suivent un ordre de priorité pour déterminer quel contenu afficher :
  1. Bannière spécifique à une langue : Si la langue actuelle dispose d’une configuration banner, celle-ci est prioritaire.
  2. Bannière globale : Si aucune bannière spécifique à une langue n’existe, la banner globale est affichée.

Sujets connexes

AperçuIntégrations de confidentialitéStructure du site