Configurations

Modifiez l’image de marque, l’apparence, la navigation et les fonctionnalités depuis le panneau Configurations de l’éditeur web, en temps réel.

Configurez l’image de marque, l’apparence et les fonctionnalités de votre site de documentation depuis le panneau Configurations de l’éditeur web. Les modifications se synchronisent en temps réel avec les autres éditeurs sur la même branche.

Le panneau est organisé en sections qui correspondent aux propriétés de premier niveau de votre docs.json. Utilisez la table des matières à droite pour naviguer entre les sections.

​

General

Définissez l’identité de votre site et la façon dont il apparaît aux visiteurs.

• Name : Le nom de votre projet. Apparaît dans les onglets du navigateur et les résultats de recherche.
• Description : Bref aperçu du projet. Utilisé pour le SEO et l’AEO.

​

Branding

Téléversez les éléments qui identifient votre site.

• Logo : Le logo de votre marque. Téléversez des fichiers PNG ou JPG. Définissez des versions claire et sombre distinctes et une URL de destination optionnelle. Pour utiliser un logo SVG, ajoutez le fichier à votre dépôt et référencez son chemin dans votre docs.json.
• Favicon : Petite icône affichée dans les onglets du navigateur. Téléversez des fichiers ICO, PNG, GIF ou JPG. Définissez des versions claire et sombre si nécessaire.

​

Styling

Contrôlez l’identité visuelle et la palette de couleurs de votre site.

• Theme : Choisissez un thème pour l’apparence globale de votre site.
• Primary color : La couleur d’accentuation principale utilisée pour les liens, boutons et éléments mis en évidence.
• Light color : Couleur d’accentuation utilisée en mode sombre. L’application dépend du thème.
• Dark color : Couleur d’accentuation utilisée en mode clair. L’application dépend du thème.
• Background color : Couleurs d’arrière-plan personnalisées pour les modes clair et sombre.
• Icon library : Bibliothèque d’icônes utilisée pour toutes les propriétés d’icône. Par défaut : fontawesome.
• Strict appearance : Verrouille le site sur un seul mode d’apparence et masque le sélecteur de thème.
• Default appearance : Indique si votre site se charge en mode system, light ou dark par défaut.
• Background decoration : Applique un style visuel (gradient, grid ou windows) à l’arrière-plan.
• Background image : Image d’arrière-plan optionnelle. Définissez une seule image ou des versions distinctes pour les modes clair et sombre.

​

Typography

Remplacez les polices par défaut par la typographie de votre marque.

• Font family : Toute famille Google Fonts fonctionne directement. Pour une police auto-hébergée, fournissez une URL source et un format (woff ou woff2).
• Weight : Généralement 400 pour la version normale et 700 pour la version grasse. Les polices variables prennent en charge des poids précis comme 550.
• Heading font : Surcharge optionnelle appliquée à tous les en-têtes (h1–h6).
• Body font : Surcharge optionnelle appliquée au corps du texte et au reste de la page.

​

Navbar

Ajoutez des éléments de navigation en haut de votre site.

• Primary button : L’appel à l’action principal dans l’en-tête. Définissez le type, le label et l’URL de destination.
• Navbar links : Liens de navigation supplémentaires dans l’en-tête. Chaque lien comprend un texte et une URL.

​

Footer

Ajoutez des liens et des réseaux sociaux au footer de votre site.

• Social links : Profils sur des plateformes comme GitHub, X, LinkedIn, Discord, YouTube et Slack.
• Footer columns : Activez jusqu’à quatre colonnes avec des titres personnalisés pour organiser les liens du footer.

​

Banner

Affichez une bannière d’annonce en haut de chaque page.

• Content : Le texte de la bannière. Prend en charge le formatage MDX de base : liens, gras et italique. Les composants personnalisés ne sont pas pris en charge.
• Dismissible : Affiche un bouton de fermeture à droite de la bannière.
• Type : Style visuel. info utilise la couleur principale de la marque, warning un arrière-plan ambré, critical un arrière-plan rouge. Par défaut : info.
• Color : Remplace la couleur de fond par un hex personnalisé. Définissez des valeurs distinctes pour les modes clair et sombre.

​

Thumbnail

Personnalisez les vignettes de page et les aperçus pour les réseaux sociaux.

