---
title: "Édition"
description: "Apprenez à rédiger votre documentation."
canonical_url: "https://docus.dev/fr/concepts/edition"
---
# Édition

> Apprenez à rédiger votre documentation.

Docus vous permet d'écrire tout votre contenu en **Markdown** mais offre aussi la possibilité d'intégrer des **composants** grâce à la [syntaxe MDC](https://content.nuxt.com/docs/files/markdown#mdc-syntax) fournie par **Nuxt Content**.

<tip to="https://docus.dev/fr/essentials/components">

Consultez la liste des composants prose Nuxt UI que vous pouvez intégrer dans votre Markdown.

</tip>

## Page d'accueil

La page d'accueil est la première page que vos visiteurs voient à la racine `/` de votre site. Par défaut, Docus utilise le fichier `content/index.md` pour afficher cette page.

### Page d'accueil Markdown (par défaut)

Par défaut, la page d'accueil correspond au fichier `content/index.md`. La syntaxe `MDC` vous offre la possibilité d'utiliser des composants Vue, y compris les slots et les props dans vos fichiers `.md`.

Lorsqu'aucune page d'accueil personnalisée n'existe, Docus automatiquement:

- Crée une collection de contenu `landing` pour `content/index.md`
- Enregistre la route `/` pour afficher votre page d'accueil Markdown

### Page d'accueil Vue personnalisée

Vous pouvez personnaliser votre page d'accueil en créant une page Vue à `app/pages/index.vue` (ou `app/pages/[[lang]]/index.vue` pour les configurations i18n). Cela vous donne un contrôle total avec les composants Vue, des layouts personnalisés et des interactions `js` avancées.

**Lorsque vous créez** `app/pages/index.vue`, Docus :

- Ne créera pas la collection `landing`
- N'enregistrera pas la route d'accueil
- Utilisera votre page Vue personnalisée comme page d'accueil

<note>

Cette détection automatique fonctionne pour les configurations monolingues et multilingues (i18n).

</note>

### Composants

MDC fournit une syntaxe dédiée pour utiliser facilement des composants Vue dans votre contenu :

```mdc [content/index.md]
:::u-page-feature
:::
```

### Slots

Les slots peuvent recevoir du texte ou d'autres composants.

- **Slot par défaut** est rendu directement dans le composant ou avec `#default`.
- **Slots nommés** sont définis en utilisant le symbole `#` suivi du nom du slot.

```mdc [index.md]
:::u-page-feature
  #title
  Nuxt 4
  
  #description
  Propulsé par Nuxt 4 pour des performances et un SEO optimaux.
:::
```

### Props

Les props sont passées en syntaxe inline ou via le frontmatter YAML dans le bloc du composant :

<tabs>
<tabs-item icon="i-lucide-braces" label="Inline">

```mdc [index.md]
:::u-page-feature{icon="i-simple-icons-nuxt" to="https://nuxt.com"}
  #title
  Nuxt 4
  
  #description
  Propulsé par Nuxt 4 pour des performances et un SEO optimaux.
:::
```

</tabs-item>

<tabs-item icon="i-lucide-code" label="YAML">

```mdc [index.md]
:::u-page-feature
  ---
  icon: i-simple-icons-nuxt
  to: https://nuxt.com
  ---
  #title
  Nuxt 4
  
  #description
  Propulsé par Nuxt 4 pour des performances et un SEO optimaux.
:::
```

</tabs-item>
</tabs>

<note to="https://content.nuxt.com">

Consultez la documentation Nuxt Content pour plus de détails sur la syntaxe MDC

</note>

## Pages de documentation

<tip>

Il existe une relation un à un entre les fichiers de contenu et les pages de votre site. Chaque page Markdown dans le dossier `content/` correspond directement à une route de page.

</tip>

### **Sans dossier docs**

Pour commencer, éditez ou ajoutez simplement des fichiers `.md` dans le dossier `content/` pour mettre à jour vos pages. Docus gère automatiquement le routage, la navigation et la recherche plein texte.

```bash
content/
├── index.md              # Page d'accueil → /
├── getting-started.md    # Documentation → /getting-started
└── guide/
    └── introduction.md   # Documentation → /guide/introduction
```

### **Avec dossier docs**

Vous pouvez optionnellement organiser vos fichiers de documentation dans un sous-dossier `docs/`. Lorsque Docus détecte un dossier `docs/` dans votre répertoire `content/`, il préfixe automatiquement toutes les URLs de documentation avec `/docs`.

```bash
content/
├── index.md                  # Page d'accueil → /
└── docs/
    ├── getting-started.md    # Documentation → /docs/getting-started
    └── guide/
        └── introduction.md   # Documentation → /docs/guide/introduction
```

<tip>

Ceci est particulièrement utile lorsque vous souhaitez utiliser Docus comme documentation intégrée aux côtés d'autres pages personnalisées. Vous pouvez créer des pages supplémentaires comme un blog, une page de contact, une page de tarification, ou tout autre contenu personnalisé au niveau racine, tout en gardant votre documentation organisée sous `/docs`.

</tip>

**Exemple avec contenu mixte :**

Puisque Docus est un layer Nuxt, vous pouvez combiner la documentation Markdown avec des pages Vue personnalisées :

```bash
├── app/
│   └── pages/
│       ├── blog.vue          # Page blog personnalisée → /blog
│       └── contact.vue       # Page contact personnalisée → /contact
└── content/
    ├── index.md              # Page d'accueil → /
    └── docs/                 # Documentation → /docs/*
        ├── getting-started.md
        └── api/
            └── reference.md
```

Cette structure vous donne la flexibilité de construire un site web complet avec Docus. Utilisez Markdown pour la documentation et des pages Vue pour les fonctionnalités personnalisées comme les blogs, tableaux de bord, ou toute page interactive.

### Frontmatter

Chaque fichier du dossier `content/` commence par la syntaxe `---` en haut de la page. Cela correspond au frontmatter de votre fichier, une convention des CMS basés sur Markdown pour fournir des métadonnées aux pages.

<tabs>
<tabs-item icon="i-lucide-code" label="Code">

```md [content/getting-started/edition.md]
---
title: 'Édition'
description: 'Apprenez à rédiger votre documentation.'
---

<!-- Contenu de la page en pur Markdown -->
```

</tabs-item>

<tabs-item icon="i-lucide-eye" label="Aperçu">

![Frontmatter titre et description](https://docus.dev/documentation/frontmatter-preview-title-description.png)

</tabs-item>
</tabs>

### Paramètres

Les pages du répertoire `/content` sont définies comme type [page](https://content.nuxt.com/docs/collections/types#page-type) dans Nuxt Content. Elles suivent toutes la même structure avec les clés de frontmatter existantes :

<table>
<thead>
  <tr>
    <th>
      
    </th>
    
    <th>
      
    </th>
    
    <th>
      
    </th>
    
    <th>
      
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Clé
    </td>
    
    <td>
      Type
    </td>
    
    <td>
      Description
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Titre de la page. Affiché en haut de la page. Utilisé comme titre SEO si la clé <code>
        seo
      </code>
      
       n'est pas fournie.
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Description de la page. Affichée sous le titre en haut de la page. Utilisée comme description SEO si la clé <code>
        seo
      </code>
      
       n'est pas fournie.
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        navigation
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Définit si la page est incluse dans la navigation latérale gauche.
    </td>
    
    <td>
      
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        seo
      </code>
    </td>
    
    <td>
      <code>
        { title: string, description: string }
      </code>
    </td>
    
    <td>
      Métadonnées SEO de votre page.
    </td>
    
    <td>
      
    </td>
  </tr>
</tbody>
</table>


## Sitemap

See the full [sitemap](https://docus.dev/sitemap.md) for all pages.