Bannière
Ajoutez une bannière dismissible en haut de votre site de documentation pour afficher des annonces importantes, des notes de version ou des notifications.
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.
contentstringrequiredLe 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.
dismissiblebooleanIndique 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.
typestringLe 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.
colorobjectRemplace 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.
Show Hide propriétés de color
lightstringCouleur hexadécimale utilisée en mode clair. Si seul dark est fourni, il est également utilisé en mode clair.
darkstringCouleur hexadécimale utilisée en mode sombre. Si seul light est fourni, il est également utilisé en mode sombre.
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
}
}Les bannières suivent un ordre de priorité pour déterminer quel contenu afficher :
- Bannière spécifique à une langue : Si la langue actuelle dispose d’une configuration
banner, celle-ci est prioritaire. - Bannière globale : Si aucune bannière spécifique à une langue n’existe, la
bannerglobale est affichée.