> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Pages

> Les pages sont les briques de base de votre documentation

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.

<div id="page-metadata">
  ## Métadonnées de page
</div>

Chaque page commence par un frontmatter, des métadonnées YAML délimitées par `---` au début du fichier. Ces métadonnées déterminent l’apparence et le comportement de votre page.

Utilisez les métadonnées pour contrôler :

* Les titres et descriptions des pages
* Les titres, icônes et tags de la barre latérale

<ResponseField name="title" type="string" required>
  Le titre de votre page qui apparaît dans la navigation et les onglets du navigateur.
</ResponseField>

<ResponseField name="description" type="string">
  Une brève description du contenu de cette page. Apparaît sous le titre et améliore le SEO.
</ResponseField>

<ResponseField name="sidebarTitle" type="string">
  Un titre court affiché dans la navigation de la barre latérale.
</ResponseField>

<ResponseField name="icon" type="string">
  L’icône à afficher.

  Options :

  * Nom de l’icône [Font Awesome](https://fontawesome.com/icons)
  * Nom de l’icône [Lucide](https://lucide.dev/icons)
  * URL d’une icône hébergée en externe
  * Chemin vers un fichier d’icône dans votre projet
</ResponseField>

<ResponseField name="iconType" type="string">
  Le style d’icône [Font Awesome](https://fontawesome.com/icons). Utilisé uniquement avec les icônes Font Awesome.

  Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="tag" type="string">
  Un tag qui apparaît à côté du titre de votre page dans la barre latérale.
</ResponseField>

```yaml Exemple d’enveloppe de frontmatter YAML
---
title: "À propos du frontmatter"
description: "Le frontmatter est l’ensemble de métadonnées qui détermine l’apparence et le comportement de votre page"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NOUVEAU"
---
```

<div id="page-mode">
  ## Mode de page
</div>

Déterminez l’affichage de votre page avec le paramètre `mode`.

<div id="default">
  ### Par défaut
</div>

Si aucun mode n’est défini, la mise en page par défaut est un agencement standard avec une navigation latérale et une table des matières.

```yaml
---
title: "Titre de page par défaut"
---
```

<div id="wide">
  ### Large
</div>

Le mode large masque la table des matières. Il est utile pour les pages sans titres ou si vous préférez bénéficier d’un espace horizontal supplémentaire. Le mode large est disponible pour tous les thèmes.

```yaml
---
title: "Titre de page large"
mode: "wide"
---
```

<div id="custom">
  ### Personnalisé
</div>

Le mode Personnalisé propose 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 minimale. Le mode Personnalisé est disponible pour tous les thèmes.

```yaml
---
title: "Titre de page personnalisé"
mode: "custom"
---
```

<div id="frame">
  ### Cadre
</div>

Le mode Cadre propose une mise en page semblable au mode personnalisé, tout en conservant la navigation dans la barre latérale. Ce mode de page permet d’utiliser du HTML et des composants personnalisés tout en préservant l’expérience de navigation par défaut. Le mode Cadre est uniquement disponible avec les thèmes Aspen et Almond.

```yaml
---
title: "Titre de la page en iframe"
mode: "frame"
---
```

<div id="center">
  ### Centré
</div>

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

```yaml
---
title: "Centrer le titre de la page"
mode: "center"
---
```

<div id="api-pages">
  ## Pages d’API
</div>

Créez des terrains de jeu API interactifs en ajoutant une spécification d’API dans votre frontmatter, `api` ou `openapi`.

```yaml
---
openapi: "GET /endpoint"
---
```

En savoir plus sur la création de [documentation d’API](/fr/api-playground/overview).

<div id="external-links">
  ## Liens externes
</div>

Liez des sites externes directement depuis votre navigation à l’aide de la métadonnée `url`.

```yaml
---
title: "Package npm"
url: "https://www.npmjs.com/package/mint"
---
```

<div id="search-engine-optimization">
  ## Optimisation pour les moteurs de recherche
</div>

La plupart des balises méta SEO sont générées automatiquement. Vous pouvez définir manuellement des balises méta pour améliorer le référencement de votre site, le partage sur les réseaux sociaux et la compatibilité des navigateurs.

<Note>
  Les balises méta contenant des deux-points doivent être placées entre guillemets.
</Note>

```yaml
---
"twitter:image": "/images/social-preview.jpg"
---
```

Consultez [SEO](/fr/settings/seo) pour connaître toutes les options de métadonnées SEO.

<div id="internal-search-keywords">
  ## Mots-clés de recherche internes
</div>

Améliorez la visibilité 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 si un utilisateur les saisit, la page sera proposée en résultat.

```yaml
---
keywords: ['configuration', 'installation', 'démarrage']
---
```