mintlify__docs/fr/create/reusable-snippets.mdx

---
title: "Extraits réutilisables"
description: "Créez des extraits de contenu réutilisables avec des variables pour maintenir la cohérence entre les pages de documentation et réduire la duplication dans vos fichiers MDX."
keywords: ["extraits de contenu", "contenu réutilisable", "variables"]
---

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 ce contenu. Les extraits contiennent du contenu que vous pouvez importer dans d’autres fichiers pour le réutiliser. Vous contrôlez l’endroit où l’extrait apparaît sur une page. Si vous devez un jour mettre à jour ce contenu, il vous suffit de modifier l’extrait plutôt que chaque fichier où l’extrait est utilisé.

<Note>
  Les snippets ne sont pas pris en charge dans l'éditeur web actuellement. Pour utiliser des snippets, modifiez vos fichiers MDX localement avec la CLI ou poussez les imports de snippets directement dans votre dépôt.
</Note>

<div id="how-snippets-work">
  ## Fonctionnement des snippets
</div>

Les snippets sont des fichiers `.mdx`, `.md` ou `.jsx` importés dans un autre fichier. Vous pouvez placer les fichiers de snippets n'importe où dans votre projet. 

Lorsque vous importez un snippet dans un autre fichier, celui-ci n'apparaît qu'à l'endroit où vous l'importez et n'est pas affiché comme une page autonome. Tout fichier dans le dossier `/snippets/` est toujours un snippet, même s'il n'est pas importé dans un autre fichier.

<div id="create-snippets">
  ## Créer des snippets
</div>

Créez un fichier avec le contenu que vous souhaitez réutiliser. Les snippets peuvent contenir tous les types de contenu pris en charge par Mintlify et peuvent importer d'autres snippets.

<div id="import-snippets-into-pages">
  ## Importer des snippets dans des pages
</div>

Importez des snippets dans des pages en utilisant soit un chemin absolu, soit un chemin relatif.

- **Imports absolus** : commencez par `/` pour importer depuis la racine de votre projet.
- **Imports relatifs** : utilisez `./` ou `../` pour importer des snippets par rapport à l’emplacement du fichier courant.

<Tip>
  Les imports relatifs permettent la navigation dans l’IDE. Appuyez sur <kbd>CMD</kbd> et cliquez sur le nom d’un snippet dans votre éditeur pour accéder directement à la définition de ce snippet.
</Tip>

<div id="import-text">
  ### Importer du texte
</div>

1. Ajoutez à votre fichier de snippet le contenu que vous souhaitez réutiliser.

    ```mdx shared/my-snippet.mdx wrap
    Hello world! This is my content I want to reuse across pages.
    ```

2. Importez l&#39;extrait dans votre fichier de destination à l&#39;aide d&#39;un chemin absolu ou relatif.

    <CodeGroup>

    ```mdx Import absolu
    ---
    title: "Une page d'exemple"
    description: "Ceci est une page d'exemple qui importe un extrait."
    ---

    import MySnippet from "/shared/my-snippet.mdx";

    Le contenu de l'extrait s'affiche sous cette phrase.

    <MySnippet />
    ```

    ```mdx Import relatif
    ---
    title: "Une page d'exemple"
    description: "Ceci est une page d'exemple qui importe un extrait."
    ---

    import MySnippet from "../shared/my-snippet.mdx";

    Le contenu de l'extrait s'affiche sous cette phrase.

    <MySnippet />
    ```

    </CodeGroup>

<div id="import-variables">
  ### Importer des variables
</div>

Faites référence à des variables issues d’un extrait dans une page.

1. Exportez des variables depuis un fichier de fragment.

    ```mdx shared/custom-variables.mdx
    export const myName = "Ronan";

    export const myObject = { fruit: "strawberries" };

    ;
    ```

2. Importez l’extrait depuis votre fichier de destination et utilisez la variable.

    ```mdx destination-file.mdx
    ---
    title: "Une page d'exemple"
    description: "Ceci est une page d'exemple qui importe un fragment avec des variables."
    ---

    import { myName, myObject } from "/shared/custom-variables.mdx";

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

<div id="import-snippets-with-variables">
  ### Importer des extraits avec des variables
</div>

Utilisez des variables pour transmettre des données à un extrait lorsque vous l’importez.

1. Ajoutez des variables à votre extrait et transmettez des propriétés lorsque vous l’importez. Dans cet exemple, la variable est `{word}`.

    ```mdx shared/my-snippet.mdx
    Mon mot-clé du jour est {word}.
    ```

2. Importez l’extrait dans votre fichier de destination en utilisant la variable. La propriété que vous transmettez remplace la variable dans la définition de l’extrait.

    ```mdx destination-file.mdx
    ---
    title: "Une page d'exemple"
    description: "Ceci est une page d'exemple qui importe un extrait avec une variable."
    ---

    import MySnippet from "/shared/my-snippet.mdx";

    <MySnippet word="bananas" />
    ```

Les variables sont également interpolées à l'intérieur des blocs de code délimités. Cela est utile pour les extraits qui incluent des commandes d'installation ou d'autres exemples de code qui diffèrent selon le nom du package, la version ou l'environnement.

````mdx shared/install-snippet.mdx
export const InstallSnippet = ({ packageName }) => <></>;

Installez le package :

```bash
npm install {packageName}
```
````

```mdx destination-file.mdx
import InstallSnippet from "/shared/install-snippet.mdx";

<InstallSnippet packageName="@myorg/sdk" />
```

<div id="import-react-components">
  ### Importer des composants React
</div>

1. Créez un extrait avec un composant JSX. Voir [Composants React](/fr/customize/react-components) pour en savoir plus.

    ```js components/my-jsx-snippet.jsx
    export const MyJSXSnippet = () => {
      return (
        <div>
          <h1>Bonjour, monde !</h1>
        </div>
      );
    };
    ```

<Note>
  Important : lors de la création d&#39;extraits JSX, utilisez la syntaxe de fonction fléchée (`=>`) plutôt que des déclarations de fonction. Le mot‑clé `function` n&#39;est pas pris en charge dans les extraits.
</Note>

2. Importez l&#39;extrait.

    ```mdx destination-file.mdx
    ---
    title: "Une page d'exemple"
    description: "Ceci est une page d'exemple qui importe un extrait avec un composant React."
    ---

    import { MyJSXSnippet } from "/components/my-jsx-snippet.jsx";

    <MyJSXSnippet />
    ```