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 Snippet personnalisé pour garder votre contenu synchronisé.

​
Créer un Snippet personnalisé

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

​
Export par défaut

  1. Ajoutez le contenu à votre fichier de Snippet que vous souhaitez réutiliser. Vous pouvez éventuellement ajouter des variables qui pourront être renseignées via des props lors de l’import du Snippet. Dans cet exemple, notre variable est word.
snippets/mon-extrait.mdx
Bonjour le monde ! Voici un contenu que je souhaite réutiliser sur plusieurs pages.
  1. Importez le Snippet dans votre fichier de destination.
fichier-de-destination.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/>

​
Exporter avec des variables

  1. Vous pouvez éventuellement ajouter des variables à renseigner via des props lorsque vous importez le Snippet. Dans cet exemple, notre variable est word.
snippets/mon-extrait.mdx
Mon mot du jour est {word}.
  1. Importez le Snippet dans votre fichier de destination en utilisant la variable. La propriété sera renseignée selon votre spécification.
fichier-de-destination.mdx
---
title: Mon titre
description: Ma description
---

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

## En-tête

Lorem impsum dolor sit amet.

<MySnippet word="bananes" />

​
Variables réutilisables

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

export const myObject = { fruit: 'fraises' };
  1. Importez le Snippet depuis votre fichier de destination et utilisez la variable :
fichier-de-destination.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}.

​
Snippets JSX

  1. Exportez un composant JSX depuis votre fichier de Snippet. (Voir Composants React pour plus d’informations) :
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Bonjour, le monde&nbsp;!</h1>
    </div>
  )
}
Important : lors de la création de Snippets 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 le Snippet dans votre fichier cible et utilisez le composant :
fichier-destination.mdx
---
title: Mon titre
description: Ma description
---

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

<MyJSXSnippet />