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 vous retrouvez à répéter le même contenu à plusieurs endroits, créez un extrait personnalisé pour maintenir votre contenu synchronisé.

​
Créer un extrait personnalisé

Condition préalable : 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 tant que page autonome. Si vous souhaitez créer une page autonome à partir de l’extrait, importez l’extrait dans un autre fichier et appelez-le en tant que composant.

​
Export par défaut

  1. Ajoutez du contenu à votre fichier d’extrait que vous souhaitez réutiliser.
snippets/my-snippet.mdx
Bonjour le monde ! Voici mon contenu que je souhaite réutiliser sur plusieurs pages.
  1. Importez le snippet dans votre 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 de fragment :
snippets/path/to/custom-variables.mdx
export const myName = "mon nom";

export const myObject = { fruit: "fraises" };
  1. Importez l’extrait depuis votre fichier de destination 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 en savoir plus) :
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Bonjour, 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 de destination et utilisez le composant :
destination-file.mdx
---
title: Mon titre
description: Ma description
---

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

<MyJSXSnippet />