Extraits de contenu

Les snippets sont des blocs de contenu réutilisables stockés dans un répertoire /snippets. Importez-les dans n'importe quelle page MDX pour éviter de dupliquer le contenu.

Créer des snippets

Créez un répertoire /snippets à la racine de votre documentation :

my-docs/
├── docs.json
├── introduction.mdx
└── snippets/
    ├── prerequisites.mdx
    ├── installation.mdx
    └── support-cta.mdx

Rédigez le contenu des snippets comme n'importe quel fichier MDX, mais sans frontmatter :

Before you begin, make sure you have:

- Node.js 20 or higher
- A GitHub account
- A text editor (VS Code recommended)

Utiliser des snippets

Importez et utilisez des snippets dans vos pages :

---
title: Getting Started
---

## Prerequisites


<Prerequisites />

## Installation

Continue with your page content...

Composants de snippet

Les snippets peuvent contenir des composants Jamdesk :

<Columns cols={2}>
  <Card title="Documentation" icon="book" href="/docs">

    Browse our guides

</Card>
  <Card title="Contact Support" icon="headset" href="/support">

    Get help from our team

</Card>
</Columns>

Utilisez-les sur plusieurs pages :

## Need Help?

<SupportCTA />

Snippets interactifs

Pour les snippets nécessitant des hooks React (useState, useEffect, etc.), utilisez des fichiers .tsx avec la directive 'use client' :

'use client';

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Importez dans MDX :

<Counter />

Snippets paramétrés

Passez des props pour rendre les snippets dynamiques :

export const ApiKeyWarning = ({ service }) => (
  <Warning>

    Never commit your {service} API key to version control. Use environment variables instead.

</Warning>
);

Utilisez avec des props :

<ApiKeyWarning service="Stripe" />

Organiser les snippets

Pour les projets plus importants, organisez les snippets en sous-répertoires :

snippets/
├── components/
│   ├── cta-cards.mdx
│   └── feature-table.mdx
├── warnings/
│   ├── api-key.mdx
│   └── deprecation.mdx
└── shared/
    ├── prerequisites.mdx
    └── support-links.mdx

Importez avec le chemin complet :

Cas d'usage courants

Snippet vs composant inline

Utilisez les snippets pour le contenu apparaissant sur plusieurs pages. Utilisez les composants inline pour des composants de présentation ponctuels au sein d'une seule page.

Prochaines étapes