Aller au contenu principal

Extraits réutilisables

One of the core principles of software development is DRY (Don't Repeat Yourself). This is a principle that applies to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.

Créer un extrait personnalisé​

Prérequis : Vous devez créer votre fichier d'extrait dans le répertoire snippets.

Information

Toute page 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 à plusieurs endroits. Optionnellement, vous pouvez ajouter des variables qui peuvent être remplies via les props lorsque vous importez l'extrait.
Bonjour ! Ceci est mon contenu que je souhaite réutiliser entre les pages. Mon mot
clé du jour est {word}.
attention

Le contenu que vous souhaitez réutiliser doit se trouver dans le répertoire snippets pour que l'import fonctionne.

  1. Importez l'extrait dans votre fichier de destination.
title: Mon titre
description: Ma Description

import MonExtrait from '/snippets/chemin/vers/mon-extrait.mdx';

## En-tête

Lorem ipsum dolor sit amet.

<MonExtrait word="bananes" />

Variables réutilisables​

  1. Exportez une variable depuis votre fichier d'extrait :
export const monNom = 'mon nom';

export const monObjet = { fruit: 'fraises' };
  1. Importez l'extrait depuis votre fichier de destination et utilisez la variable :
title: Mon titre
description: Ma Description

import { monNom, monObjet } from '/snippets/chemin/vers/variables-personnalisees.mdx';

Bonjour, je m'appelle {monNom} et j'aime les {monObjet.fruit}.

Composants réutilisables​

  1. À l'intérieur de votre fichier d'extrait, créez un composant qui prend des props en exportant votre composant sous la forme d'une fonction fléchée.
export const MonComposant = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... contenu de l'extrait ...</p>
  </div>
);
attention

MDX ne compile pas à l'intérieur du corps d'une fonction fléchée. Utilisez la syntaxe HTML lorsque c'est possible ou utilisez un export par défaut si vous avez besoin d'utiliser MDX.

  1. Importez l'extrait dans votre fichier de destination et passez les props
title: Mon titre
description: Ma Description

import { MonComposant } from '/snippets/composant-personnalise.mdx';

Lorem ipsum dolor sit amet.

<MonComposant title={'Titre personnalisé'} />