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 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é. Les extraits ne sont pas rendus sous forme de pages autonomes. Vous devez les importer dans d’autres fichiers.

​
Configurer les dossiers de snippets

Par défaut, tout fichier dans un dossier nommé snippets est considéré comme un snippet. Vous pouvez configurer des dossiers personnalisés supplémentaires pour y stocker des snippets avec le champ snippets dans votre docs.json. Ajoutez des motifs glob au tableau snippets dans docs.json pour spécifier quels dossiers contiennent des snippets.
docs.json
{
  "snippets": [
    "components/**",
    "shared/reusable/**",
    "shared/common-component.mdx"
  ]
}

​
Créer des snippets

Créez un fichier dans un dossier de snippets 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.

​
Importer des snippets dans des pages

Pour utiliser des snippets, importez-les dans des pages en utilisant soit un chemin absolu, soit un chemin relatif.
  • Imports absolus : commencez par /snippets/ ou par l’emplacement personnalisé de vos snippets pour importer depuis la racine de votre projet.
  • Imports relatifs : utilisez ./ ou ../ pour importer des snippets par rapport à l’emplacement du fichier courant.
Les imports relatifs permettent la navigation dans l’IDE. Appuyez sur CMD et cliquez sur le nom d’un snippet dans votre éditeur pour accéder directement à la définition de ce snippet.

​
Importer du texte

  1. Ajoutez à votre fichier de snippet le contenu que vous souhaitez réutiliser.
snippets/my-snippet.mdx
  Hello world! This is my content I want to reuse across pages.
  1. Importez l’extrait dans votre fichier de destination à l’aide d’un chemin absolu ou relatif.
---
title: "Une page d'exemple"
description: "Ceci est une page d'exemple qui importe un extrait."
---

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

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

<MySnippet/>

​
Importer des variables

Faites référence à des variables issues d’un extrait dans une page.
  1. Exportez des variables depuis un fichier de fragment.
snippets/custom-variables.mdx
  export const myName = "Ronan";

  export const myObject = { fruit: "strawberries" };
  1. Importez l’extrait depuis votre fichier de destination et utilisez la variable.
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 '/snippets/custom-variables.mdx';

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

​
Importer des extraits avec des variables

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}.
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é que vous transmettez remplace la variable dans la définition de l’extrait.
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 '/snippets/my-snippet.mdx';

  <MySnippet word="bananas" />

​
Importer des composants React

  1. Créez un extrait avec un composant JSX. 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 les extraits.
  1. Importez l’extrait.
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 '/snippets/my-jsx-snippet.jsx';

  <MyJSXSnippet />