diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx
index 5777ef326ddce..a9a44a8704281 100644
--- a/src/content/docs/fr/guides/content-collections.mdx
+++ b/src/content/docs/fr/guides/content-collections.mdx
@@ -591,7 +591,7 @@ npm run astro build -- --force
**Déconseillé.** Les plugins Remark et rehype accèdent au _raw_ du frontmatter du document Markdown ou MDX. Cela signifie que le document `remarkPluginFrontmatter` est traité séparément de votre `schema` sécurisé, et ne reflétera pas les changements ou les valeurs par défaut appliqués par Astro. Utilisez-le à vos risques et périls !
:::
-Astro supporte les plugins remark ou rehype qui [modifient votre frontmatter directement](/fr/guides/markdown-content/#modifier-le-frontmatter-par-un-programme). Vous pouvez accéder à ce frontmatter modifié à l'intérieur d'un contenu en utilisant la propriété `remarkPluginFrontmatter` renvoyée par `render()` :
+Astro supporte les plugins remark ou rehype qui [modifient votre frontmatter directement](/fr/guides/markdown-content/#modification-programmatique-du-frontmatter). Vous pouvez accéder à ce frontmatter modifié à l'intérieur d'un contenu en utilisant la propriété `remarkPluginFrontmatter` renvoyée par `render()` :
```astro "{ remarkPluginFrontmatter }"
---
diff --git a/src/content/docs/fr/guides/content.mdx b/src/content/docs/fr/guides/content.mdx
index 2500c8119c641..a738746b7e1e3 100644
--- a/src/content/docs/fr/guides/content.mdx
+++ b/src/content/docs/fr/guides/content.mdx
@@ -51,7 +51,7 @@ Les fichiers Markdown et MDX qui résident dans votre dossier `src/pages` géné
### Contenu local
-Vous pouvez également choisir de garder vos fichiers Markdown et MDX en dehors du dossier `src/pages` et, à la place, d'[importer leur contenu](/fr/guides/markdown-content/#importer-du-contenu-markdown) dans vos pages `.astro`.
+Vous pouvez également choisir de garder vos fichiers Markdown et MDX en dehors du dossier `src/pages` et, à la place, d'[importer leur contenu](/fr/guides/markdown-content/#importation-de-markdown) dans vos pages `.astro`.
### Collections de contenu
@@ -59,7 +59,7 @@ Les [collections de contenu](/fr/guides/content-collections/) d'Astro fournissen
### Contenu distant
-Vous pouvez aussi [récupérer du Markdown à distance](/fr/guides/markdown-content/#récupérer-du-markdown-distant) provenant d'une source extérieure à votre projet. Cela nécessitera votre propre parseur Markdown, ou une intégration communautaire (par exemple [`astro-remote`](https://github.com/natemoo-re/astro-remote)).
+Vous pouvez aussi [récupérer du Markdown à distance](/fr/guides/markdown-content/#récupérer-du-markdown-à-distance) provenant d'une source extérieure à votre projet. Cela nécessitera votre propre parseur Markdown, ou une intégration communautaire (par exemple [`astro-remote`](https://github.com/natemoo-re/astro-remote)).
## Présenter votre contenu
diff --git a/src/content/docs/fr/guides/markdown-content.mdx b/src/content/docs/fr/guides/markdown-content.mdx
index 130d3901d1388..07d6f9813cc26 100644
--- a/src/content/docs/fr/guides/markdown-content.mdx
+++ b/src/content/docs/fr/guides/markdown-content.mdx
@@ -1,6 +1,6 @@
---
-title: Markdown & MDX
-description: Apprenez à créer du contenu en utilisant Markdown ou MDX avec Astro.
+title: Markdown
+description: Apprenez à créer du contenu en utilisant Markdown avec Astro.
i18nReady: true
---
import Since from '~/components/Since.astro';
@@ -9,225 +9,29 @@ import RecipeLinks from "~/components/RecipeLinks.astro";
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
-Le [Markdown](https://daringfireball.net/projects/markdown/) est couramment utilisé pour créer des contenus à forte teneur en texte, tels que des articles de blog et de la documentation. Astro inclut une prise en charge intégrée des fichiers Markdown standard qui peuvent également inclure un [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) pour définir des métadonnées personnalisées telles qu'un titre, une description et des balises.
+Le [Markdown](https://daringfireball.net/projects/markdown/) est couramment utilisé pour créer des contenus à forte teneur en texte, tels que des articles de blog et de la documentation. Astro inclut une prise en charge intégrée des fichiers Markdown standard qui peuvent également inclure un [frontmatter YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) pour définir des propriétés personnalisées telles qu'un titre, une description et des balises.
-Avec [l'intégration @astrojs/mdx](/fr/guides/integrations-guide/mdx/) installée, Astro supporte aussi les fichiers [MDX](https://mdxjs.com/) (`.mdx`) qui apportent des fonctionnalités supplémentaires, telles que la prise en charge des expressions et des composants JavaScript dans votre contenu Markdown.
+Dans Astro, vous pouvez créer du contenu en Markdown, puis l'afficher dans des composants `.astro`. Cela combine un format d'écriture familier conçu pour le contenu avec la flexibilité de la syntaxe et de l'architecture des composants d'Astro.
-Utilisez l'un ou les deux types de fichiers pour écrire du contenu Markdown !
+Pour des fonctionnalités supplémentaires, telles que l'inclusion de composants et d'expressions JSX dans Markdown, ajoutez l'intégration [`@astrojs/mdx`](/fr/guides/integrations-guide/mdx/) pour écrire votre contenu Markdown en utilisant [MDX](https://mdxjs.com/).
-## Pages Markdown et MDX
+## Organiser les fichiers Markdown
-### Collections de contenu
+Vos fichiers Markdown locaux peuvent être conservés n'importe où dans votre répertoire `src/`. Ils peuvent être importés dans les composants `.astro` en utilisant une instruction `import` pour un seul fichier et `import.meta.glob()` de Vite pour interroger plusieurs fichiers à la fois.
-Vous pouvez gérer vos fichiers Markdown et MDX dans Astro dans un dossier spécial `src/content/`. Les [collections de contenu](/fr/guides/content-collections/) vous aident à organiser votre contenu, à valider vos frontmatter et fournir un type-safety TypeScript automatique lorsque que vous travaillez sur votre contenu.
+Si vous avez des groupes de fichiers Markdown apparentés, envisagez de les [définir comme des collections](/fr/guides/content-collections/). Cela présente plusieurs avantages, notamment la possibilité de stocker les fichiers Markdown n'importe où sur votre système de fichiers ou à distance.
-
- - src/content/
- - **newsletter/**
- - week-1.md
- - week-2.md
- - **authors/**
- - grace-hopper.md
- - alan-turing.md
-
+Les collections vous permettent également d'utiliser une API optimisée et spécifique au contenu pour interroger et afficher votre contenu. Les collections sont destinées aux ensembles de données qui partagent la même structure, tels que les articles de blog ou les pages de produits. Lorsque vous définissez cette forme dans un schéma, vous bénéficiez en outre de la validation, de la sécurité des types et de l'Intellisense dans votre éditeur.
+{/* En savoir plus sur [quand utiliser les collections de contenu](/fr/guides/content-collections/#quand-créer-une-collection) au lieu des importations de fichiers. */}
+## Expressions dynamiques de type JSX
-Pour en savoir plus sur l'utilisation des [collections de contenu dans Astro](/fr/guides/content-collections/).
+Après avoir importé ou analysé des fichiers Markdown, vous pouvez écrire des modèles HTML dynamiques dans vos composants `.astro` qui incluent les données du frontmatter et le contenu du corps du texte.
-
-### Routage basé sur les fichiers
-
-Astro traite n'importe quel fichier `.md` (ou une autre extension prise en charge) ou `.mdx` à l'intérieur du répertoire `/src/pages/` comme une page.
-
-Placer un fichier dans ce répertoire, ou dans un sous-répertoire, construira automatiquement une route vers cette page en utilisant le chemin du fichier.
-
-```markdown
----
-# Exemple: src/pages/page-1.md
-title: Hello, World
----
-
-# Bonjour à tous !
-
-Ce fichier Markdown créer une page à l'adresse `ton-domaine.com/page-1/`
-
-Ce n'est probablement pas suffisamment stylisé, mais le Markdown supporte :
-- **gras** et _italique._
-- listes
-- [liens](https://astro.build)
-- Et plus encore !
-```
-
-En savoir plus sur le [routage basé sur les fichiers d'Astro](/fr/guides/routing/) ou les options pour créer des [routes dynamiques](/fr/guides/routing/#routes-dynamiques).
-
-
-## Fonctionnalités de Markdown
-
-Astro offre quelques fonctions Markdown supplémentaires intégrées, disponibles lors de l'utilisation de fichiers Markdown et MDX.
-
-### Frontmatter `layout`
-
-Astro fournit des [pages Markdown et MDX](/fr/basics/astro-pages/#pages-markdownmdx) (situées dans `src/pages/`) avec une propriété spéciale `layout` qui peut spécifier un chemin relatif (ou [alias](/fr/guides/imports/#alias)) vers un [composant de mise en page](/fr/basics/layouts/#mises-en-page-markdown) Astro.
-
-```markdown {3}
----
-# src/pages/posts/post-1.md
-layout: ../../layouts/BlogPostLayout.astro
-title: Astro en bref
-author: Himanshu
-description: Découvrez ce qui rend Astro génial !
----
-Il s'agit d'un billet écrit en Markdown.
-```
-
-[Les propriétés spécifiques sont alors disponibles pour le composant de mise en page](/fr/basics/layouts/#propriétés-de-mise-en-page-markdown) à travers `Astro.props`. Par exemple, vous pouvez accéder aux propriétés du frontmatter par l'intermédiaire de `Astro.props.frontmatter`:
-
-```astro /frontmatter(?:.\w+)?/
----
-// src/layouts/BlogPostLayout.astro
-const {frontmatter} = Astro.props;
----
-
-
-
{frontmatter.title}
-
Auteur de l'article : {frontmatter.author}
-
{frontmatter.description}
-
-
-
-```
-
-Vous pouvez également [styliser votre Markdown](/fr/guides/styling/#style-markdown) dans votre composant de mise en page.
-
-En savoir plus sur les [mises en page Markdown](/fr/basics/layouts/#mises-en-page-markdown).
-
-### Identifiants d'En-tête
-
-L'utilisation d'en-tête en Markdown et MDX va automatiquement vous donner des liens d'ancrage afin que vous puissiez accéder directement à certaines sections de votre page.
-
-```markdown title="src/pages/page-1.md"
----
-title: Ma page de contenu
+```md title="/src/posts/great-post.md"
---
-## Introduction
-
-Je peux créer des liens internes vers [ma conclusion](#conclusion) sur la même page lors de l'écriture en Markdown.
-
-## Conclusion
-
-Je peux utiliser l'URL `https://exemple.com/page-1/#introduction` pour naviguer directement vers mon Introduction sur la page.
-```
-
-Astro génère des `id`s de rubrique basés sur `github-slugger`. Vous pouvez trouver plus d'exemples dans [la documentation de github-slugger](https://github.com/Flet/github-slugger#usage).
-
-### Caractères spéciaux d'échappement
-
-Certains caractères ont une signification spéciale en Markdown et MDX. Vous devez utiliser une syntaxe différente si vous souhaitez les afficher. Pour ce faire, vous pouvez utiliser les [entités HTML](https://developer.mozilla.org/fr/docs/Glossary/Entity) à la place de ces caractères.
-
-Par exemple, pour prévenir `<` d'être interprété comme le début d'une base HTML, écrivez `<`. Ou, pour prévenir `{` d'être interprété comme le début d'une expression JavaScript en MDX, écrivez `{`.
-
-## Fonctionnalités MDX uniquement
-
-L'ajout de [l'intégration Astro MDX](/fr/guides/integrations-guide/mdx/) améliore votre création de Markdown avec des variables, des expressions et des composants JSX.
-
-Il ajoute aussi des fonctionnalités supplémentaires au MDX standard, notamment la prise en charge du [frontmatter de style Markdown dans MDX](https://mdxjs.com/guides/frontmatter/). Cela vous permet d'utiliser la plupart des fonctionnalités Markdown intégrées d'Astro, comme la propriété de [frontmatter `layout`](#frontmatter-layout).
-
-Les fichiers `.mdx` doivent être écrit dans la [syntaxe MDX](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) plutôt que dans la syntaxe de type HTML d'Astro.
-
-### Utilisation de variables exportées dans MDX
-
-MDX permet d'utiliser l'instruction `export` pour ajouter des variables dans votre contenu MDX. Ces variables sont accessibles à la fois dans le modèle lui-même et comme propriétés nommées lors de [l'importation du fichier](#importer-du-contenu-markdown) à un autre endroit.
-
-Par exemple, vous pouvez exporter un champ `title` depuis une page ou un composant MDX pour l'utiliser en tant qu'en-tête avec les `{expressions JSX}` :
-
-```mdx title="/src/pages/posts/post-1.mdx"
-export const title = 'Mon premier billet sur le MDX'
-
-# {title}
-```
-### Utilisation de variables frontmatter en MDX
-
-L'intégration MDX d'Astro inclut le support pour l'utilisation par défaut de frontmatter en MDX. Ajoutez les propriétés de frontmatter comme vous le feriez dans des fichiers Markdown, et ces variables sont accessibles pour être utilisées dans la template, dans son [composant `layout`](#frontmatter-layout), et comme propriétés nommées lors de l'[importation du fichier](#importer-du-contenu-markdown) ailleurs.
-
-```mdx title="/src/pages/posts/post-1.mdx"
----
-layout: '../../layouts/BlogPostLayout.astro'
-title: 'Mon premier billet MDX'
----
-
-# {frontmatter.title}
-```
-
-### Utilisation des composants en MDX
-
-Après avoir installé l'intégration MDX, vous pouvez importer et utiliser les [composants Astro](/fr/basics/astro-components/#props-de-composant) et les [composants de framework d'interface utilisateur](/fr/guides/framework-components/#utilisation-des-composants-de-framework) dans des fichiers MDX (`.mdx`) comme vous le feriez avec n'importe quel autre composant Astro.
-
-N'oubliez pas d'inclure une `client:directive` sur les composants de votre framework d'interface utilisateur, si nécessaire !
-
-Vous trouverez d'autres exemples d'utilisation des instructions d'importation et d'exportation dans la [documentation MDX](https://mdxjs.com/docs/what-is-mdx/#esm).
-
-```mdx title="src/pages/about.mdx" {5-6} /<.+\/>/
----
-layout: ../layouts/BaseLayout.astro
-title: À propos de moi
----
-import Button from '../components/Button.astro';
-import ReactCounter from '../components/ReactCounter.jsx';
-
-Je vis sur **Mars** mais n'hésitez pas à .
-
-Voici mon composant compteur, fonctionnant en MDX :
-
-
-```
-
-#### Affectation de composants personnalisés à des éléments HTML
-
-Avec MDX, vous pouvez associer la syntaxe Markdown à des composants personnalisés au lieu de 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.
-
-Importez votre composant personnalisé dans votre fichier `.mdx`, puis exportez un objet `components` qui fait correspondre l'élément HTML standard à votre composant personnalisé :
-
-```mdx title="src/pages/about.mdx"
-import Blockquote from '../components/Blockquote.astro';
-export const components = {blockquote: Blockquote}
-
-> Cette citation sera un Blockquote personnalisé
-```
-
-
-```astro title="src/components/Blockquote.astro"
----
-const props = Astro.props;
----
-
- “
-
-
-```
-Consultez 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.
-
-## Importer du contenu Markdown
-
-Vous pouvez importer des fichiers Markdown et MDX directement dans vos fichiers Astro. Cela vous donne accès à leur contenu Markdown, ainsi qu'à d'autres propriétés telles que les valeurs frontmatter qui peuvent être utilisées dans les expressions de type JSX d'Astro.
-
-Vous pouvez importer une page spécifique avec une déclaration `import` ou plusieurs avec [`Astro.glob()`](/fr/guides/imports/#astroglob).
-
-```astro title="src/pages/index.astro"
----
-// Import d'un fichier
-import * as myPost from '../pages/post/my-post.md';
-
-// Import de plusieurs fichiers avec Astro.glob
-const posts = await Astro.glob('../pages/post/*.md');
----
-```
-
-Quand vous importez des fichiers Markdown et MDX dans un composant Astro, vous obtenez un objet contenant leurs [propriétés exportées](#propriétés-exportées).
-
-```md title="/src/pages/posts/great-post.md"
----
-title: 'Le meilleur billet de tous les temps'
+title: 'Le meilleur article de tous les temps'
author: 'Ben'
---
@@ -236,172 +40,144 @@ Voici mon _incroyable_ billet !
```astro title="src/pages/my-posts.astro"
---
-import * as greatPost from '../pages/post/great-post.md';
-
-const posts = await Astro.glob('../pages/post/*.md');
+import * as greatPost from '../posts/great-post.md';
+const posts = Object.values(await import.meta.glob('../posts/*.md', { eager: true }));
---
```
-Dans les fichiers MDX, vous pouvez accéder aux propriétés depuis le frontmatter et la déclaration `export` :
+### Propriétés disponibles
-```mdx title="/src/pages/posts/mdx-post.mdx"
----
-title: 'Le meilleur billet de tous les temps'
-author: 'Ben'
----
-export const description = 'Mettez-vous à l'aise ! Cela va être une superbe lecture.'
+#### Interroger les collections
-Voici mon _super_ billet !
-```
+Lorsque vous récupérez des données de vos collections via des fonctions d'aide, les propriétés de votre document Markdown sont disponibles dans un objet `data` (par exemple `post.data.title`). De plus, `body` contient le contenu brut, non compilé, sous forme de chaîne de caractères.
-```astro title="src/pages/my-posts.astro"
----
-import * as greatPost from '../pages/post/mdx-post.mdx';
----
+Voir le [Type des entrées de collection](/fr/reference/api-reference/#type-des-entrées-de-collection) complet.
-
{greatPost.frontmatter.title}
-
Écrit par : {greatPost.frontmatter.author}
-
{greatPost.description}
-```
+#### Importation de Markdown
-Vous pouvez éventuellement fournir un type pour la variable `frontmatter` en utilisant un générique TypeScript :
+Les propriétés exportées suivantes sont disponibles dans votre composant `.astro` lors de l'importation de Markdown en utilisant `import` ou `import.meta.glob()` :
-```astro title="src/pages/index.astro" ins={2-5} ins=""
----
-interface Frontmatter {
- title: string;
- description?: string;
+- **`file`** - Le chemin absolu du fichier (par exemple `/home/user/projects/.../file.md`).
+- **`url`** - L'URL de la page (par exemple `/fr/guides/markdown-content`).
+- **`frontmatter`** - Contient toutes les données spécifiées dans le frontmatter YAML du fichier.
+- **``** - Un composant qui renvoie le contenu complet et affiché du fichier.
+- **`RawContent()`** - Une fonction qui renvoie le document Markdown brut sous forme de chaîne de caractères.
+- **`compiledContent()`** - Une fonction qui retourne le document Markdown compilé en une chaîne HTML.
+- **`getHeadings()`** - Une fonction asynchrone qui retourne un tableau de tous les titres (`
` à `
`) dans le fichier avec le type : `{ depth: number ; slug: string ; text: string }[]`. Le `slug` de chaque titre correspond à l'identifiant généré pour un titre donné et peut être utilisé pour les liens d'ancrage.
+
+Un exemple de billet de blog en Markdown peut passer l'objet `Astro.props` suivant :
+
+```js
+Astro.props = {
+ file: "/home/user/projects/.../file.md",
+ url: "/en/guides/markdown-content/",
+ frontmatter: {
+ /** Frontmatter pour un article */
+ title: "Astro 0.18 Release",
+ date: "Tuesday, July 27 2021",
+ author: "Matthew Phillips",
+ description: "Astro 0.18 is our biggest release since Astro launch.",
+ },
+ getHeadings: () => [
+ {"depth": 1, "text": "Astro 0.18 Release", "slug": "astro-018-release"},
+ {"depth": 2, "text": "Responsive partial hydration", "slug": "responsive-partial-hydration"}
+ /* ... */
+ ],
+ rawContent: () => "# Astro 0.18 Release\nA little over a month ago, the first public beta [...]",
+ compiledContent: () => "
Astro 0.18 Release
\n
A little over a month ago, the first public beta [...]
```
-### Propriétés exportées
-:::note[Vous utilisez une mise en page Astro ?]
-Voir les [propriétés exportées vers un composant de mise en page Astro](/fr/basics/layouts/#propriétés-de-mise-en-page-markdown) en utilisant la [mise en page spéciale d'Astro pour le frontmatter](#frontmatter-layout).
-:::
-
-Les propriétés suivantes sont disponibles pour un composant `.astro` lorsqu'il utilise une instruction `import` ou `Astro.glob()` :
-
-- **`file`** - Le chemin absolu vers le fichier (par exemple `/home/user/projects/.../file.md`).
-- **`url`** - S'il s'agit d'une page, l'URL de la page (e.g. `/fr/guides/markdown-content`).
-- **`frontmatter`** - Contient toutes les données spécifiées dans le frontmatter YAML du fichier.
-- **`getHeadings`** - Une fonction asynchrone qui retourne un tableau de tous les titres (c.-à-d. les éléments `h1 -> h6`) du fichier. Le `slug` de chaque titre correspond à l'identifiant généré pour un titre donné et peut être utilisé pour les liens d'ancrage. Cette liste suit le type : `{ depth: number; slug: string; text: string }[]`.
-- **`Content`** - Un composant qui renvoie le contenu complet et rendu du fichier.
-- **(Markdown uniquement) `rawContent()`** - Une fonction qui renvoie le document Markdown brut sous forme de chaîne de caractères.
-- **(Markdown uniquement) `compiledContent()`** - Une fonction qui renvoie le document Markdown compilé en une chaîne HTML. Notez que cela n'inclut pas les mises en page configurées dans votre frontmatter ! Seul le document markdown lui-même sera renvoyé au format HTML.
-- **(MDX uniquement)** - Les fichiers MDX peuvent également exporter des données à l'aide de l'instruction `export`.
+## Le composant ``
+Le composant `` est disponible en important `Content` à partir d'un fichier Markdown. Ce composant renvoie le contenu complet du fichier, affiché en HTML. Vous pouvez optionnellement renommer `Content` en n'importe quel nom de composant que vous préférez.
-### Le composant `Content`
-
-Importer `Content` pour rendre un composant qui renvoie le contenu complet d'un fichier Markdown ou MDX :
+Vous pouvez également [rendre le contenu HTML d'une entrée de collection Markdown](/fr/guides/content-collections/#rendre-le-contenu-en-html) en affichant un composant ``.
```astro title="src/pages/content.astro" "Content"
---
+// Déclaration d'importation
import {Content as PromoBanner} from '../components/promoBanner.md';
----
+// Requête sur les collections
+import { getEntry, render } from 'astro:content';
+
+const product = await getEntry('products', 'shirt');
+const { Content } = await render();
+---
Promotion du jour
-```
-#### Exemple : Routage dynamique des pages
+
Fin de la vente : {product.data.saleEndDate.toDateString()}
+
+```
-À la place de mettre vos fichiers Markdown/MDX dans le dossier `src/pages/` pour créer des routes de pages, vous pouvez [générer des pages dynamiquement](/fr/guides/routing/#routes-dynamiques).
+## ID des titres
-Pour accéder à votre contenu Markdown, passez le composant `` à travers le `props` de la page Astro. Vous pouvez alors récupérer le composant dans `Astro.props` et le rendre dans votre template.
+En écrivant des titres en Markdown, vous obtiendrez automatiquement des liens d'ancrage qui vous permettront d'accéder directement à certaines sections de votre page.
-```astro title="src/pages/[slug].astro" {9-11} "Content" "Astro.props.post"
+```markdown title="src/pages/page-1.md"
---
-export async function getStaticPaths() {
- const posts = await Astro.glob('../posts/**/*.md')
-
- return posts.map(post => ({
- params: {
- slug: post.frontmatter.slug
- },
- props: {
- post
- },
- }))
-}
-
-const { Content } = Astro.props.post
+title: Ma page de contenu
---
-
-
-
-```
-
-
-### Exportations MDX uniquement
+## Introduction
-Les fichiers MDX peuvent aussi exporter des données avec l'instruction `export`.
+Je peux créer un lien interne vers [ma conclusion](#conclusion) sur la même page lorsque j'écris en Markdown.
-Par exemple, vous pouvez exporter un champ `title` depuis une page ou un composant MDX.
+## Conclusion
-```mdx title="/src/pages/posts/post-1.mdx"
-export const title = 'Mon premier billet MDX'
+Je peux visiter `https://example.com/page-1/#introduction` dans un navigateur pour naviguer directement vers mon Introduction.
```
-Ce `title` sera accessible depuis les instructions `import` et [Astro.glob()](/fr/reference/api-reference/#astroglob) :
+Astro génère des `id`s d'en-tête basés sur `github-slugger`. Vous pouvez trouver plus d'exemples dans [la documentation de github-slugger](https://github.com/Flet/github-slugger#usage).
-```astro
----
-// src/pages/index.astro
-const posts = await Astro.glob('./*.mdx');
----
+### ID des titres et plugins
-{posts.map(post =>
{post.title}
)}
-```
+Astro injecte un attribut `id` dans tous les éléments d'en-tête (`
` à `
`) dans les fichiers Markdown et MDX et fournit un utilitaire `getHeadings()` pour récupérer ces ID dans les [propriétés exportées Markdown](#propriétés-disponibles).
-### Composants personnalisés avec du MDX importé
+Vous pouvez personnaliser ces ID en ajoutant un plugin rehype qui injecte les attributs `id` (par exemple `rehype-slug`). Vos ID personnalisés, au lieu des valeurs par défaut d'Astro, seront reflétés dans la sortie HTML et les éléments retournés par `getHeadings()`.
-Lors du rendu d'un contenu MDX importé, les [composants personnalisés](#affectation-de-composants-personnalisés-à-des-éléments-html) peuvent être passés via la propriété `components`.
+Par défaut, Astro injecte les attributs `id` après l'exécution de vos plugins rehype. Si l'un de vos plugins rehype personnalisés a besoin d'accéder aux ID injectés par Astro, vous pouvez importer et utiliser directement le plugin `rehypeHeadingIds` d'Astro. Assurez-vous d'ajouter `rehypeHeadingIds` avant tous les plugins qui en dépendent :
-```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}"
----
-import { Content, components } from '../content.mdx';
-import Heading from '../Heading.astro';
----
-
-
-```
+```js title="astro.config.mjs" ins={2, 8}
+import { defineConfig } from 'astro/config';
+import { rehypeHeadingIds } from '@astrojs/markdown-remark';
+import { otherPluginThatReliesOnHeadingIDs } from 'some/plugin/source';
-:::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`.
-:::
+export default defineConfig({
+ markdown: {
+ rehypePlugins: [
+ rehypeHeadingIds,
+ otherPluginThatReliesOnHeadingIDs,
+ ],
+ },
+});
+```
-## Configuration de Markdown et MDX
+## Plugins Markdown
-La prise en charge du Markdown dans astro est géré par [remark](https://remark.js.org/), un outil puissant de parsing et de traitement doté d'un écosystème actif. D'autres parser de Markdown comme Pandoc et markdown-it ne sont pas supportés actuellement.
+La prise en charge de Markdown dans Astro est assurée par [remark](https://remark.js.org/), un puissant outil d'analyse et de traitement doté d'un écosystème actif. D'autres analyseurs Markdown comme Pandoc et markdown-it ne sont pas supportés actuellement.
-Astro applique par défaut les plugins [Markdown de GitHub](https://github.com/remarkjs/remark-gfm) et [SmartyPants](https://github.com/silvenon/remark-smartypants). Cela permet de générer des liens cliquables à partir du texte et de mettre en forme les [citations et les em-dashes](https://daringfireball.net/projects/smartypants/).
+Astro applique par défaut les plugins [GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm) et [SmartyPants](https://github.com/silvenon/remark-smartypants). Cela permet de générer des liens cliquables à partir du texte et de formater les [citations et les tirets cadratins](https://daringfireball.net/projects/smartypants/).
-Vous pouvez personnaliser la façon dont remark parse votre Markdown dans `astro.config.mjs`. Voir la liste complète des [options de configuration Markdown](/fr/reference/configuration-reference/#options-de-markdown).
+Vous pouvez personnaliser la façon dont remark analyse votre Markdown dans `astro.config.mjs`. Voir la liste complète des [options de configuration Markdown](/fr/reference/configuration-reference/#options-de-markdown).
-### Plugins Markdown
+### Ajouter des plugins remark et rehype
-Astro prend en charge l'ajout de plugins tiers [remark](https://github.com/remarkjs/remark) et [rehype](https://github.com/rehypejs/rehype) pour Markdown et MDX. Ces plugins vous permettent d'ajouter de nouvelles fonctionnalités à votre Markdown, comme [la génération automatique d'une table des matières](https://github.com/remarkjs/remark-toc), [appliquer des étiquettes d'émoji accessibles](https://github.com/florianeckerstorfer/remark-a11y-emoji) et [styliser votre markdown](/fr/guides/styling/#style-markdown).
+Astro prend en charge l'ajout de plugins tiers [remark](https://github.com/remarkjs/remark) et [rehype](https://github.com/rehypejs/rehype) pour Markdown. Ces plugins vous permettent d'étendre votre Markdown avec de nouvelles fonctionnalités, comme [générer automatiquement une table des matières](https://github.com/remarkjs/remark-toc), [appliquer des étiquettes accessibles aux émojis](https://github.com/florianeckerstorfer/remark-a11y-emoji) et [styliser votre Markdown](/fr/guides/styling/#style-markdown).
-Nous vous encourageons à consulter [awesome-remark](https://github.com/remarkjs/awesome-remark) et [awesome-rehype](https://github.com/rehypejs/awesome-rehype) pour les plugins populaires ! Lisez le README de chaque plugin pour connaitre les instructions d'installation spécifiques.
+Nous vous encourageons à consulter [awesome-remark](https://github.com/remarkjs/awesome-remark) et [awesome-rehype](https://github.com/rehypejs/awesome-rehype) parmi les plugins populaires ! Consultez le fichier README de chaque plugin pour obtenir des instructions d'installation spécifiques.
-Cet exemple applique [`remark-toc`](https://github.com/remarkjs/remark-toc) et [`rehype-accessible-emojis`](https://www.npmjs.com/package/rehype-accessible-emojis) aux fichiers Markdown et MDX :
+Cet exemple applique [`remark-toc`](https://github.com/remarkjs/remark-toc) et [`rehype-accessible-emojis`](https://www.npmjs.com/package/rehype-accessible-emojis) aux fichiers Markdown :
```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
@@ -410,45 +186,17 @@ import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';
export default defineConfig({
markdown: {
- // Appliqué aux fichiers .md et .mdx
remarkPlugins: [ [remarkToc, { heading: 'toc', maxDepth: 3 } ] ],
rehypePlugins: [rehypeAccessibleEmojis],
},
});
```
-#### ID de titres et plugins
-
-Astro injecte un attribut `id` dans tous les éléments titre (`
` à `
`) dans les fichiers Markdown et MDX et fournit un utilitaire `getHeadings()` pour récupérer ces identifiants dans les [propriétés Markdown exportées](#propriétés-exportées).
+### Personnaliser un plugin
-Vous pouvez personnaliser les ID de ces titres en ajoutant un plugin rehype qui injecte les attributs `id` (par exemple `rehype-slug`). Vos ID personnalisés, au lieu des valeurs par défaut d'Astro, seront reflétés dans la sortie HTML et dans les éléments retournés par `getHeadings()`.
+Pour personnaliser un plugin, il faut lui ajouter un objet d'options dans un tableau imbriqué.
-Par défaut, Astro injecte les attributs `id` après l'exécution de vos plugins rehype. Si l'un de vos plugins rehype personnalisés a besoin d'accéder aux ID injectés par Astro, vous pouvez importer et utiliser directement le plugin `rehypeHeadingIds` d'Astro. Assurez-vous d'ajouter `rehypeHeadingIds` avant tous les plugins qui en dépendent :
-
-```js title="astro.config.mjs" ins={2, 8}
-import { defineConfig } from 'astro/config';
-import { rehypeHeadingIds } from '@astrojs/markdown-remark';
-import { otherPluginThatReliesOnHeadingIDs } from 'some/plugin/source';
-
-export default defineConfig({
- markdown: {
- rehypePlugins: [
- rehypeHeadingIds,
- otherPluginThatReliesOnHeadingIDs,
- ],
- },
-});
-```
-
-:::note
-`getHeadings()` ne renvoie que les titres écrits directement dans un fichier Markdown ou MDX. Si un fichier MDX importe des composants qui contiennent leurs propres titres, ceux-ci ne seront pas retournés par `getHeadings()`.
-:::
-
-#### Personnaliser un plugin
-
-Pour personnaliser un plugin, il faut lui fournir un objet `options` dans un tableau imbriqué.
-
-L'exemple ci-dessous ajoute [l'option de titres au plugin `remarkToc`](https://github.com/remarkjs/remark-toc#options) pour modifier l'emplacement de la table des matières, et [l'option `behavior` au plugin `rehype-autolink-headings`](https://github.com/rehypejs/rehype-autolink-headings#options) afin d'ajouter la balise d'ancrage après le texte du titre.
+L'exemple ci-dessous ajoute l'option [`heading` au plugin `remarkToc`](https://github.com/remarkjs/remark-toc#options) pour modifier l'emplacement de la table des matières, et l'option [`behavior` au plugin `rehype-autolink-headings`](https://github.com/rehypejs/rehype-autolink-headings#options) afin d'ajouter la balise d'ancrage après le texte du titre.
```js title="astro.config.mjs"
import remarkToc from 'remark-toc';
@@ -463,70 +211,69 @@ export default {
}
```
-### Modifier le frontmatter par un programme
+### Modification programmatique du frontmatter
:::note
-Si vous utilisez des [collections de contenus](/fr/guides/content-collections/), veuillez consulter ["Modifier le frontmatter avec Remark ](/fr/guides/content-collections/#modifier-le-frontmatter-avec-remark).
+Si vous utilisez des [collections de contenus](/fr/guides/content-collections/), veuillez consulter [« Modifier le frontmatter avec Remark »](/fr/guides/content-collections/#modifier-le-frontmatter-avec-remark).
:::
-Vous pouvez ajouter des propriétés frontmatter à tous vos fichiers Markdown et MDX en utilisant un [plugin remark ou rehype](#plugins-markdown).
+Vous pouvez ajouter des propriétés au frontmatter de tous vos fichiers Markdown et MDX en utilisant un [plugin remark ou rehype](#plugins-markdown).
-1. Ajoutez un `customProperty` à la propriété `data.astro.frontmatter` de l'argument `file` de votre plugin :
-
- ```js title="example-remark-plugin.mjs"
- export function exampleRemarkPlugin() {
- // Tous les plugins remark et rehype renvoient une fonction distincte
- return function (tree, file) {
- file.data.astro.frontmatter.customProperty = 'Propriété générée';
- }
- }
- ```
-
- :::tip
-
-
- `data.astro.frontmatter` contient toutes les propriétés d'un document Markdown ou MDX donné. Cela vous permet de modifier les propriétés existantes du frontmatter, ou de calculer de nouvelles propriétés à partir de ce frontmatter existant.
- :::
-
-2. Appliquez ce plugin à votre configuration d'intégration `markdown` ou `mdx` :
-
- ```js title="astro.config.mjs" "import { exampleRemarkPlugin } from './example-remark-plugin.mjs';" "remarkPlugins: [exampleRemarkPlugin],"
- import { defineConfig } from 'astro/config';
- import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
-
- export default defineConfig({
- markdown: {
- remarkPlugins: [exampleRemarkPlugin]
- },
- });
- ```
-
- ou
-
- ```js title="astro.config.mjs" "import { exampleRemarkPlugin } from './example-remark-plugin.mjs';" "remarkPlugins: [exampleRemarkPlugin],"
- import { defineConfig } from 'astro/config';
- import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
-
- export default defineConfig({
- integrations: [
- mdx({
- remarkPlugins: [exampleRemarkPlugin],
- }),
- ],
- });
- ```
-
+ 1. Ajoutez une propriété `customProperty` à l'objet `data.astro.frontmatter` présent dans l'argument `file` de votre plugin :
+
+ ```js title="example-remark-plugin.mjs"
+ export function exampleRemarkPlugin() {
+ // Tous les plugins remark et rehype renvoient une fonction distincte
+ return function (tree, file) {
+ file.data.astro.frontmatter.customProperty = 'Propriété générée';
+ }
+ }
+ ```
+
+ :::tip
+
+
+ `data.astro.frontmatter` contient toutes les propriétés d'un document Markdown ou MDX donné. Cela vous permet de modifier les propriétés existantes du frontmatter, ou de calculer de nouvelles propriétés à partir de ce frontmatter existant.
+ :::
+
+ 2. Appliquez ce plugin à votre configuration d'intégration `markdown` ou `mdx` :
-Désormais, chaque fichier Markdown ou MDX contiendra `customProperty` dans son frontmatter, ce qui le rendra disponible lors de [l'importation de votre markdown](#importer-du-contenu-markdown) et depuis [la propriété `Astro.props.frontmatter` dans vos layouts](#frontmatter-layout)
+ ```js title="astro.config.mjs" "import { exampleRemarkPlugin } from './example-remark-plugin.mjs';" "remarkPlugins: [exampleRemarkPlugin],"
+ import { defineConfig } from 'astro/config';
+ import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
+
+ export default defineConfig({
+ markdown: {
+ remarkPlugins: [exampleRemarkPlugin]
+ },
+ });
+ ```
+
+ ou
+
+ ```js title="astro.config.mjs" "import { exampleRemarkPlugin } from './example-remark-plugin.mjs';" "remarkPlugins: [exampleRemarkPlugin],"
+ import { defineConfig } from 'astro/config';
+ import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
+
+ export default defineConfig({
+ integrations: [
+ mdx({
+ remarkPlugins: [exampleRemarkPlugin],
+ }),
+ ],
+ });
+ ```
+
+Maintenant, chaque fichier Markdown ou MDX aura une propriété `customProperty` dans son frontmatter, ce qui la rendra disponible lors de [l'importation de votre Markdown](#importation-de-markdown) et à partir de [la propriété `Astro.props.frontmatter` dans vos mises en page](#propriété-layout-du-frontmatter).
-### Extension de la configuration Markdown à partir de MDX
+### Étendre la configuration Markdown à partir de MDX
-L'intégration MDX d'Astro étend par défaut la [configuration Markdown existante de votre projet](/fr/reference/configuration-reference/#options-de-markdown). Pour remplacer des options individuelles, vous pouvez spécifier leur équivalent dans votre configuration MDX.
+L'intégration MDX d'Astro étend par défaut [la configuration Markdown existante de votre projet](/fr/reference/configuration-reference/#options-de-markdown). Pour remplacer des options individuelles, vous pouvez spécifier leur équivalent dans votre configuration MDX.
-L'exemple suivant désactive le Markdown de Github et applique un panel différent de plugins remark pour les fichiers MDX :
+L'exemple suivant désactive l'option GitHub-Flavored Markdown et applique un ensemble différent de plugins Remark pour les fichiers MDX :
```ts title="astro.config.mjs"
import { defineConfig } from 'astro/config';
@@ -542,8 +289,8 @@ export default defineConfig({
mdx({
// `syntaxHighlight` hérité de Markdown
- // Markdown `remarkPlugins` est ignoré,
- // uniquement `remarkPlugin2` est appliqué.
+ // Markdown `remarkPlugins` ignoré,
+ // seul `remarkPlugin2` est appliqué.
remarkPlugins: [remarkPlugin2],
// `gfm` remplacé par `false`
gfm: false,
@@ -552,8 +299,7 @@ export default defineConfig({
});
```
-Pour éviter d'étendre votre configuration Markdown à partir de MDX, mettez [l'option `extendMarkdownConfig`](/fr/guides/integrations-guide/mdx/#extendmarkdownconfig) (activée par défaut) à `false` :
-
+Pour éviter d'étendre votre configuration Markdown depuis MDX, mettez [l'option `extendMarkdownConfig`](/fr/guides/integrations-guide/mdx/#extendmarkdownconfig) (activée par défaut) sur `false` :
```ts title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
@@ -572,19 +318,19 @@ export default defineConfig({
});
```
-### Coloration syntaxique
+## Coloration syntaxique
-Astro est doté d'un support intégré pour [Shiki](https://shiki.style) et [Prism](https://prismjs.com/). Cela permet de mettre en évidence la syntaxe pour :
+Astro est livré avec un support intégré pour [Shiki](https://shiki.style/) et [Prism](https://prismjs.com/). Cela permet de mettre en évidence la syntaxe pour :
- tous les blocs de code (\`\`\`) utilisés dans un fichier Markdown ou MDX.
-- le contenu dans le [composant natif ``](/fr/reference/api-reference/#code-) (géré par Shiki).
-- le contenu dans le [composant ``](/fr/reference/api-reference/#prism-) (géré par Prism).
+- dans le [composant `` intégré](/fr/reference/api-reference/#code-) (alimenté par Shiki).
+- dans le composant [``](/fr/reference/api-reference/#prism-) (alimenté par Prism).
-Shiki est activé par défaut, préconfiguré avec le thème `github-dark`. Le code compilé sera limité à des `styles` intégrés au HTML sans aucune classe CSS supplémentaire, ni feuilles de styles, ou JS sur le client.
+Shiki est activé par défaut, préconfiguré avec le thème `github-dark`. La sortie compilée sera limitée à des `styles` intégrés au HTML sans classes CSS, feuilles de style ou JS côté client supplémentaires.
-#### Configuration de Shiki
+### Configuration de Shiki
-Shiki est notre colorateur syntaxique par défaut. Vous pouvez configurer toutes les options via l'objet `shikiConfig` comme ci-après :
+Shiki est notre colorateur syntaxique par défaut. Vous pouvez configurer toutes les options via l'objet `shikiConfig` comme suit :
```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
@@ -592,27 +338,27 @@ import { defineConfig } from 'astro/config';
export default defineConfig({
markdown: {
shikiConfig: {
- // Choisissez parmi les thèmes intégrés de Shiki (ou ajoutez les vôtres)
+ // Choisir parmi les thèmes intégrés de Shiki (ou ajouter les vôtres)
// https://shiki.style/themes
theme: 'dracula',
- // Alternativement, vous pouvez fournir des multiples thèmes
- // Voir la note ci-dessous pour l'utilisation de deux thèmes claire/foncé
+ // Alternativement, fournir plusieurs thèmes
+ // Voir la note ci-dessous pour l'utilisation de deux thèmes clair/foncé
themes: {
light: 'github-light',
dark: 'github-dark',
},
- // Désactivez les couleurs par défaut
+ // Désactiver les couleurs par défaut
// https://shiki.style/guide/dual-themes#without-default-color
// (Ajouté dans la v4.12.0)
defaultColor: false,
- // Ajouter des langues personnalisées
- // Note : Shiki intègre d'innombrables langages, y compris le .astro !
+ // Ajouter des langages personnalisés
+ // Note : Shiki a d'innombrables langages intégrés, y compris .astro !
// https://shiki.style/languages
langs: [],
- // Activer le retour à la ligne automatique pour éviter le défilement horizontal
+ // Activer le retour à la ligne pour éviter le défilement horizontal
wrap: true,
- // Ajouter des transformateurs personnalisés: https://shiki.style/guide/transformers
- // Trouver des transformateurs communs: https://shiki.style/packages/transformers
+ // Ajouter des transformateurs personnalisés : https://shiki.style/guide/transformers
+ // Trouver des transformateurs communs : https://shiki.style/packages/transformers
transformers: [],
},
},
@@ -620,7 +366,7 @@ export default defineConfig({
```
:::note[Personnalisation des thèmes Shiki]
-Les blocs de code Astro sont stylisés en utilisant la classe `.astro-code`. Lorsque vous suivez la documentation de Shiki (par exemple pour [personnaliser un thème double clair/foncé ou de multiples thèmes](https://shiki.style/guide/dual-themes#query-based-dark-mode)), assurez-vous de remplacer la classe `.shiki` dans les exemples par `.astro-code`.
+Les blocs de code Astro sont stylisés en utilisant la classe `.astro-code`. Lorsque vous suivez la documentation de Shiki (par exemple pour [personnaliser le duo de thèmes clair/obscur ou plusieurs thèmes](https://shiki.style/guide/dual-themes#query-based-dark-mode)), assurez-vous de remplacer la classe `.shiki` dans les exemples par `.astro-code`.
:::
#### Ajouter votre propre thème
@@ -638,18 +384,18 @@ export default defineConfig({
});
```
-Nous vous conseillons également de lire [la documentation de Shiki sur les thèmes personnalisés](https://shiki.style/themes) pour en savoir plus sur les thèmes, les modes clair et sombre, ou le style via les variables CSS.
+Nous vous conseillons également de lire [la documentation de Shiki sur les thèmes](https://shiki.style/themes) pour en savoir plus sur les thèmes, les bascules entre mode clair et mode foncé, ou le style via les variables CSS.
-#### Modifier le mode par défaut de coloration syntaxique
+### Colorateur syntaxique par défaut
-Si vous souhaitez utiliser `'prism'` par défaut, ou désactiver la coloration syntaxique entièrement, vous pouvez utiliser l'objet de configuration `markdown.syntaxHighlighting` :
+Si vous souhaitez utiliser `'prism'` par défaut, ou désactiver complètement la coloration syntaxique, vous pouvez utiliser l'objet de configuration `markdown.syntaxHighlighting` :
```js title="astro.config.mjs" ins={6}
import { defineConfig } from 'astro/config';
export default defineConfig({
markdown: {
- // Peut aussi être 'shiki' (par défaut), 'prism' ou false pour désactiver la coloration
+ // Peut être 'shiki' (par défaut), 'prism' ou false pour désactiver la mise en évidence.
syntaxHighlight: 'prism',
},
});
@@ -661,25 +407,27 @@ Si vous choisissez d'utiliser Prism, Astro appliquera les classes CSS de Prism
1. Choisissez une feuille de style prédéfinie parmi les [Thèmes Prism](https://github.com/PrismJS/prism-themes) disponibles.
-
-2. Ajouter cette feuille de styles dans [le répertoire `public/` de votre projet](/fr/basics/project-structure/#public).
-
-3. Chargez-la dans la balise `` de votre page dans un [composant de feuille de style](/fr/basics/layouts/) via une balise ``. (Voir [utilisation basique de Prism](https://prismjs.com/#basic-usage).)
+
+2. Ajoutez cette feuille de style dans [le répertoire `public/` de votre projet](/fr/basics/project-structure/#public).
+
+3. Chargez-la dans la balise `` de votre page dans un [composant de mise en page](/fr/basics/layouts/) via une balise ``. (Voir l'[utilisation de base de Prism](https://prismjs.com/#basic-usage).)
-Vous pouvez aussi visiter la [liste des langages supportés par Prism](https://prismjs.com/#supported-languages) pour les options et leur usage.
+Vous pouvez également consulter la [liste des langages supportés par Prism](https://prismjs.com/#supported-languages) pour en savoir plus sur ses options et son utilisation.
-## Récupérer du Markdown distant
+## Récupérer du Markdown à distance
-Astro a été principalement conçu pour les fichiers Markdown locaux qui peuvent être enregistrés dans le répertoire de votre projet. Toutefois, dans certains cas, il peut être nécessaire de récupérer le code Markdown à partir d'une source distante. Par exemple, vous pouvez avoir besoin de récupérer et de rendre du Markdown à partir d'une API distante lorsque vous compilez votre site web (ou lorsqu'un utilisateur fait une demande sur votre site web, en utilisant le [SSR](/fr/guides/server-side-rendering/)).
+**Astro n'inclut pas de support intégré pour le Markdown à distance en dehors des [collections de contenu expérimentales](/fr/reference/configuration-reference/#experimentalcontentlayer)!**.
-**Astro ne comprend pas de support intégré pour le Markdown à distance !** Pour récupérer un fichier Markdown distant et le rendre au format HTML, vous devrez installer et configurer votre propre parser Markdown à partir de npm. Celui-ci **n'héritera pas** des paramètres intégrés Markdown et MDX d'Astro que vous avez configurés. Assurez-vous de bien comprendre ces limitations avant de l'intégrer à votre projet.
+Pour récupérer directement du Markdown distant et l'afficher en HTML, vous devrez installer et configurer votre propre analyseur Markdown à partir de NPM. Celui-ci **n'héritera pas** des paramètres Markdown intégrés d'Astro que vous avez configurés.
+
+Assurez-vous de bien comprendre ces limitations avant d'implémenter ceci dans votre projet, et envisagez de récupérer votre Markdown distant en utilisant un chargeur de collections de contenu à la place.
```astro title="src/pages/remote-example.astro"
---
-// Exemple : Récupérer du Markdown à partir d'une API distante
-// et le rendre en HTML au moment de l'exécution.
-// En utilisant "marked" (https://github.com/markedjs/marked)
+// Exemple : Récupérer du Markdown à partir d'une API distante
+// et l'afficher en HTML, au moment de l'exécution.
+En utilisant « marked » (https://github.com/markedjs/marked)
import { marked } from 'marked';
const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md');
const markdown = await response.text();
@@ -687,3 +435,62 @@ const content = marked.parse(markdown);
---
```
+
+## Pages Markdown individuelles
+
+Astro traite [tout fichier supporté dans le répertoire `/src/pages/`](/fr/basics/astro-pages/#fichiers-de-page-pris-en-charge) comme une page, y compris `.md` et d'autres types de fichiers Markdown.
+
+Placer un fichier dans ce répertoire, ou n'importe quel sous-répertoire, construira automatiquement une route de page en utilisant le nom de chemin du fichier et affichera le contenu Markdown affiché en HTML.
+
+```markdown title="src/pages/page-1.md"
+---
+titre: Bonjour, le monde
+---
+
+# Bonjour !
+
+Ce fichier Markdown crée une page à `votre-domaine.com/page-1/`
+
+Il n'est probablement pas très stylé, mais Markdown prend en charge :
+- **gras** et _italique_.
+- listes
+- [liens](https://astro.build)
+-
éléments HTML
+- et bien d'autres choses encore !
+```
+
+Les [collections de contenu](/fr/guides/content-collections/) et [l'importation de Markdown dans les composants `.astro`](#expressions-dynamiques-de-type-jsx) fournissent plus de fonctionnalités pour afficher votre Markdown et sont la manière recommandée de gérer la plupart de vos contenus. Cependant, il peut arriver que vous souhaitiez ajouter un fichier à `src/pages/` et qu'une simple page soit automatiquement créée pour vous.
+
+### Propriété `layout` du frontmatter
+
+Pour aider avec la fonctionnalité limitée des pages Markdown, Astro fournit une propriété frontmatter `layout` spéciale qui est un chemin relatif vers un [composant de mise en page Markdown](/fr/basics/layouts/#mises-en-page-markdown). Si votre fichier Markdown est situé dans `src/pages/`, créez un composant de mise en page et ajoutez-le dans cette propriété de mise en page pour fournir une enveloppe de page autour de votre contenu Markdown.
+
+```markdown title="src/pages/posts/post-1.md" {2}
+---
+layout: ../../layouts/BlogPostLayout.astro
+title: Astro en bref
+author: Himanshu
+description: Découvrez ce qui rend Astro génial !
+---
+Il s'agit d'un article rédigé en Markdown.
+```
+
+Ce composant de mise en page est un composant Astro normal avec [des propriétés spécifiques automatiquement disponibles](/fr/basics/layouts/#propriétés-de-mise-en-page-markdown) à travers `Astro.props` pour votre modèle Astro. Par exemple, vous pouvez accéder aux propriétés du frontmatter de votre fichier Markdown via `Astro.props.frontmatter` :
+
+```astro title="src/layouts/BlogPostLayout.astro" /frontmatter(?:.\w+)?/
+---
+const {frontmatter} = Astro.props;
+---
+
+
+
{frontmatter.title}
+
Post author: {frontmatter.author}
+
{frontmatter.description}
+
+
+
+```
+
+Vous pouvez également [styliser votre Markdown](/fr/guides/styling/#style-markdown) dans votre composant de mise en page.
+
+En savoir plus sur les [Mises en page Markdown](/fr/basics/layouts/#mises-en-page-markdown).
diff --git a/src/content/docs/fr/guides/upgrade-to/v3.mdx b/src/content/docs/fr/guides/upgrade-to/v3.mdx
index e090cf8e9e659..42fe26001e050 100644
--- a/src/content/docs/fr/guides/upgrade-to/v3.mdx
+++ b/src/content/docs/fr/guides/upgrade-to/v3.mdx
@@ -163,7 +163,7 @@ import Markdown from '@astrojs/markdown-component';
Pour continuer à utiliser un composant `` similaire dans votre code, envisagez d'utiliser les [intégrations communautaires](https://astro.build/integrations/) comme [`astro-remote`](https://github.com/natemoo-re/astro-remote). Assurez-vous de mettre à jour vos importations et attributs de composants `` si nécessaire, conformément à la propre documentation de l'intégration.
-Sinon, supprimez toutes les références d'importation du composant `` d'Astro et du composant lui-même dans vos fichiers `.astro`. Vous devrez réécrire votre contenu directement au format HTML ou [importer Markdown](/fr/guides/markdown-content/#importer-du-contenu-markdown) à partir d'un fichier `.md`.
+Sinon, supprimez toutes les références d'importation du composant `` d'Astro et du composant lui-même dans vos fichiers `.astro`. Vous devrez réécrire votre contenu directement au format HTML ou [importer Markdown](/fr/guides/markdown-content/#importation-de-markdown) à partir d'un fichier `.md`.
### Supprimé : API obsolètes de la v1.x
diff --git a/src/content/docs/fr/recipes/reading-time.mdx b/src/content/docs/fr/recipes/reading-time.mdx
index 4856aeb1ef75d..cc41a1cdeebfe 100644
--- a/src/content/docs/fr/recipes/reading-time.mdx
+++ b/src/content/docs/fr/recipes/reading-time.mdx
@@ -100,7 +100,7 @@ Créez un [plugin remark](https://github.com/remarkjs/remark) qui ajoute une pro
```
- Si vous utilisez une [mise en page Markdown](/fr/guides/markdown-content/#pages-markdown-et-mdx), utilisez la propriété `minutesRead` du frontmatter de `Astro.props` dans votre template.
+ Si vous utilisez une [mise en page Markdown](/fr/basics/layouts/#mises-en-page-markdown), utilisez la propriété `minutesRead` du frontmatter de `Astro.props` dans votre template.
```astro title="src/layouts/BlogLayout.astro" "const { minutesRead } = Astro.props.frontmatter;" "
{minutesRead}
"
---
diff --git a/src/content/docs/fr/reference/api-reference.mdx b/src/content/docs/fr/reference/api-reference.mdx
index a8d4e2cf3a01c..7183c3b99d09f 100644
--- a/src/content/docs/fr/reference/api-reference.mdx
+++ b/src/content/docs/fr/reference/api-reference.mdx
@@ -1679,7 +1679,7 @@ Une fonction pour compiler un document Markdown ou MDX donné à afficher. Cela
- `` - Un composant utilisé pour restituer le contenu du document dans un fichier Astro.
- `headings` - Une liste générée de titres, [reflétant l'utilitaire `getHeadings()` d'Astro](/fr/guides/markdown-content/#propriétés-disponibles) sur les importations Markdown et MDX.
-- `remarkPluginFrontmatter` - L'objet frontmatter modifié après [l'application de plugins Remark or Rehype](/fr/guides/markdown-content/#modifier-le-frontmatter-par-un-programme). Définit sur le type `any`.
+- `remarkPluginFrontmatter` - L'objet frontmatter modifié après [l'application de plugins Remark or Rehype](/fr/guides/markdown-content/#modification-programmatique-du-frontmatter). Définit sur le type `any`.
```astro
---
diff --git a/src/content/docs/fr/reference/errors/invalid-frontmatter-injection-error.mdx b/src/content/docs/fr/reference/errors/invalid-frontmatter-injection-error.mdx
index 11fa794d9eef5..7fe74980ce0ac 100644
--- a/src/content/docs/fr/reference/errors/invalid-frontmatter-injection-error.mdx
+++ b/src/content/docs/fr/reference/errors/invalid-frontmatter-injection-error.mdx
@@ -12,4 +12,4 @@ Un plugin remark ou rehype a tenté d'injecter du frontmatter invalide. Cela se
**Voir aussi :**
-- [Modifier le frontmatter par un programme](/fr/guides/markdown-content/#modifier-le-frontmatter-par-un-programme)
+- [Modifier le frontmatter par un programme](/fr/guides/markdown-content/#modification-programmatique-du-frontmatter)