diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx
index b8d3146f0092e..a9b864fb54eec 100644
--- a/src/content/docs/fr/guides/content-collections.mdx
+++ b/src/content/docs/fr/guides/content-collections.mdx
@@ -420,6 +420,8 @@ const { Content, headings } = await render(entry);
```
+Lorsque vous travaillez avec des entrées MDX, vous pouvez également [transmettre vos propres composants à ``](/fr/guides/integrations-guide/mdx/#transmettre-des-composants-au-contenu-mdx) pour remplacer les éléments HTML par des alternatives personnalisées.
+
#### Transmettre du contenu en tant que props
Un composant peut également transmettre une entrée de collection entière en tant que propriété.
diff --git a/src/content/docs/fr/guides/integrations-guide/mdx.mdx b/src/content/docs/fr/guides/integrations-guide/mdx.mdx
index d7c617066f466..8225525c8cd42 100644
--- a/src/content/docs/fr/guides/integrations-guide/mdx.mdx
+++ b/src/content/docs/fr/guides/integrations-guide/mdx.mdx
@@ -185,47 +185,67 @@ Voici mon composant compteur, fonctionnant dans MDX :
```
-#### Composants personnalisés avec MDX importé
+#### Affecter des composants personnalisés aux éléments HTML
-Lors de l'affichage de contenu MDX importé, les [composants personnalisés](#assigner-des-composants-personnalisés-à-des-éléments-html) peuvent être passés via la propriété `components`.
+Avec MDX, vous pouvez associer la syntaxe Markdown à des composants personnalisés plutôt qu'à leurs éléments HTML standard. Cela vous permet d'écrire en syntaxe Markdown standard, tout en appliquant un style de composant spécifique aux éléments sélectionnés.
-```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}"
+Par exemple, vous pouvez créer un composant `Blockquote.astro` pour donner une mise en forme personnalisée au contenu `` :
+
+```astro title="src/components/Blockquote.astro"
---
-import { Content, components } from '../content.mdx';
-import Heading from '../Heading.astro';
+const props = Astro.props;
---
-
-
+
+ “
+
+
+```
+
+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/blog/articles/article-1.mdx"
+import Blockquote from '../components/Blockquote.astro';
+export const components = {blockquote: Blockquote}
+
+> Cette citation utilisera un composant Blockquote personnalisé
```
+Visitez le [site web de MDX](https://mdxjs.com/table-of-components/) pour obtenir une liste complète des éléments HTML qui peuvent être remplacés par des composants personnalisés.
+
:::note
-Les composants personnalisés définis et exportés dans un fichier MDX doivent être importés et renvoyés au composant `` via la propriété `components`.
+Les composants personnalisés définis et exportés dans un fichier MDX doivent toujours être importés puis renvoyés au composant `` via la propriété `components`.
:::
-#### Assigner des composants personnalisés à des éléments HTML
+#### Transmettre des composants au contenu MDX
-Avec MDX, vous pouvez associer la syntaxe Markdown à des composants personnalisés plutôt qu'à leurs éléments HTML standard. Cela vous permet d'écrire dans la syntaxe Markdown standard, mais d'appliquer un style de composant spécial aux éléments sélectionnés.
+Lors du rendu du contenu MDX importé avec le composant ``, y compris le rendu des entrées MDX à l'aide de collections de contenu, des composants personnalisés peuvent être transmis via la propriété `components`. Ces composants doivent d'abord être importés pour qu'ils soient disponibles pour le composant ``.
-Importez votre composant personnalisé dans votre fichier `.mdx`, puis exportez un objet `components` qui associe l'élément HTML standard à votre composant personnalisé :
+L'objet `components` associe les noms d'éléments HTML (`h1`, `h2`, `blockquote`, etc.) à vos composants personnalisés. Vous pouvez également inclure [tous les composants exportés depuis le fichier MDX](#affecter-des-composants-personnalisés-aux-éléments-html) à l'aide de l'opérateur de propagation (`...`), qui doivent également être importés depuis votre fichier MDX en tant que `components`.
-```mdx title="src/blog/posts/post-1.mdx"
-import Blockquote from '../components/Blockquote.astro';
-export const components = {blockquote: Blockquote}
+Si vous importez du contenu MDX directement à partir d'un seul fichier pour l'utiliser dans un composant Astro, importez à la fois le composant `Content` et tous les composants exportés à partir de votre fichier MDX.
-> Cette citation utilisera un composant Blockquote personnalisé
+```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}" {2}
+---
+import { Content, components } from '../content.mdx';
+import Heading from '../Heading.astro';
+---
+
+
```
+Si votre fichier MDX est une entrée de collection de contenu, utilisez la fonction `render()` de `astro:content` pour accéder au composant ``.
-```astro title="src/components/Blockquote.astro"
+L'exemple suivant transmet un titre personnalisé au composant `` via la propriété `components` à utiliser à la place de tous les éléments HTML `` :
+
+```astro title="src/pages/blog/article-1.astro" ins="components={{ h1: CustomHeading }}"
---
-const props = Astro.props;
+import { getEntry, render } from 'astro:content';
+import CustomHeading from '../../components/CustomHeading.astro';
+const entry = await getEntry('blog', 'article-1');
+const { Content } = await render(entry);
---
-
- “
-
-
+
```
-Visitez le [site web MDX](https://mdxjs.com/table-of-components/) pour obtenir la liste complète des éléments HTML qui peuvent être remplacés par des composants personnalisés.
## Configuration
@@ -378,7 +398,7 @@ export default defineConfig({
Précédemment connu sous le nom de `customComponentNames`.
-Une propriété optionnelle de `optimize` pour empêcher l'optimiseur MDX de gérer certains noms d'éléments, comme [les composants personnalisés passés au contenu MDX importé via la propriété components](/fr/guides/integrations-guide/mdx/#composants-personnalisés-avec-mdx-importé).
+Une propriété optionnelle de `optimize` pour empêcher l'optimiseur MDX de gérer certains noms d'éléments, comme [les composants personnalisés passés au contenu MDX importé via la propriété components](#transmettre-des-composants-au-contenu-mdx).
Vous devrez exclure ces composants de l'optimisation, car l'optimiseur convertit trop rapidement le contenu en une chaîne statique, ce qui brisera les composants personnalisés qui ont besoin d'être rendus dynamiquement.
@@ -412,7 +432,7 @@ export default defineConfig({
});
```
-Notez que si votre fichier MDX [configure les composants personnalisés en utilisant `export const components = { ... }`](/fr/guides/integrations-guide/mdx/#assigner-des-composants-personnalisés-à-des-éléments-html), alors vous n'avez pas besoin de configurer manuellement cette option. L'optimisateur les détectera automatiquement.
+Notez que si votre fichier MDX [configure les composants personnalisés en utilisant `export const components = { ... }`](/fr/guides/integrations-guide/mdx/#affecter-des-composants-personnalisés-aux-éléments-html), alors vous n'avez pas besoin de configurer manuellement cette option. L'optimisateur les détectera automatiquement.
## Exemples
diff --git a/src/content/docs/fr/reference/directives-reference.mdx b/src/content/docs/fr/reference/directives-reference.mdx
index 51a74d02765c0..e8d601b4106a0 100644
--- a/src/content/docs/fr/reference/directives-reference.mdx
+++ b/src/content/docs/fr/reference/directives-reference.mdx
@@ -111,7 +111,7 @@ Ces directives contrôlent la façon dont les [composants de Framework UI](/fr/g
Par défaut, un composant de Framework UI n'est pas hydraté côté client. Si aucune directive `client:*` n'est fournie, son HTML est rendu sur la page sans JavaScript.
-Une directive client ne peut être utilisée que sur un composant de Framework UI directement importé dans un composant `.astro`. Les directives d'hydratation ne sont pas prises en charge lors de l'utilisation de [balises dynamiques](/fr/reference/astro-syntax/#balises-dynamiques) et de [composants personnalisés transmis via la propriété `components`](/fr/guides/integrations-guide/mdx/#composants-personnalisés-avec-mdx-importé).
+Une directive client ne peut être utilisée que sur un composant de Framework UI directement importé dans un composant `.astro`. Les directives d'hydratation ne sont pas prises en charge lors de l'utilisation de [balises dynamiques](/fr/reference/astro-syntax/#balises-dynamiques) et de [composants personnalisés transmis via la propriété `components`](/fr/guides/integrations-guide/mdx/#transmettre-des-composants-au-contenu-mdx).
### `client:load`