> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Pages

> Configurer les metadata de la page, les titres et les propriétés de frontmatter.

Chaque page est un fichier Markdown. Les types de fichiers `.mdx` et `.md` sont tous deux pris en charge. Nous recommandons d'utiliser MDX, qui combine Markdown avec des composants React pour créer une documentation riche et interactive. Le Markdown simple (`.md`) est pris en charge pour faciliter la migration depuis d'autres plateformes, mais il doit être mis à jour vers MDX pour bénéficier de toutes les fonctionnalités.

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

Chaque page commence par du frontmatter, 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 le frontmatter pour contrôler :

* Titres et descriptions de page
* Titres, icônes et tags de la barre latérale
* Mises en page des pages
* Balises méta SEO
* Métadonnées personnalisées

<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>

<ResponseField name="<custom>" type="string">
  Tout frontmatter YAML valide. Par exemple, `product: "API"` ou `version: "1.0.0"`.
</ResponseField>

```yaml Example YAML frontmatter wrap theme={null}
---
title: "À propos du frontmatter"
description: "Le frontmatter correspond aux métadonnées qui contrôlent l'apparence et le comportement de votre page"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NOUVEAU"
---
```

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

Contrôlez l’affichage de votre page avec le paramètre `mode`.

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

Si aucun mode n’est défini, une mise en page standard s’applique avec une navigation dans la barre latérale et une table des matières.

```yaml theme={null}
---
title: "Titre de page par défaut"
---
```

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

Le mode large masque la table des matières. C’est utile pour les pages sans titres ou si vous préférez profiter de l’espace horizontal supplémentaire. Le mode large est disponible pour tous les thèmes.

```yaml theme={null}
---
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 tout autre agencement unique nécessitant des éléments de navigation réduits au minimum. Le mode personnalisé est disponible avec tous les thèmes.

```yaml theme={null}
---
title: "Titre de page personnalisé"
mode: "custom"
---
```

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

Le mode Frame propose une mise en page proche du mode personnalisé, tout en conservant la navigation de 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 Frame n’est disponible que pour les thèmes Aspen et Almond.

```yaml theme={null}
---
title: "Titre de la page Frame"
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 le journal des modifications 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 theme={null}
---
title: "Titre de page centré"
mode: "center"
---
```

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

Créez des bacs à sable d’API interactifs en ajoutant une spécification d’API dans votre frontmatter, via `api` ou `openapi`.

```yaml theme={null}
---
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 avec la metadata `url`.

```yaml theme={null}
---
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 meta SEO sont générées automatiquement. Vous pouvez définir manuellement des balises meta SEO pour améliorer le SEO de votre site, le partage sur les réseaux sociaux et la compatibilité des navigateurs.

<Note>
  Les balises meta contenant des deux-points doivent être encadrées de guillemets.
</Note>

```yaml theme={null}
---
"twitter:image": "/images/social-preview.jpg"
---
```

Consultez [SEO](/fr/optimize/seo) pour la liste complète des options de metadata SEO.

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

Améliorez la découvrabilité d’une page spécifique dans la recherche intégrée en ajoutant `keywords` dans vos metadata. 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 saisiront verront la page s’afficher parmi les résultats.

```yaml theme={null}
---
keywords: ['configuration', 'installation', 'premiers pas']
---
```

<div id="last-modified-timestamp">
  ## Horodatage de la dernière modification
</div>

Ajoutez un indicateur "Dernière modification le \[date]" à toutes les pages en activant `metadata.timestamp` dans vos [paramètres globaux](/fr/organize/settings#metadata).

```json docs.json theme={null}
"metadata": {
  "timestamp": true
}
```