Passer au contenu principal
L’un des principes fondamentaux du développement logiciel est DRY (Don’t Repeat Yourself), qui s’applique aussi à la documentation. Si vous répétez le même contenu à plusieurs endroits, créez un extrait personnalisé pour garder votre contenu synchronisé.

​
Créer un extrait personnalisé

Prérequis : vous devez créer votre fichier d’extrait dans le répertoire snippets pour que l’import fonctionne. Toute page située dans le répertoire snippets sera traitée comme un extrait et ne sera pas rendue en page autonome. Si vous souhaitez créer une page autonome à partir de l’extrait, importez l’extrait dans un autre fichier et utilisez-le comme composant.

​
Export par défaut

  1. Ajoutez du contenu au fichier d’extrait que vous souhaitez réutiliser. Vous pouvez éventuellement ajouter des variables qui seront renseignées via des props lors de l’import de l’extrait. Dans cet exemple, notre variable est word.
snippets/my-snippet.mdx
Bonjour le monde ! Voici mon contenu que je souhaite réutiliser sur plusieurs pages.
  1. Importez l’extrait dans le fichier de destination.
destination-file.mdx
---
title: Mon titre
description: Ma description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## En-tête

Lorem ipsum dolor sit amet.

<MySnippet/>

​
Exportation avec variables

  1. Vous pouvez, si vous le souhaitez, ajouter des variables qui seront alimentées via des props lors de l’import de l’extrait. Dans cet exemple, notre variable est word.
snippets/my-snippet.mdx
Mon mot-clé du jour est {word}.
  1. Importez l’extrait dans votre fichier de destination en utilisant la variable. La propriété sera renseignée selon votre configuration.
destination-file.mdx
---
title: Mon titre
description: Ma description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## En-tête

Lorem ipsum dolor sit amet.

<MySnippet word="bananas" />

​
Variables réutilisables

  1. Exportez une variable depuis votre fichier d’extrait :
snippets/path/to/custom-variables.mdx
export const myName = 'mon nom';

export const myObject = { fruit: 'fraises' };
  1. Importez l’extrait depuis votre fichier cible et utilisez la variable :
destination-file.mdx
---
title: Mon titre
description: Ma Description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Bonjour, je m'appelle {myName} et j'aime {myObject.fruit}.

​
Extraits JSX

  1. Exportez un composant JSX depuis votre fichier d’extraits. (Voir Composants React pour plus d’informations)
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Bonjour le monde !</h1>
    </div>
  )
}
Important : Lors de la création d’extraits JSX, utilisez la syntaxe de fonction fléchée (=>) plutôt que des déclarations de fonction. Le mot-clé function n’est pas pris en charge dans ce contexte.
  1. Importez l’extrait depuis votre fichier cible et utilisez le composant :
destination-file.mdx
---
title: Mon titre
description: Ma description
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />
⌘I