# Modèles de contenu de documentation (/fr/guides/content-templates)

<!-- agent-signals: reading_time_min: 7 · est_tokens: 2879 · updated: 2026-07-30 -->

Utilisez ces modèles comme point de départ pour créer votre documentation. Personnalisez-les en fonction de votre documentation et de votre public.

1. Copiez le modèle qui correspond à votre type de contenu.
2. Remplacez les espaces réservés et le contenu d'exemple par votre propre contenu.
3. Ajustez les sections si nécessaire.
4. Supprimez les sections qui ne s'appliquent pas.

<Tip>
  Vous ne savez pas quel modèle choisir ? Consultez la page sur les [types de contenu](/fr/guides/content-types) pour savoir quand utiliser chacun d'entre eux.
</Tip>

<div id="how-to-guide-template">
  ## Modèle de guide pratique [#modèle-de-guide-pratique]
</div>

Utilisez des guides pratiques lorsque les utilisateurs doivent accomplir une tâche précise et qu’ils connaissent déjà un minimum votre produit. Les guides pratiques sont orientés vers un objectif et vont droit à la solution.

````mdx title="How-to guide template"
---
title: "[Les titres doivent commencer par un verbe]"
description: "[Effectuer une tâche spécifique] pour [atteindre un résultat]."
---

Commencez par une brève description de ce que ce guide permet aux utilisateurs d'accomplir.

## Prérequis (facultatif)

Listez uniquement ce qui est nécessaire :

- Configuration ou paramétrage requis
- Permissions nécessaires
- Fonctionnalités associées à configurer au préalable

## [Titre orienté action décrivant la tâche]

Fournissez des instructions directes pour atteindre l'objectif.

1. Ouvrez [emplacement] et accédez à [lieu spécifique]
2. Cliquez sur [bouton ou option]
3. Saisissez [informations requises]
4. Cliquez sur [bouton de confirmation]

```language
// Incluez des exemples de code que les utilisateurs peuvent copier et modifier
```

<Tip>
  Incluez des conseils pratiques pour aider les utilisateurs à éviter les erreurs courantes ou à travailler plus efficacement.
</Tip>

## Vérifier le résultat (facultatif)

Si la réussite n'est pas évidente, expliquez comment les utilisateurs peuvent confirmer qu'ils ont terminé la tâche avec succès.

## Dépannage (facultatif)

Traitez les problèmes courants que les utilisateurs pourraient rencontrer :

- **Description du problème** : Solution ou contournement
- **Un autre problème courant** : Comment le résoudre

## Tâches associées

Ajoutez des liens vers des guides pratiques associés ou les prochaines étapes.
````

<div id="tutorial-template">
  ## Modèle de tutoriel [#modèle-de-tutoriel]
</div>

Utilisez les tutoriels lorsque vous souhaitez aider les nouveaux utilisateurs à apprendre en pratiquant. Les tutoriels guident les utilisateurs étape par étape à travers une expérience d'apprentissage complète, avec un résultat clair.

````mdx title="Tutorial template"
---
title: "[Action verb] [specific outcome]"
description: "Learn how to [specific outcome] by [method or approach]."
---

Use an introduction paragraph to explain what users can expect to learn and what they can do after completing this tutorial.

## Prerequisites

List what users need before starting:

- Required knowledge or skills
- Tools, accounts, or permissions
- Time commitment (optional)

## Step 1: [First action]

Provide clear, specific instructions for the first step.

```language
// Inclure des exemples de code si utile
```

Explain what this step accomplishes and why it matters.

## Step 2: [Second action]

Continue with sequential steps that build on previous work.

Point out milestones and progress markers so users know they're on track.

## Step 3: [Third action]

Keep steps focused on concrete actions rather than theory.

Minimize choices that users need to make.

## Next steps

Summarize what users learned and suggest logical next steps:

- Related tutorials to try
- How-to guides for common tasks
- Additional resources for deeper learning
````

<div id="explanation-template">
  ## Modèle d’explication [#modèle-dexplication]
</div>

Utilisez des explications lorsque les utilisateurs ont besoin de comprendre des concepts, des décisions de conception ou le fonctionnement de fonctionnalités complexes. Les explications fournissent du context et approfondissent la compréhension plutôt que de donner des instructions étape par étape.

```mdx title="Explanation template"
---
title: "About [concept or feature]"
description: "Understand [concept] and how it works within [product or context]."
---

Start with a clear statement of what this explanation covers and why understanding it matters.

Define the concept in plain language. Explain what it is, what it does, and why it exists.

Use analogies or comparisons to familiar concepts when helpful.

## How [concept] works

Explain the underlying mechanics, architecture, or process.

<Frame>
  <img src="/path/to/diagram.png" alt="Diagram showing how [concept] works" />
</Frame>

Break down complex ideas into digestible sections.

## Why [design decision or approach]

Provide context about why things work the way they do.

Discuss trade-offs, alternatives that were considered, or constraints that influenced the design.

## Quand utiliser [concept]

Aidez les utilisateurs à comprendre quand ce concept ou cette approche est le plus approprié.

- **Cas d'usage 1** : Quand cette approche est pertinente
- **Cas d'usage 2** : Un autre scénario où c'est le bon choix
- **Non recommandé pour** : Situations où les alternatives sont préférables

## Relationship to other features

Draw connections to related concepts or features in your product.

Explain how this concept fits into the broader system or workflow.

## Common misconceptions

Address misunderstandings or clarify subtle distinctions.

## Further reading

Link to related explanations, tutorials, or reference documentation.
```

<div id="reference-template">
  ## Modèle de référence [#modèle-de-référence]
</div>

