Chaque page est un fichier MDX, qui combine du contenu Markdown avec des composants React pour vous permettre de créer une documentation riche et interactive.

​
Métadonnées de page

Chaque page commence par un front matter, les métadonnées YAML délimitées par --- au début d’un fichier. Ces métadonnées définissent l’apparence et le comportement de votre page. Utilisez les métadonnées pour contrôler :
  • Les titres et descriptions de page
  • Les titres, icônes et tags de la barre latérale
​
title
string
required
Le titre de votre page qui apparaît dans la navigation et les onglets du navigateur.
​
description
string
Une brève description du contenu de cette page. Apparaît sous le titre et améliore le référencement (SEO).
​
sidebarTitle
string
Un titre court qui s’affiche dans la navigation de la barre latérale.
​
icon
string
L’icône à afficher.Options :
  • nom de l’icône Font Awesome
  • nom de l’icône Lucide
  • code SVG compatible JSX entre accolades
  • URL d’une icône hébergée en externe
  • chemin vers un fichier d’icône dans votre projet
Pour des icônes SVG personnalisées :
  1. Convertissez votre SVG à l’aide du convertisseur SVGR.
  2. Collez votre code SVG dans le champ de saisie SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Placez le code SVG compatible JSX entre accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width si nécessaire.
​
iconType
string
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options : regular, solid, light, thin, sharp-solid, duotone, brands.
​
tag
string
Un tag qui apparaît à côté du titre de votre page dans la barre latérale.
Example YAML frontmatter
---
title: "About frontmatter"
description: "Frontmatter is the metadata that controls how your page appears and behaves"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---

​
Mode de page

Contrôlez l’affichage de votre page à l’aide du paramètre mode.

​
Par défaut

Si aucun mode n’est défini, une mise en page standard avec une navigation dans la barre latérale et une table des matières est utilisée par défaut. 
---
title: "Titre de page par défaut"
---

​
Large

Le mode large masque la table des matières. Il est utile pour les pages sans titres de section ou si vous préférez profiter de l’espace horizontal supplémentaire. Le mode large est disponible pour tous les thèmes. 
---
title: "Titre de page en mode large"
mode: "wide"
---

​
Personnalisé

Le mode personnalisé offre une mise en page minimaliste qui supprime tous les éléments, à l’exception de la barre de navigation supérieure. C’est une toile vierge pour créer des pages d’accueil ou toute autre mise en page spécifique nécessitant une navigation réduite au minimum. Le mode personnalisé est disponible pour tous les thèmes. 
---
title: "Custom page title"
mode: "custom"
---

​
Frame

Le mode Frame propose une mise en page similaire au mode personnalisé, tout en préservant la navigation de la barre latérale. Ce mode de page permet d’utiliser du HTML et des composants personnalisés tout en conservant l’expérience de navigation par défaut. Le mode Frame est uniquement disponible pour les thèmes Aspen et Almond. 
---
title: "Frame page title"
mode: "frame"
---

​
Centré

Le mode Centré supprime la barre latérale et la table des matières et centre le contenu. Il est utile pour les journaux de modifications (changelogs) ou d’autres pages où vous souhaitez mettre l’accent sur le contenu. Le mode Centré est disponible avec les thèmes Mint et Linden. 
---
title: "Titre de page centré"
mode: "center"
---

​
Pages API

Créez des terrains de jeu API interactifs en ajoutant une spécification d’API dans le frontmatter, via api ou openapi. 
---
openapi: "GET /endpoint"
---
En savoir plus sur la création de documentation API. Créez des liens vers des sites externes directement depuis votre navigation à l’aide de la métadonnée url. 
---
title: "npm Package"
url: "https://www.npmjs.com/package/mint"
---

​
Optimisation pour les moteurs de recherche

La plupart des balises meta SEO sont générées automatiquement. Vous pouvez définir manuellement des balises meta SEO pour améliorer le référencement de votre site, le partage sur les réseaux sociaux et la compatibilité des navigateurs.
Les balises meta contenant des deux-points doivent être entourées de guillemets.
---
"twitter:image": "/images/social-preview.jpg"
---
Consultez SEO pour la liste complète des options de métadonnées SEO.

​
Mots-clés de recherche internes

Améliorez la découvrabilité d’une page spécifique dans la recherche intégrée en ajoutant des keywords à vos métadonnées. Ces mots-clés n’apparaîtront ni dans le contenu de la page ni dans les résultats de recherche, mais les utilisateurs qui les chercheront verront la page dans les résultats. 
---
keywords: ['configuration', 'configuration initiale', 'prise en main']
---