Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 9 additions & 11 deletions src/content/docs/fr/guides/integrations-guide/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ MDX permet d'utiliser les instructions `export` pour ajouter des variables à vo

Par exemple, vous pouvez exporter un champ `title` d'une page ou d'un composant MDX pour l'utiliser comme titre avec des `{expressions JSX}` :

```mdx title="/src/pages/posts/post-1.mdx"
```mdx title="/src/blog/posts/post-1.mdx"
export const title = 'Mon tout premier post MDX';

# {title}
Expand Down Expand Up @@ -132,13 +132,15 @@ Les propriétés suivantes sont disponibles pour un composant `.astro` lorsqu'il

L'intégration MDX d'Astro inclut la prise en charge de l'utilisation de frontmatter dans MDX par défaut. Ajoutez des propriétés frontmatter comme vous le feriez dans des fichiers Markdown, et ces variables pourront être utilisées aussi bien dans le modèle qu'en tant que propriétés nommées lorsque vous importez le fichier ailleurs.

```mdx title="/src/pages/posts/post-1.mdx"
```mdx title="/src/blog/posts/post-1.mdx"
---
layout: '../../layouts/BlogPostLayout.astro'
title: 'Mon premier post MDX'
author: 'Houston'
---

# {frontmatter.title}

Écrit par : {frontmatter.author}
```

### Utilisation de composants dans MDX
Expand All @@ -149,18 +151,15 @@ N'oubliez pas de transmettre `client:directive` aux composants de votre framewor

Vous trouverez d'autres exemples d'utilisation des instructions import et export dans la [documentation de MDX](https://mdxjs.com/docs/what-is-mdx/#esm).

```mdx title="src/pages/about.mdx" {5-6} /<.+\/>/
```mdx title="src/blog/post-1.mdx" {4,9}
---
layout: ../layouts/BaseLayout.astro
title: A propos de moi
title: Mon premier article
---
import Button from '../components/Button.astro';
import ReactCounter from '../components/ReactCounter.jsx';

Je vis sur **Mars** mais n'hésitez pas à <Button title="me contacter" />.
Je viens de commencer mon nouveau blog avec Astro !

Voici mon composant compteur, fonctionnant en MDX :

<ReactCounter client:load />
```

Expand All @@ -187,7 +186,7 @@ Avec MDX, vous pouvez associer la syntaxe Markdown à des composants personnalis

Importez votre composant personnalisé dans votre fichier `.mdx`, puis exportez un objet `components` qui associe l'élément HTML standard à votre composant personnalisé :

```mdx title="src/pages/about.mdx"
```mdx title="src/blog/posts/post-1.mdx"
import Blockquote from '../components/Blockquote.astro';
export const components = {blockquote: Blockquote}

Expand Down Expand Up @@ -365,7 +364,6 @@ export default defineConfig({
mdx({
optimize: {
// Empêcher l'optimiseur de traiter les éléments `h1`.
// Ceux-ci seront traités comme des composants personnalisés
ignoreElementNames: ['h1'],
},
}),
Expand Down