Passer au contenu principal
Configurez l’identité de marque, l’apparence et les fonctionnalités de votre site depuis le panneau Site configurations de l’éditeur web. Les modifications de configuration se synchronisent en temps réel avec les autres éditeurs sur la même branche, afin que votre équipe voie toujours les derniers paramètres. Pour ouvrir le panneau, cliquez sur l’icône de configurations dans la barre d’outils de l’éditeur.
Menu Configurations dans l'éditeur.
Le panneau est organisé en sections qui correspondent aux propriétés de premier niveau de votre docs.json.

​
Général

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 : Brève présentation de votre projet. Utilisée 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 distinctes pour les modes clair et sombre, ainsi qu’une URL de redirection facultative. Pour utiliser un logo SVG, ajoutez le fichier à votre référentiel et référencez son chemin dans votre docs.json.
  • Favicon : Petite icône qui apparaît dans les onglets du navigateur. Téléversez des fichiers ICO, PNG, GIF ou JPG. Définissez des versions distinctes pour les modes clair et sombre si nécessaire.

​
Apparence

Contrôlez l’identité visuelle et la palette de couleurs de votre site.
  • Theme : Choisissez un thème pour l’apparence générale de votre site.
  • Primary color : La couleur d’accent principale utilisée sur l’ensemble de votre site pour les liens, les boutons et les mises en valeur.
  • Light color : Couleur d’accent utilisée en mode sombre. Son application varie selon le thème.
  • Dark color : Couleur d’accent utilisée en mode clair. Son application varie selon le 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 bouton de bascule de thème.
  • Default appearance : Définit si votre site se charge par défaut en mode system, light ou dark.
  • Background decoration : Applique un style visuel (gradient, grid ou windows) à votre arrière-plan.
  • Background image : Image d’arrière-plan facultative. Définissez une image unique ou des versions distinctes pour les modes clair et sombre.

​
Typographie

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 le texte normal et 700 pour le gras. Les polices variables prennent en charge des graisses précises comme 550.
  • Heading font : Surcharge facultative appliquée à tous les titres (h1 à h6).
  • Body font : Surcharge facultative appliquée au corps de texte et au reste de la page.
Ajoutez des éléments de navigation en haut de votre site.
  • Primary button : L’appel à l’action principal dans votre en-tête. Définissez le type, le label et l’URL de destination.
  • Navbar links : Liens de navigation supplémentaires dans votre en-tête. Chaque lien comporte un texte et une URL.
Ajoutez des liens et des comptes de réseaux sociaux au pied de page de votre site.
  • Social links : Profils sur des plateformes comme GitHub, X, LinkedIn, Discord, YouTube et Slack.
  • Footer columns : Activez pour organiser les liens du pied de page en jusqu’à quatre colonnes avec des titres personnalisés.
Affichez une barre d’annonce en haut de chaque page.
  • Content : Le texte de la bannière. Prend en charge la mise en forme MDX de base, comme les liens, le gras et l’italique. Les composants personnalisés ne sont pas pris en charge.
  • dismissible : Affiche un bouton de fermeture sur le côté droit de la bannière.
  • Type : Style visuel. info utilise la couleur de marque principale, warning utilise un arrière-plan ambré et critical utilise un arrière-plan rouge. Par défaut : info.
  • Color : Remplace la couleur d’arrière-plan de la bannière par une couleur hexadécimale personnalisée. Définissez des valeurs distinctes pour les modes clair et sombre pour des couleurs adaptées au thème.

​
Vignette

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 : Affiche les vignettes en mode light ou dark. Si non défini, les vignettes sont générées automatiquement à partir des couleurs de votre thème.
  • Font : Police personnalisée pour le texte des vignettes.

​
Contenu

Personnalisez la façon dont le contenu apparaît sur votre site.
  • Page eyebrow : Affiche de petits labels au-dessus des titres de page. Choisissez section ou breadcrumbs.
  • Timestamps : Affiche la date de dernière modification du contenu sur toutes les pages.
  • LaTeX : Charge les feuilles de style LaTeX (KaTeX) pour le rendu des notations mathématiques.

​
Blocs de code

Configurez la coloration syntaxique et le comportement des blocs de code.
  • Code block theme : Adaptez au mode clair/sombre du site avec system, utilisez toujours un thème sombre avec dark, ou choisissez un thème Shiki personnalisé.
  • Custom code languages : Enregistrez des langages de coloration syntaxique supplémentaires.
Configurez les actions rapides présentées dans le menu contextuel de la page.
  • Options : Liste déroulante à sélection multiple d’actions comme copy, view et l’ouverture de la page dans chatgpt, claude, cursor et d’autres assistants IA.
  • Display : Où afficher les options. header (par défaut) les affiche dans le menu contextuel en haut de page ; toc les affiche dans la barre latérale de la table des matières.
Ajustez le comportement de la navigation sur votre site.
  • drilldown : Navigue automatiquement vers la première page lorsqu’un utilisateur clique sur un groupe de navigation.
Personnalisez l’expérience de recherche et les retours utilisateur.
  • Search placeholder : Le texte qui apparaît dans le champ de recherche avant que les utilisateurs ne tapent. La valeur par défaut est Search or ask.
  • Feedback : Affiche les boutons pouce vers le haut et pouce vers le bas, ou un lien « Suggest edits » sur chaque page.

​
Référence d’API

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 d’API.
  • AsyncAPI specs : Ajoutez des fichiers de spécification AsyncAPI pour générer des pages de référence d’API.
  • MDX server : Endpoints MDX server personnalisés pour le bac à sable d’API.
  • Playground display : Affichez le bac à sable d’API interactif, le bac à sable d’API simple ou aucun bac à sable d’API.
  • Proxy server : Activez ou désactivez le serveur proxy pour les requêtes d’API.
  • mdx.schema : Détermine si la section de schéma s’affiche sur les pages de référence d’API.

​
Redirections

Utilisez la section Redirects pour ajouter, modifier, rechercher et supprimer des redirections sans modifier manuellement votre fichier docs.json. Les redirections envoient les utilisateurs d’anciennes URL vers de nouvelles, ce qui est utile lorsque vous renommez des pages ou réorganisez votre site. Pour plus d’informations, consultez Redirections. Chaque redirection comporte les champs suivants :
  • Source : Le chemin à rediriger, 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 : Le code d’état HTTP de la redirection.
    • 308 : Redirection permanente. À utiliser pour le contenu qui a été déplacé définitivement. C’est le statut par défaut.
    • 307 : Redirection temporaire. À utiliser lorsque le déplacement est temporaire.
Menu des redirections dans l'éditeur.
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 le X pour la supprimer.

​
SEO

Configurez les balises méta et l’indexation pour les moteurs de recherche.
  • metatags : Balises <meta> personnalisées appliquées à l’ensemble de votre site. Ajoutez des paires clé-valeur pour des balises comme og:image ou twitter:card.
  • Indexing : Choisissez d’indexer ou non les pages masqué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 plus encore. Chaque entrée s’affiche sous forme de ligne inline. Utilisez l’icône X pour supprimer une intégration.

​
Page 404

Personnalisez l’expérience lorsqu’un utilisateur arrive sur une page manquante.
  • Redirect to home : Lorsqu’activé, les pages manquantes redirigent vers votre page d’accueil. Lorsque désactivé, une page 404 s’affiche et vous pouvez personnaliser le titre et la description ci-dessous.
  • 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.

Sujets connexes

Vérifications CIConfiguration de l'authentificationConfiguration d’un monorepo