• Background : Image d’arrière-plan personnalisée pour les vignettes.
• Appearance : Rendu des vignettes en mode light ou dark. Si non défini, elles sont générées automatiquement à partir des couleurs du thème.
• Font : Police personnalisée pour le texte des vignettes.

​

Content

Personnalisez l’affichage du contenu sur votre site.

• Code block theme : Suit le mode clair/sombre du site avec system, utilise toujours un thème sombre avec dark, ou choisissez un thème personnalisé Shiki.
• Custom code languages : Enregistrez des langages supplémentaires pour la coloration syntaxique.
• Page eyebrow : Affiche de petits labels au-dessus des titres de page. Choisissez section ou breadcrumbs.
• Timestamps : Affiche la date de la dernière modification sur toutes les pages.
• LaTeX : Charge la feuille de style LaTeX (KaTeX) pour le rendu de la notation mathématique.

​

Context menu

Configurez les actions rapides du menu contextuel de la page.

• Options : Liste déroulante multi-sélection avec des actions comme copy, view, et ouvrir la page dans chatgpt, claude, cursor et autres assistants IA.
• Display : Où afficher les options. header (par défaut) les affiche dans le menu contextuel en haut de la page ; toc les affiche dans la barre latérale de la table des matières.

​

Navigation

Ajustez le comportement de la navigation.

• Drilldown : Naviguer automatiquement vers la première page quand un utilisateur clique sur un groupe de navigation.

​

Search

Personnalisez l’expérience de recherche et de feedback.

• Search placeholder : Texte affiché dans la barre de recherche avant que l’utilisateur ne tape. Par défaut : Search or ask.
• Feedback : Affiche des boutons pouce levé/baissé ou un lien « Suggest edits » sur chaque page.

​

API reference

Documentez les endpoints de votre API.

• OpenAPI specs : Ajoutez des fichiers de spécification OpenAPI pour générer des pages de référence.
• AsyncAPI specs : Ajoutez des fichiers de spécification AsyncAPI pour générer des pages de référence.
• MDX server : Endpoints MDX server personnalisés pour le playground.
• Playground display : Affiche le playground interactif, le playground simple, ou aucun playground.
• Proxy server : Active ou désactive le serveur proxy pour les requêtes API.
• mdx.schema : Indique s’il faut afficher la section schema sur les pages de référence API.

​

Redirects

Utilisez la section Redirects pour ajouter, modifier, rechercher et supprimer des redirections sans modifier manuellement votre docs.json. Pour plus d’informations, consultez Redirections.

Chaque redirection comporte les champs suivants :

• Source : Le chemin de redirection source, comme /old-path. Prend en charge les caractères génériques.
• Destination : Le chemin de destination, comme /new-path. Prend en charge les caractères génériques.
• Status : Code de statut HTTP.
  • 308 : Redirection permanente. Valeur par défaut.
  • 307 : Redirection temporaire.

Pour ajouter une redirection :

1. Cliquez sur Add redirect.
2. Saisissez la source et la destination.
3. Cliquez sur Save.

Pour modifier ou supprimer une redirection existante, survolez la ligne et utilisez l’icône d’édition inline ou la X pour la supprimer.

​

SEO

Configurez les métatags et l’indexation pour les moteurs de recherche.

• Metatags : Balises <meta> personnalisées appliquées à l’ensemble du site. Ajoutez des paires clé-valeur comme og:image ou twitter:card.
• Indexing : Choisissez d’indexer ou non les pages cachées.

​

Analytics

Connectez des plateformes d’analytics pour suivre le comportement des visiteurs. Les fournisseurs pris en charge incluent Amplitude, Mixpanel, Heap, Google Analytics, Google Tag Manager, PostHog, Plausible, Fathom, Segment, Hightouch, Hotjar, LogRocket, Microsoft Clarity, Intercom, Clearbit et d’autres.

Chaque entrée s’affiche comme une ligne inline. Utilisez l’icône X pour supprimer une intégration.

​

404 page

Personnalisez l’expérience lorsqu’un utilisateur arrive sur une page manquante.

• Redirect to home : Lorsqu’activé, les pages manquantes redirigent vers l’accueil. Sinon, une page 404 est affichée et vous pouvez en personnaliser le titre et la description.
• Title : Titre affiché sur la page 404.
• Description : Sous-titre affiché sur la page 404.

​

Variables

Définissez des variables personnalisées réutilisables dans tout votre contenu. Chaque variable est une paire clé-valeur. Utilisez l’icône X pour supprimer une variable.