Extraits réutilisables

Extraits personnalisés et réutilisables pour maintenir le contenu synchronisé

L’un des principes fondamentaux du développement logiciel est le DRY (Don’t Repeat Yourself), qui s’applique également à la documentation. Si vous constatez que 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écondition : Vous devez créer votre fichier d’extrait dans le répertoire snippets pour que l’import fonctionne.

Toute page dans le répertoire snippets sera traitée comme un extrait et ne sera pas rendu 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 utilisez-le comme composant.

​

Export par défaut

1. Ajoutez le contenu à réutiliser dans votre fichier d’extrait. Vous pouvez éventuellement ajouter des variables qui pourront être 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. 

2. 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 pourront être renseigné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}.

2. Importez l’extrait dans votre fichier de destination en passant la variable. La propriété sera renseignée selon vos spécifications.

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 snippet :

snippets/path/to/custom-variables.mdx

export const myName = 'my name';

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

2. 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 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.

2. 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 />