Personnalisation
Docus est construit sur Nuxt 4 qui offre un système de couches de composants flexible permettant de surcharger certaines parties de l'UI en redéfinissant des composants spécifiques dans votre propre application. Cela facilite la personnalisation complète de l'apparence visuelle et du comportement de votre documentation sans toucher au thème principal.
Pour surcharger un composant, créez simplement un fichier Vue du même nom dans le dossier components/. Docus utilisera automatiquement votre version à la place de celle par défaut.
En-tête de l'application
Vous pouvez personnaliser différentes parties du header en surchargant les composants suivants :
AppHeaderLogo
Pour remplacer le logo par défaut dans l'en-tête, créez le fichier components/AppHeaderLogo.vue. Votre composant remplacera celui fourni par le thème Docus.
AppHeaderCTA
Pour personnaliser la zone d'appel à l'action dans l'en-tête (par exemple, ajouter un bouton « Commencer » ou un lien externe), surchargez le composant components/AppHeaderCTA.vue.
AppHeaderCenter
Pour personnaliser la zone centrale du header, surchargez le composant components/AppHeaderCenter.vue. Votre composant remplacera la barre de recherche fournie par le thème Docus.
AppHeaderBody
Par défaut, lorsque vous ouvrez le menu en vue mobile, Docus affiche l'arborescence de votre dossier content/ comme menu avec le composant ContentNavigation. Vous pouvez surcharger ce menu avec le composant components/AppHeaderBody.vue et remplir le corps du menu (sous l'en-tête) en mobile.
Footer
Vous pouvez personnaliser différentes parties du footer en surchargant les composants suivants :
AppFooterLeft
Pour remplacer le côté gauche du footer, créez le fichier components/AppFooterLeft.vue. Votre composant remplacera celui par défaut fourni par le thème Docus.
AppFooterRight
Pour personnaliser le côté droit du footer, surchargez le composant components/AppFooterRight.vue.
Docs
Vous pouvez aussi personnaliser l'en-tête et les deux asides des pages de documentation.
DocsPageHeaderLinks
Dans la partie droite du header de votre page de documentation, le comportement par défaut de Docus est d'afficher un menu déroulant avec des actions rapides liées à la source Markdown de la page courante. Cela permet au lecteur de :
- Copier un lien direct vers le fichier
.mdbrut dans le presse-papiers. - Voir la source Markdown dans un nouvel onglet du navigateur.
- Ouvrir le contenu de la page dans ChatGPT ou Claude, pré-rempli avec une invite pour analyser le fichier Markdown.
Ces actions sont particulièrement utiles pour les contributeurs, lecteurs ou workflows assistés par IA, mais vous pouvez créer votre propre composant components/DocsPageHeaderLinks.vue pour le surcharger.
DocsAsideRightBottom
Pour personnaliser la partie basse de l'aside droit des pages de documentation, créez le composant components/DocsAsideRightBottom.vue. Votre composant remplacera la table des matières basse fournie par le thème Docus.
DocsAsideLeftTop
Pour personnaliser la partie haute de l'aside gauche des pages de documentation, créez le composant components/DocsAsideLeftTop.vue.