Utilisez la documentation de référence lorsque les utilisateurs doivent rechercher des informations précises sur les fonctionnalités de votre produit. Les documents de référence privilégient la précision, la cohérence et la facilité de consultation rapide.

````mdx title="Reference template"
---
title: "Référence [nom de la fonctionnalité ou de l'API]"
description: "Référence complète des propriétés, paramètres et options de [la fonctionnalité ou de l'API]."
---

Provide a one-sentence description of what this feature or API does.

## Properties

<ParamField body="property1" type="string" required>
  Brief description of the property.
</ParamField>

<ParamField body="property2" type="number">
  Brief description with default value if applicable.
</ParamField>

<ParamField body="property3" type="boolean" default="false">
  Brief description.
</ParamField>

## Parameters

<ParamField body="parameterName" type="string">
  Description of what this parameter does and when to use it.

```language
// Example showing typical usage
```
</ParamField>

<ParamField body="anotherParameter" type="object">
  Description of the parameter.

  Available options:

  - `option1`: Description of this option.
  - `option2`: Description of this option.
</ParamField>

## Examples

### Basic example

```language title="Basic usage"
// Minimal example showing common use case
```

### Advanced example

```language title="Advanced configuration"
// Example with multiple options configured
```

## Response

If documenting an API, describe the response structure.

<ResponseField name="field1" type="string" required>
  Description of the response field.
</ResponseField>

<ResponseField name="field2" type="number">
  Description of another response field.
</ResponseField>

Example response:

```json
{
  "field1": "value",
  "field2": 123
}
```

## Related references

Link to related reference documentation.
````

<div id="related-pages">
  ## Pages associées [#pages-associées]
</div>

<CardGroup cols="2">
  <Card title="Types de contenu" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M4 8C6.20914 8 8 6.20914 8 4C8 3.2722 8 2.90829 8.02385 2.80107C8.13266 2.31172 8.28121 2.16103 8.76894 2.0452C8.87582 2.01982 9.08666 2.01679 9.50835 2.01074C10.2571 2 11.084 2 12 2C13.3714 2 14.5433 2 15.5518 2.03606C15.9598 2.05065 16.1639 2.05794 16.2867 2.09469C16.7096 2.22123 16.8563 2.37333 16.9677 2.80046C17 2.92452 17 3.28301 17 4C17 6.20914 18.7909 8 21 8C21.4931 8 21.963 8.34313 21.9759 8.83609C22 9.75428 22 10.8009 22 12C22 12.916 22 13.7429 21.9893 14.4916C21.9832 14.9133 21.9802 15.1242 21.9548 15.2311C21.839 15.7188 21.6883 15.8673 21.1989 15.9762C21.0917 16 20.7278 16 20 16C17.7909 16 16 17.7909 16 20C16 20.7278 16 21.0917 15.9762 21.1989C15.8673 21.6883 15.7188 21.839 15.2311 21.9548C15.1242 21.9802 14.9133 21.9832 14.4917 21.9893C13.7429 22 12.916 22 12 22C11.084 22 10.2571 22 9.50835 21.9893C9.08666 21.9832 8.87582 21.9802 8.76894 21.9548C8.28121 21.839 8.13266 21.6883 8.02385 21.1989C8 21.0917 8 20.7278 8 20C8 17.7909 6.20914 16 4 16C3.27219 16 2.90829 16 2.80106 15.9762C2.31172 15.8673 2.16103 15.7188 2.0452 15.2311C2.01982 15.1242 2.01679 14.9133 2.01074 14.4916C2 13.7429 2 12.916 2 12C2 11.084 2 10.2571 2.01074 9.50835C2.01679 9.08666 2.01982 8.87582 2.0452 8.76894C2.16103 8.28121 2.31172 8.13266 2.80107 8.02385C2.90829 8 3.2722 8 4 8Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/fr/guides/content-types">
    Choisissez le bon type de contenu pour atteindre vos objectifs de documentation.
  </Card>

  <Card title="Style et ton" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M3.49977 18.9853V20.5H5.01449C6.24074 20.5 6.85387 20.5 7.40518 20.2716C7.9565 20.0433 8.39004 19.6097 9.25713 18.7426L19.1211 8.87868C20.0037 7.99612 20.4449 7.55483 20.4937 7.01325C20.5018 6.92372 20.5018 6.83364 20.4937 6.74411C20.4449 6.20253 20.0037 5.76124 19.1211 4.87868C18.2385 3.99612 17.7972 3.55483 17.2557 3.50605C17.1661 3.49798 17.0761 3.49798 16.9865 3.50605C16.4449 3.55483 16.0037 3.99612 15.1211 4.87868L5.25713 14.7426C4.39004 15.6097 3.9565 16.0433 3.72813 16.5946C3.49977 17.1459 3.49977 17.759 3.49977 18.9853Z&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M13.5 6.5L17.5 10.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/fr/guides/style-and-tone">
    Rédigez une documentation efficace avec un style cohérent.
  </Card>

  <Card title="Mettre le texte en forme" icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M15 21.001H9&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-linejoin=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M12 3.00001V21.0008M12 3.00001C13.3874 3.00001 15.1695 3.03055 16.5884 3.17649C17.1885 3.2382 17.4886 3.26906 17.7541 3.37791C18.3066 3.60429 18.7518 4.10063 18.9194 4.67681C19 4.95382 19 5.26992 19 5.90215M12 3.00001C10.6126 3.00001 8.83047 3.03055 7.41161 3.17649C6.8115 3.2382 6.51144 3.26906 6.24586 3.37791C5.69344 3.60429 5.24816 4.10063 5.08057 4.67681C5 4.95382 5 5.26992 5 5.90215&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" href="/fr/create/text">
    Apprenez à mettre le texte en forme et à travailler la présentation du contenu.
  </Card>
</CardGroup>
