From 63f7beeecbf0eb144f74095d8a400bbc96a28c81 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 11 Mar 2026 19:42:43 +0100 Subject: [PATCH 01/11] i18n(fr): update `modules/astro-content.mdx` See #12322 --- .../fr/reference/modules/astro-content.mdx | 452 ++++++++++++++++-- 1 file changed, 401 insertions(+), 51 deletions(-) diff --git a/src/content/docs/fr/reference/modules/astro-content.mdx b/src/content/docs/fr/reference/modules/astro-content.mdx index 5bbf5c9aee00f..6e17384a5839b 100644 --- a/src/content/docs/fr/reference/modules/astro-content.mdx +++ b/src/content/docs/fr/reference/modules/astro-content.mdx @@ -12,20 +12,30 @@ import ReadMore from '~/components/ReadMore.astro';

-Les collections de contenu proposent des API pour configurer et interroger vos documents Markdown ou MDX dans `src/content/`. Pour connaître les fonctionnalités et les exemples d'utilisation, [consultez notre guide sur les collections de contenu](/fr/guides/content-collections/). +Les collections de contenu générées au moment de la compilation offrent des API permettant de configurer, d'interroger et d'effectuer le rendu de vos fichiers Markdown, MDX, Markdoc, YAML, TOML ou JSON locaux, ainsi que du contenu distant. + +

+ +Les collections de contenu en direct offrent des API permettant de configurer, d'interroger et d'afficher des données en direct, actualisées en temps réel, provenant de sources distantes. + +Pour les fonctionnalités et des exemples d'utilisation, [consultez notre guide sur les collections de contenu](/fr/guides/content-collections/). ## Importations depuis `astro:content` ```js -import { +import { defineCollection, + defineLiveCollection, getCollection, + getLiveCollection, getEntry, + getLiveEntry, getEntries, reference, render - } from 'astro:content'; +} from 'astro:content'; ``` + ### `defineCollection()`

@@ -34,11 +44,11 @@ import {

-`defineCollection()` est un utilitaire pour configurer une collection dans un fichier `src/content.config.*`. +Un utilitaire pour configurer une collection dans un fichier `src/content.config.*`. ```ts title="src/content.config.ts" -import { defineCollection } from "astro:content"; -import { z } from "astro/zod"; +import { defineCollection } from 'astro:content'; +import { z } from 'astro/zod'; import { glob } from 'astro/loaders'; const blog = defineCollection({ @@ -50,7 +60,7 @@ const blog = defineCollection({ }); // Exposez votre collection définie à Astro -// avec l'exportation `collections` +// avec l'exportation de `collections` export const collections = { blog }; ``` @@ -64,9 +74,9 @@ Cette fonction accepte les propriétés suivantes :

-Un `loader` est soit un objet, soit une fonction qui vous permet de charger des données à partir de n'importe quelle source, locale ou distante, dans des collections de contenu. +Un objet ou une fonction permettant de charger des données depuis n'importe quelle source, locale ou distante, dans une collection de contenu générée lors de la compilation. (Pour les collections en direct, consultez la propriété [`loader` pour les chargeurs en direct](#loader-1).) -[Consultez le guide « Collection de contenu »](/fr/guides/content-collections/#définir-le-chargeur-de-collection-loader) pour un exemple d'utilisation. +Découvrez les [chargeurs de collections au moment de la compilation](/fr/guides/content-collections/#build-time-collection-loaders) avec des explications guidées et des exemples d'utilisation. #### `schema` @@ -76,26 +86,79 @@ Un `loader` est soit un objet, soit une fonction qui vous permet de charger des

-`schema` est un objet Zod facultatif pour configurer le type et la forme du document pour une collection. Chaque valeur doit utiliser [un validateur Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants). +Un objet, ou une fonction Zod, optionnel qui renvoie un objet Zod pour configurer le type et la structure des métadonnées d'un document pour une collection. Chaque valeur doit utiliser un validateur Zod. (Pour les collections en direct, consultez la propriété `schema` des collections en direct.) + +Découvrez la [définition d'un schéma de collection](/fr/guides/content-collections/#définition-dun-schéma-de-collection) à l'aide de Zod avec des explications guidées, des exemples d'utilisation et des types de données courants. + +### `defineLiveCollection()` + +

+ +**Type :** `(config: LiveCollectionConfig) => LiveCollectionConfig` + +

+ +Un utilitaire permettant de configurer une collection en direct dans un fichier `src/live.config.*`. + +```ts title="src/live.config.ts" +import { defineLiveCollection } from 'astro:content'; +import { storeLoader } from '@example/astro-loader'; + +const produits = defineLiveCollection({ + loader: storeLoader({ + apiKey: process.env.STORE_API_KEY, + endpoint: 'https://api.example.com/v1', + }), +}); + +// Exposez votre collection définie à Astro +// avec l'exportation de `collections` +export const collections = { produits }; +``` + +Cette fonction accepte les propriétés suivantes : + +#### `loader` + +

+ +**Type :** `LiveLoader` + +

+ +Un objet permettant de charger des données à l'exécution depuis une source distante dans une collection de contenu en direct. (Pour les collections générées lors de la compilation, voir la propriété [`loader` pour les chargeurs au moment de la compilation](#loader).) -[Consultez le guide Collections de contenu](/fr/guides/content-collections/#définition-dun-schéma-de-collection) pour un exemple d'utilisation. +Apprenez comment [créer un chargeur en direct](/fr/guides/content-collections/#creating-a-live-loader) avec des explications guidées et des exemples d'utilisation. + +#### `schema` + +

+ +**Type :** ZodType + +

+ +Un objet Zod optionnel permet de configurer le type et la structure de vos données pour une collection en direct. Chaque valeur doit utiliser un validateur Zod. (Pour les collections générées au moment de la compilation, consultez la propriété [`schema` des collections générées au moment de la compilation](#schema).) + +Lorsque vous définissez un schéma, celui-ci aura la priorité sur les [types du chargeur en direct](/fr/reference/content-loader-reference/#live-loader-api) lorsque vous interrogez la collection. + +Apprenez à [utiliser les schémas Zod avec les collections en direct](/fr/guides/content-collections/#using-zod-schemas-with-live-collections) grâce à des explications guidées et des exemples d'utilisation. ### `reference()`

-**Type :** `(collection: string) => ZodEffects`
+**Type :** (collection: CollectionKey) => ZodEffects\

-La fonction `reference()` est utilisée dans la configuration du contenu pour définir une relation, ou « référence », entre une collection et une autre. Elle accepte un nom de collection et transforme la référence en un objet contenant le nom de la collection et l'identifiant de référence. - +Une fonction utilisée dans la configuration du contenu pour définir une relation, ou « référence », entre une collection et une autre. Elle accepte un nom de collection et transforme la référence en un objet contenant le nom de la collection et l'identifiant de référence. Cet exemple définit les références d'un auteur de blog à la collection `authors` et un tableau d'articles associés à la même collection `blog` : ```ts -import { defineCollection, reference } from "astro:content"; -import { z } from "astro/zod"; +import { defineCollection, reference } from 'astro:content'; +import { z } from 'astro/zod'; import { glob, file } from 'astro/loaders'; const blog = defineCollection({ @@ -115,6 +178,7 @@ const authors = defineCollection({ export const collections = { blog, authors }; ``` + La validation des entrées référencées se produit au moment de l'exécution lors de l'utilisation de `getEntry()` ou `getEntries()` : ```astro title="src/pages/[posts].astro" @@ -122,25 +186,25 @@ La validation des entrées référencées se produit au moment de l'exécution l const relatedPosts = await getEntries(blogPost.data.relatedPosts); ``` -[Consultez le guide Collections de contenu](/fr/guides/content-collections/#définition-des-références-de-collection) pour un exemple d'utilisation. +Apprenez à [définir et utiliser les références de collection](/fr/guides/content-collections/#définition-des-références-de-collection) grâce à des explications guidées et des exemples d'utilisation. ### `getCollection()`

-**Type :** `(collection: string, filter?: (entry: CollectionEntry) => boolean) => CollectionEntry[]` +**Type :** (collection: CollectionKey, filter?: (entry: CollectionEntry) => boolean) => CollectionEntry[]

-`getCollection()` est une fonction qui récupère une liste d'entrées de collection de contenu par nom de collection. +Une fonction qui récupère une liste d'entrées de collection de contenu par nom de collection. Elle renvoie tous les éléments de la collection par défaut et accepte une fonction facultative `filter` pour affiner les propriétés d'entrée. Cela vous permet d'interroger uniquement certains éléments d'une collection en fonction de `id` ou des valeurs du frontmatter via l'objet `data`. -```astro +```astro title="src/pages/blog/index.astro" --- import { getCollection } from 'astro:content'; -// Récupère toutes les entrées `src/content/blog/` +// Récupère toutes les entrées `src/data/blog/` const allBlogPosts = await getCollection('blog'); // Ne renvoie que les messages avec `draft: true` dans le frontmatter @@ -150,21 +214,47 @@ const draftBlogPosts = await getCollection('blog', ({ data }) => { --- ``` -[Consultez le guide Collections de contenu](/fr/guides/content-collections/#interroger-les-collections) pour un exemple d'utilisation. +Apprenez à [interroger les collections générées au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections) avec des explications guidées et des exemples d'utilisation. + +### `getLiveCollection()` + +

+ +**Type :** (collection: string, filter?: LiveLoaderCollectionFilterType) => Promise\<LiveDataCollectionResult\> + +

+ +Une fonction qui récupère la liste des entrées de collection de contenu en direct par nom de collection. + +Elle renvoie par défaut tous les éléments de la collection et accepte un objet `filter` optionnel dont la structure est définie par le chargeur de la collection. Cela vous permet d'interroger uniquement certains éléments d'une collection ou de récupérer des données sous un format différent, selon les capacités de votre API. + +```astro title="src/pages/boutique/index.astro" +--- +import { getLiveCollection } from 'astro:content'; + +// Récupérer toutes les entrées de produits depuis votre API +const { entries: allProducts } = await getLiveCollection('produits'); + +// Ne renvoyer que les produits qui devraient être mis en avant. +const { entries: featuredProducts } = await getLiveCollection('produits', { featured: true }); +--- +``` + +Apprenez comment [accéder aux données des collections en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. ### `getEntry()`

-**Types :** -* `(collection: string, id: string) => Promise | undefined>` -* `({ collection: string, id: string }) => Promise | undefined>` +**Types :** +* (collection: CollectionKey, id: string) => Promise\<CollectionEntry | undefined\> +* (\{ collection: CollectionKey, id: string \}) => Promise\<CollectionEntry | undefined\>

-`getEntry()` est une fonction qui récupère une seule entrée de collection par nom de collection et l'entrée `id`. `getEntry()` peut également être utilisée pour obtenir des entrées référencées pour accéder aux propriétés `data` ou `body` : +Une fonction qui récupère une seule entrée de collection par nom de collection et l'entrée `id`. `getEntry()` peut également être utilisée pour obtenir des entrées référencées pour accéder aux propriétés `data` ou `body` : -```astro +```astro title="src/pages/index.astro" --- import { getEntry } from 'astro:content'; @@ -179,19 +269,43 @@ const enterpriseCaptainProfile = await getEntry(enterprisePost.data.captain); --- ``` -Consultez le guide Collections de contenu pour des exemples d'[interrogation des entrées de collection](/fr/guides/content-collections/#interroger-les-collections). +Apprenez-en davantage sur [l'interrogation des collections au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections) grâce à des explications guidées et des exemples d'utilisation. + +### `getLiveEntry()` + +

+ +**Type :** (collection: string, filter: string | LiveLoaderEntryFilterType) => Promise\<LiveDataEntryResult\> + +

+ +Une fonction qui récupère une seule entrée de collection en direct par nom de collection et un filtre facultatif, soit sous forme de chaîne de caractères correspondant à l'`id`, soit sous forme d'objet avec sûreté du typage. + +```astro title="src/pages/blog/[id].astro" +--- +import { getLiveEntry } from 'astro:content'; + +const { entry: liveCollectionsPost } = await getLiveEntry('blog', Astro.params.id); +const { entry: mattDraft } = await getLiveEntry('blog', { + status: 'draft', + author: 'matt', +}); +--- +``` + +Apprenez comment [accéder aux données des collections en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. ### `getEntries()`

-**Type :** `(Array<{ collection: string, id: string }>) => Array>` +**Type :** (\{ collection: CollectionKey, id: string \}[]) => CollectionEntry[]

-`getEntries()` est une fonction qui récupère plusieurs entrées dans une même collection. Ceci est utile pour [renvoyer un tableau d'entrées référencées](/fr/guides/content-collections/#définition-des-références-de-collection) afin d'accéder à leurs propriétés associées `data` et `body`. +Une fonction qui récupère plusieurs entrées dans une même collection. Ceci est utile pour [renvoyer un tableau d'entrées référencées](/fr/guides/content-collections/#définition-des-références-de-collection) afin d'accéder à leurs propriétés associées `data` et `body`. -```astro +```astro title="src/pages/blog/enterprise/index.astro" --- import { getEntries, getEntry } from 'astro:content'; @@ -206,7 +320,7 @@ const enterpriseRelatedPosts = await getEntries(enterprisePost.data.relatedPosts

-**Type :** `(entry: CollectionEntry) => Promise` +**Type :** (entry: CollectionEntry) => Promise\

@@ -216,20 +330,20 @@ Une fonction permettant de compiler une entrée donnée pour le rendu. Elle renv - `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 que tous les [modules d'extension Remark ou Rehype ont été appliqués](/fr/guides/markdown-content/#modification-programmatique-du-frontmatter). Définit sur le type `any`. -```astro +```astro title="src/pages/blog/article-1.astro" --- import { getEntry, render } from 'astro:content'; -const entry = await getEntry('blog', 'entry-1'); +const entry = await getEntry('blog', 'article-1'); if (!entry) { // Gérer l'erreur, par exemple : - throw new Error('Could not find blog post 1'); + throw new Error("Impossible de trouver l'article de blog 1"); } const { Content, headings, remarkPluginFrontmatter } = await render(entry); --- ``` -[Consultez le guide collections de contenu](/fr/guides/content-collections/#restitution-du-contenu) pour un exemple d'utilisation. +Apprenez comment [restituer le contenu des entrées](/fr/guides/content-collections/#restitution-du-contenu) avec des explications guidées et des exemples d'utilisation. ## Types d'`astro:content` @@ -237,10 +351,8 @@ const { Content, headings, remarkPluginFrontmatter } = await render(entry); import type { CollectionEntry, CollectionKey, - ContentCollectionKey, - DataCollectionKey, SchemaContext, - } from 'astro:content'; +} from 'astro:content'; ``` ### `CollectionEntry` @@ -251,47 +363,81 @@ Les fonctions de requête, notamment [`getCollection()`](#getcollection), [`getE import type { CollectionEntry } from 'astro:content'; ``` -`CollectionEntry` est un type générique. Utilisez-le avec le nom de la collection que vous interrogez. +Un type générique à utiliser avec le nom de la collection interrogée pour représenter une entrée unique de cette collection. Par exemple, une entrée de votre collection `blog` aurait le type `CollectionEntry<'blog'>`. Chaque `CollectionEntry` est un objet avec les valeurs suivantes : -#### `id` +#### `CollectionEntry.id` + +

**Type :** `string` +

Un identifiant unique. Notez que tous les identifiants du chargeur `glob()` intégré d'Astro sont transformés en slug. -#### `collection` +#### `CollectionEntry.collection` -**Exemple de type :** `'blog' | 'authors' | ...` +

+ +**Type :** [`CollectionKey`](#collectionkey) +

Le nom d'une collection dans laquelle se trouvent les entrées. Il s'agit du nom utilisé pour référencer la collection dans votre schéma et dans les fonctions de requête. -#### `data` +#### `CollectionEntry.data` + +

**Type :** `CollectionSchema` +

Un objet de propriétés provenant du frontmatter et déduit de votre schéma de collection ([voir la référence `defineCollection()`](#definecollection)). La valeur par défaut est `any` si aucun schéma n'est configuré. -#### `body` +#### `CollectionEntry.body` + +

**Type :** `string | undefined` +

Une chaîne de caractères contenant le corps brut et non compilé du document Markdown ou MDX. Notez que si [`retainBody`](/fr/reference/content-loader-reference/#retainbody) est défini sur `false`, cette valeur sera `undefined` au lieu de contenir le contenu brut du fichier. +#### `CollectionEntry.rendered` + +

+ +**Type :** `RenderedContent | undefined` +

+ +Le contenu rendu d'une entrée tel qu'[enregistré par votre chargeur](/fr/reference/content-loader-reference/#dataentryrendered). Par exemple, il peut s'agir du contenu rendu d'une entrée Markdown ou de code HTML provenant d'un CMS. + +#### `CollectionEntry.filePath` + +

+ +**Type :** `string | undefined` +

+ +Le chemin d'accès à une entrée relative à votre répertoire de projet. Cette valeur n'est disponible que pour les entrées locales. + ### `CollectionKey` -

+

+ +**Exemple de type :** `'blog' | 'authors' | ...`
+ +

Une union de chaînes de caractères de tous les noms de collections définis dans votre fichier `src/content.config.*`. Ce type peut être utile lors de la définition d'une fonction générique enveloppant la fonction intégrée `getCollection()`. -```ts +```ts title="src/utils/collections.ts" import { type CollectionKey, getCollection } from 'astro:content'; -async function queryCollection(collection: CollectionKey) { +export async function queryCollection(collection: CollectionKey) { return getCollection(collection, ({ data }) => { return data.draft !== true; }); @@ -306,9 +452,10 @@ Il inclut la propriété suivante : - `image` - L'assistant de schéma `image()` qui vous permet [d'utiliser des images locales dans les collections de contenu](/fr/guides/images/#images-dans-les-collections-de-contenu) -```ts +```ts title="src/content.config.ts" "SchemaContext" {5-9,13,16} import { defineCollection, type SchemaContext } from "astro:content"; -import { z } from "astro/zod"; +import { z } from 'astro/zod'; +import { glob } from 'astro/loaders'; export const imageSchema = ({ image }: SchemaContext) => z.object({ @@ -317,7 +464,7 @@ export const imageSchema = ({ image }: SchemaContext) => }); const blog = defineCollection({ - loader: /* ... */, + loader: glob({ pattern: '**/*.md', base: './src/data/blog' }), schema: ({ image }) => z.object({ title: z.string(), permalink: z.string().optional(), @@ -325,3 +472,206 @@ const blog = defineCollection({ }), }); ``` + +## Types d'`astro` + +```ts +import type { + LiveDataCollectionResult, + LiveDataEntryResult, +} from "astro"; +``` + +### `LiveDataCollectionResult` + +

+ +**Type :** \{ entries?: Array\<LiveDataEntry\\>; error?: TError | LiveCollectionError; cacheHint?: CacheHint; \}
+ +

+ +Un objet renvoyé par [`getLiveCollection()`](#getlivecollection) contenant les données récupérées par le chargeur en direct. Il possède les propriétés suivantes : + +#### `LiveDataCollectionResult.entries` + +

+ +**Type :** Array\<LiveDataEntry\\> | undefined +

+ +Un tableau d'objets [`LiveDataEntry`](/fr/reference/content-loader-reference/#livedataentry) renvoyés par le chargeur. + +L'exemple suivant accède aux entrées renvoyées par une collection en direct nommée `produits` : + +```astro title="src/pages/boutique/index.astro" +--- +import { getLiveCollection } from 'astro:content'; + +const { entries: allProducts } = await getLiveCollection('produits'); +--- +``` + +Apprenez comment [accéder aux données en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. + +#### `LiveDataCollectionResult.error` + +

+ +**Type :** `TError | LiveCollectionError | undefined` +

+ +Une erreur renvoyée lorsque le chargeur n'a pas pu charger la collection. Il peut s'agir d'une erreur personnalisée définie par le chargeur ou d'une erreur intégrée. + +L'exemple suivant accède à l'erreur renvoyée lors de la récupération de données à partir d'une collection en direct nommée `produits` : + +```astro title="src/pages/boutique/index.astro" +--- +import { getLiveCollection } from 'astro:content'; + +const { error } = await getLiveCollection('produits'); +--- +``` + +Apprenez-en davantage sur la [gestion des erreurs](/fr/guides/content-collections/#error-handling) grâce à des explications guidées et des exemples d'utilisation. + +#### `LiveDataCollectionResult.cacheHint` + +

+ +**Type :** CacheHint | undefined +

+ +Un objet fournissant des instructions sur la manière de mettre en cache cette collection. + +Si vous avez activé la [mise en cache expérimentale des routes](/fr/reference/experimental-flags/route-caching/), transmettez directement l'indication de cache à `Astro.cache.set()` : + +```astro title="src/pages/boutique/index.astro" +--- +import { getLiveCollection } from 'astro:content'; +export const prerender = false; // Pas nécessaire en mode `server` + +const { cacheHint } = await getLiveCollection('produits'); + +if (cacheHint) { + Astro.cache.set(cacheHint); +} +Astro.cache.set({ maxAge: 600 }); +--- +``` + +Vous pouvez également utiliser les indications de cache pour définir manuellement les en-têtes de réponse : + +```astro title="src/pages/boutique/index.astro" +--- +import { getLiveCollection } from 'astro:content'; + +const { cacheHint } = await getLiveCollection('produits'); + +if (cacheHint?.tags) { + Astro.response.headers.set('Cache-Tag', cacheHint.tags.join(',')); +} +if (cacheHint?.lastModified) { + Astro.response.headers.set('Last-Modified', cacheHint.lastModified.toUTCString()); +} +--- +``` + +### `LiveDataEntryResult` + +

+ +**Type :** \{ entry?: LiveDataEntry\; error?: TError | LiveCollectionError; cacheHint?: CacheHint; }
+ +

+ +Un objet renvoyé par [`getLiveEntry()`](#getliveentry) contenant les données récupérées par le chargeur en direct. Il possède les propriétés suivantes : + +#### `LiveDataEntryResult.entry` + +

+ +**Type :** LiveDataEntry\ | undefined +

+ +L'objet [`LiveDataEntry`](/fr/reference/content-loader-reference/#livedataentry) renvoyé par le chargeur. + +L'exemple suivant accède à l'entrée demandée dans une collection en direct nommée `produits` : + +```astro title="src/pages/boutique/[id].astro" +--- +import { getLiveEntry } from 'astro:content'; + +const { entry } = await getLiveEntry('produits', Astro.params.id); +--- +``` + +Apprenez comment [accéder aux données en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. + +#### `LiveDataEntryResult.error` + +

+ +**Type :** `TError | LiveCollectionError | undefined` +

+ +Une erreur renvoyée lorsque le chargeur n'a pas pu charger l'entrée. Il peut s'agir d'une erreur personnalisée définie par le chargeur ou d'une erreur intégrée. + +L'exemple suivant accède à l'entrée demandée dans une collection en direct nommée `produits` et à toute erreur, et redirige vers la page 404 si une erreur existe : + +```astro title="src/pages/boutique/[id].astro" +--- +import { getLiveEntry } from 'astro:content'; + +const { entry, error } = await getLiveEntry('produits', Astro.params.id); + +if (error) { + return Astro.redirect('/404'); +} +--- +

{entry.data.name}

+``` + +Apprenez-en davantage sur la [gestion des erreurs](/fr/guides/content-collections/#error-handling) grâce à des explications guidées et des exemples d'utilisation. + +#### `LiveDataEntryResult.cacheHint` + +

+ +**Type :** CacheHint | undefined +

+ +Un objet fournissant des données pouvant servir à définir une stratégie de mise en cache. + +Si vous avez activé la [mise en cache expérimentale des routes](/fr/reference/experimental-flags/route-caching/), transmettez directement l'indication de cache à `Astro.cache.set()` : + +```astro title="src/pages/boutique/[id].astro" +--- +import { getLiveEntry } from 'astro:content'; + +export const prerender = false; // Pas nécessaire en mode `server` + +const { cacheHint } = await getLiveEntry('produits', Astro.params.id); + +if (cacheHint) { + Astro.cache.set(cacheHint); +} +Astro.cache.set({ maxAge: 300 }); +--- +``` + +Vous pouvez également utiliser les indications de cache pour définir manuellement les en-têtes de réponse : + +```astro title="src/pages/boutique/[id].astro" +--- +import { getLiveEntry } from 'astro:content'; + +const { cacheHint } = await getLiveEntry('produits', Astro.params.id); + +if (cacheHint?.tags) { + Astro.response.headers.set('Cache-Tag', cacheHint.tags.join(',')); +} +if (cacheHint?.lastModified) { + Astro.response.headers.set('Last-Modified', cacheHint.lastModified.toUTCString()); +} +--- +``` From 72705eb0da123663d6ac1a855a289a47901b8445 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 12 Mar 2026 16:40:16 +0100 Subject: [PATCH 02/11] i18n(fr): update `guides/content-collections.mdx` --- .../docs/fr/guides/content-collections.mdx | 804 ++++++++++++------ 1 file changed, 549 insertions(+), 255 deletions(-) diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index 28108dba1f79d..20f808fcbd5d1 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -1,8 +1,11 @@ --- -title: Collections de contenus +title: Collections de contenu description: >- Gérez votre contenu avec la sûreté du typage. i18nReady: true +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 3 --- import { FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components'; import Since from '~/components/Since.astro' @@ -12,18 +15,13 @@ import ReadMore from "~/components/ReadMore.astro"

-**Les collections de contenu** sont le meilleur moyen de gérer des ensembles de contenu dans n'importe quel projet Astro. Les collections aident à organiser et à interroger vos documents, à activer Intellisense et la vérification de type dans votre éditeur et à fournir une sûreté du typage TypeScript automatique pour tout votre contenu. -Astro v5.0 a introduit l'API de couche de contenu pour définir et interroger les collections de contenu. Cette API performante et évolutive fournit des chargeurs de contenu intégrés pour vos collections locales. Pour le contenu distant, vous pouvez utiliser des chargeurs tiers et créés par la communauté ou créer votre propre chargeur personnalisé et extraire vos données à partir de n'importe quelle source. +Les **collections de contenu** sont la meilleure façon de gérer des ensembles de contenu dans n'importe quel projet Astro : articles de blog, descriptions de produits, pages de profil, recettes ou tout autre contenu structuré. Les collections permettent d'organiser et d'interroger vos documents, activent l'IntelliSense et la vérification des types dans votre éditeur, et fournit automatiquement la sûreté du typage TypeScript pour l'ensemble de votre contenu. -:::note -Les projets peuvent continuer à utiliser l'API de collections de contenu héritée introduite dans Astro v2.0. Cependant, nous vous encourageons à [mettre à jour les collections existantes](/fr/guides/upgrade-to/v5/#héritage--api-des-collections-de-contenu-de-la-v20) lorsque vous le pouvez. -::: +Astro fournit des API performantes et évolutives pour charger, interroger et restituer du contenu provenant de n'importe quelle source : stocké localement dans votre projet, hébergé à distance ou récupéré en direct à partir de sources fréquemment mises à jour. ## Que sont les collections de contenu ? -Vous pouvez définir une **collection** à partir d'un ensemble de données structurellement similaires. Il peut s'agir d'un répertoire d'articles de blog, d'un fichier JSON de produits ou de toute donnée représentant plusieurs éléments de la même forme. - -Les collections stockées localement dans votre projet ou sur votre système de fichiers peuvent contenir des entrées de fichiers Markdown, MDX, Markdoc, YAML, TOML ou JSON : +Une collection de contenu est un ensemble de données liées et structurellement identiques. Ces données peuvent être stockées localement dans un ou plusieurs fichiers (par exemple, un dossier contenant des fichiers Markdown d'articles de blog, un fichier JSON unique de descriptions de produits) ou récupérées depuis des sources distantes telles qu'une base de données, un CMS ou un point de terminaison d'API. Chaque élément de la collection est appelé une entrée. - src/ @@ -35,32 +33,103 @@ Les collections stockées localement dans votre projet ou sur votre système de - authors.json un fichier unique contenant toutes les entrées de la collection -Avec un chargeur de collection approprié, vous pouvez récupérer des données distantes à partir de n'importe quelle source externe, telle qu'un CMS, une base de données ou un système de paiement headless. +Les collections sont définies par l'emplacement et la structure de leurs entrées et offrent un moyen pratique d'interroger et de restituer votre contenu et les métadonnées associées. Vous pouvez créer une collection dès lors que vous disposez d'un groupe de données ou de contenus liés, stockés au même emplacement et partageant une structure commune. + +[Deux types de collections de contenu](#types-de-collections) sont disponibles pour vous permettre de travailler avec des données récupérées soit au moment de la compilation, soit au moment de la requête. Les collections créées au moment de la compilation et les collections mises à jour en direct utilisent toutes deux : + +- Un `loader` obligatoire pour récupérer votre contenu et vos métadonnées depuis leur emplacement de stockage et les mettre à disposition de votre projet via des API dédiées au contenu. +- Un schéma de collection optionnel qui vous permet de définir la structure attendue de chaque entrée pour la sûreté du typage, la saisie semi-automatique et la validation dans votre éditeur. + +Les collections stockées localement dans votre projet ou dans votre système de fichiers peuvent utiliser l'un des [chargeurs appelés au moment de la compilation fournis par Astro](#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) pour récupérer des données à partir de fichiers Markdown, MDX, Markdoc, YAML, TOML ou JSON. Indiquez à Astro l'emplacement de votre contenu, définissez la structure de vos données, et vous voilà prêt à lancer un blog ou un site similaire, riche en contenu et principalement statique, en un rien de temps ! + +Avec [des chargeurs créés par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) ou en créant vous-même un [chargeur personnalisé pour les collections générées au moment de la compilation](#chargeurs-personnalisés-au-moment-de-la-compilation) ou un [chargeur en direct](#création-dun-chargeur-en-direct), vous pouvez récupérer des données distantes à partir de n'importe quelle source externe, telle qu'un CMS, une base de données ou un système de paiement headless, soit au moment de la compilation, soit en direct à la demande. + +### Types de collections + +Les [collections de contenu générées au moment de la compilation](#définition-de-collections-de-contenu-générées-au-moment-de-la-compilation) sont mises à jour lors de la génération du site, et les données sont enregistrées dans une couche de stockage. Cette approche offre d'excellentes performances pour la plupart des contenus, mais peut ne pas convenir aux sources de données fréquemment mises à jour qui nécessitent des données actualisées en temps réel, comme les cours boursiers. + +Pour des performances et une évolutivité optimales, utilisez les collections de contenu générées au moment de la compilation lorsqu'une ou plusieurs des conditions suivantes sont remplies : + +- **Les performances sont essentielles** et vous souhaitez effectuer le pré-rendu des données au moment de la compilation. +- **Vos données sont relativement statiques** (par exemple, articles de blog, documentation, descriptions de produits). +- **Vous souhaitez bénéficier de l'optimisation au moment de la compilation** et de la mise en cache. +- **Vous devez traiter les fichiers MDX** ou **effectuer des optimisations pour les images**. +- **Vos données peuvent être récupérées une seule fois et réutilisées** pour plusieurs compilations. + +:::tip[Démarrage rapide] +Consultez [le modèle de démarrage officiel d'Astro pour les blogs](https://github.com/withastro/astro/tree/latest/examples/blog) afin de démarrer rapidement avec un exemple d'utilisation du [chargeur `glob()` intégré](#le-chargeur-glob) et de [définition d'un schéma](#définition-dun-schéma-de-collection) pour une collection d'articles de blog locaux Markdown ou MDX. +::: + +[Les collections de contenu en direct](#collections-de-contenu-en-direct) récupèrent leurs données au moment de l'exécution plutôt qu'au moment de la compilation. Cela vous permet d'accéder à des données fréquemment mises à jour provenant de CMS, d'API, de bases de données ou d'autres sources via une API unifiée, sans avoir à recompiler votre site à chaque modification des données. Cependant, cette approche peut impacter les performances, car les données sont récupérées à chaque requête et renvoyées directement, sans magasin de données persistant. + +Les collections de contenu en direct sont conçues pour les données qui changent fréquemment et qui doivent être à jour lorsqu'une page est demandée. Envisagez de les utiliser lorsqu'une ou plusieurs des conditions suivantes sont remplies : + +- **Vous avez besoin d'informations en temps réel** (par exemple, des données spécifiques à l'utilisateur, les niveaux de stock actuels). +- **Vous souhaitez éviter les recompilations constantes** pour un contenu qui change fréquemment. +- **Vos données sont fréquemment mises à jour** (par exemple, inventaire des produits, prix, disponibilité à la minute près). +- **Vous devez transmettre des filtres dynamiques** à votre source de données en fonction des paramètres saisis par l'utilisateur ou des paramètres de la requête. +- **Vous développez une fonctionnalité de prévisualisation** pour un CMS où les rédacteurs ont besoin de voir immédiatement le contenu en brouillon. + +Les deux types de collections peuvent coexister dans un même projet, ce qui vous permet de choisir le type de collection le plus adapté à chaque source de données. Par exemple, une collection créée au moment de la compilation peut gérer les descriptions de produits, tandis qu'une collection en direct peut gérer l'inventaire du contenu. + +Les deux types de collections utilisent des API similaires (par exemple `getCollection()` et `getLiveCollection()`), de sorte que travailler avec les collections vous semblera familier quel que soit votre choix, tout en vous assurant de toujours savoir avec quel type de collection vous travaillez. + +Nous vous recommandons d'utiliser les collections de contenu générées au moment de la compilation chaque fois que cela est possible, et les collections en direct lorsque votre contenu doit être mis à jour en temps réel et que les compromis en termes de performances sont acceptables. Par ailleurs, les collections dynamiques présentent certaines limitations par rapport aux collections générées lors de la compilation : + +- **Aucune prise en charge MDX** : Le rendu MDX est impossible au moment de l’exécution. +- **Aucune optimisation d'images** : Les images ne peuvent pas être traitées lors de l'exécution. +- **Considérations relatives aux performances** : Les données sont récupérées à chaque requête (sauf si elles sont mises en cache). +- **Aucune persistance des données** : Les données ne sont pas enregistrées dans la base de données de la couche de contenu. + +### Quand créer une collection + +Définissez vos données comme une collection lorsque : + +- Vous avez plusieurs fichiers ou données à organiser qui partagent la même structure globale (par exemple, un répertoire d'articles de blog écrits en Markdown qui ont tous les mêmes propriétés frontmatter). +- Vous disposez de contenu existant stocké à distance, par exemple dans un CMS, et vous souhaitez tirer parti des fonctions d'assistance aux collections au lieu d'utiliser `fetch()` ou des SDK. +- Vous devez récupérer des (dizaines de) milliers de données connexes au moment de la compilation, et vous avez besoin d'une méthode de requête et de mise en cache qui gère à grande échelle. + +La plupart des avantages provenant de l'utilisation des collections viennent : + +- de la définition d'une structure de données commune pour valider qu'une entrée individuelle est « correcte » ou « complète », évitant ainsi les erreurs en production. +- des API axées sur le contenu, conçues pour rendre les requêtes intuitives (par exemple `getCollection()` au lieu de `import.meta.glob()`) lors de l'importation et de la restitution des contenus sur vos pages. +- de l'accès aux chargeurs intégrés et à l'[API des chargeurs de contenu](/fr/reference/content-loader-reference/) de bas niveau pour récupérer votre contenu. Il existe en outre plusieurs chargeurs tiers et développés par la communauté, et vous pouvez créer votre propre chargeur personnalisé pour récupérer des données depuis n'importe où. +- des performances et de l'évolutivité. Les données des collections de contenu générées au moment de la compilation peuvent être mises en cache entre les compilations et conviennent à des dizaines de milliers d'entrées de contenu. + +### Quand ne pas créer de collection + +Les collections offrent une excellente structure, sécurité et organisation lorsque vous avez plusieurs éléments de contenu qui doivent partager les mêmes propriétés. + +Les collections ne sont peut-être pas la solution idéale si : + +- Vous n'avez qu'une seule ou un petit nombre de pages de contenu. Envisagez plutôt de créer des [composants de page individuels](/fr/basics/astro-pages/), comme `src/pages/about.astro`, contenant directement votre contenu. +- Vous affichez des fichiers qui ne sont pas traités par Astro, tels que des PDF. Placez plutôt ces ressources statiques dans le [dossier `public/`](/fr/basics/project-structure/#public) de votre projet. +- Votre source de données possède sa propre bibliothèque SDK/client pour les importations, qui est incompatible avec ou ne propose pas de chargeur de contenu, et vous préférez l'utiliser directement. ## Configuration TypeScript pour les collections -Les collections de contenu s'appuient sur TypeScript pour fournir la validation avec Zod, Intellisense et la vérification de type dans votre éditeur. Si vous n'étendez pas l'un des paramètres TypeScript `strict` ou `strictest` d'Astro, vous devrez vous assurer que `compilerOptions` définisse les options suivantes dans votre fichier `tsconfig.json` : +Les collections de contenu s'appuient sur TypeScript pour fournir la validation avec Zod, Intellisense et la vérification des types dans votre éditeur. Par défaut, Astro configure un [modèle `strict` pour TypeScript](/fr/guides/typescript/#modèles-tsconfig) lorsque vous créez un nouveau projet à l'aide de la commande `create astro` de la CLI. Les modèles `strict` et `strictest` d'Astro incluent tous deux les paramètres TypeScript dont votre projet a besoin pour les collections de contenu. + +Si vous avez modifié ce paramètre en `base` parce que vous n'écrivez pas de TypeScript dans votre projet ou que vous n'utilisez aucun des modèles intégrés d'Astro, vous devrez également ajouter les options `compilerOptions` suivantes dans votre fichier `tsconfig.json` pour utiliser les collections de contenu : -```json title="tsconfig.json" ins={5} {6} +```json title="tsconfig.json" ins={4-7} { - // Inclus avec "astro/tsconfigs/strict" ou "astro/tsconfigs/strictest" "extends": "astro/tsconfigs/base", + // non nécessaire pour `strict` ou `strictest` "compilerOptions": { - "strictNullChecks": true, // ajouter si vous utilisez le modèle `base` - "allowJs": true // requis et inclus avec tous les modèles Astro + "strictNullChecks": true, + "allowJs": true } } ``` -## Définition des collections +## Définition de collections de contenu générées au moment de la compilation -Les collections individuelles utilisent `defineCollection()` pour configurer : -- un chargeur (`loader`) pour une source de données (obligatoire) -- un schéma (`schema`) pour la sûreté du typage (facultatif, mais fortement recommandé !) +Toutes vos collections de contenu au moment de la compilation sont définies dans un fichier spécial `src/content.config.ts` (les extensions `.js` et `.mjs` sont également prises en charge) à l'aide de `defineCollection()`, puis un seul objet de collections est exporté pour être utilisé dans votre projet. -### Le fichier de configuration des collections - -Pour définir des collections, vous devez créer un fichier `src/content.config.ts` dans votre projet (les extensions `.js` et `.mjs` sont également prises en charge). Il s'agit d'un fichier spécial qu'Astro utilisera pour configurer vos collections de contenu en fonction de la structure suivante : +Chaque collection individuelle configure : +- [un chargeur appelé au moment de la compilation (`loader`)](#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) pour une source de données (obligatoire) +- [Un schéma utilisé au moment de la compilation (`schema`)](#définition-dun-schéma-de-collection) pour la sûreté du typage (optionnel, mais fortement recommandé !) ```ts title="src/content.config.ts" // 1. Importer des utilitaires depuis `astro:content` @@ -72,152 +141,203 @@ import { glob, file } from 'astro/loaders'; // 3. Importer Zod import { z } from 'astro/zod'; -// 4. Définir votre/vos collection(s) -const blog = defineCollection({ /* ... */ }); -const dogs = defineCollection({ /* ... */ }); +// 4. Définir un `loader` et un `schema` pour chaque collection +const blog = defineCollection({ + loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }), + schema: z.object({ + title: z.string(), + description: z.string(), + pubDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + }), +}); -// 5. Exporter un seul objet `collections` pour enregistrer votre/vos collection(s) -export const collections = { blog, dogs }; +// 5. Exporter un seul objet `collections` pour enregistrer votre ou vos collections +export const collections = { blog }; ``` -### Définir le chargeur de collection (`loader`) +Vous pouvez ensuite utiliser les fonctions dédiées `getCollection()` et `getEntry()` pour [interroger les données de vos collections de contenu](#interroger-les-collections-créées-au-moment-de-la-compilation) et afficher votre contenu. + +Vous pouvez choisir de [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection au moment de la compilation pour un site entièrement statique et pré-rendu. Vous pouvez également générer vos collections au moment de la compilation, à la demande, en choisissant de retarder la compilation de votre page jusqu'à sa première requête. Cette option est utile lorsque vous avez un grand nombre de pages (par exemple, des milliers ou des dizaines de milliers) et que vous souhaitez différer la génération d'une page statique jusqu'à ce qu'elle soit nécessaire. + +## Chargeurs de collections utilisés au moment de la compilation -L'API de couche de contenu vous permet de récupérer votre contenu (qu'il soit stocké localement dans votre projet ou à distance) et utilise une propriété `loader` pour récupérer vos données. +Astro propose deux chargeurs intégrés (`glob()` et `file()`) pour récupérer votre contenu local lors de la compilation. Indiquez l'emplacement de vos données dans votre projet ou sur votre système de fichiers, et ces chargeurs géreront automatiquement vos données et mettront à jour la couche de contenu du magasin de données persistant. -#### Chargeurs intégrés +Pour récupérer des données distantes au moment de la compilation, vous pouvez [créer un chargeur personnalisé](#chargeurs-personnalisés-au-moment-de-la-compilation) pour récupérer vos données et mettre à jour le magasin de données. Ou vous pouvez utiliser n'importe quelle [intégration de chargeur tierce ou publiée par la communauté](https://astro.build/integrations/2/?search=&categories%5B%5D=loaders). Plusieurs existent déjà pour les systèmes de gestion de contenu populaires ainsi que pour des sources de données courantes telles que les coffres-forts Obsidian, les dépôts GitHub ou les publications Bluesky. -Astro fournit [deux fonctions de chargement intégrées](/fr/reference/content-loader-reference/#types-de-chargeurs) (`glob()` et `file()`) pour récupérer votre contenu local, ainsi qu'un accès à l'API pour créer votre propre chargeur et récupérer des données distantes. +### Le chargeur `glob()` -Le [chargeur `glob()`](/fr/reference/content-loader-reference/#le-chargeur-glob) crée des entrées à partir de répertoires de fichiers Markdown, MDX, Markdoc, JSON, YAML ou TOML à partir de n'importe quel endroit du système de fichiers. Il accepte un motif (`pattern`) de fichiers d'entrée à faire correspondre à l'aide de motifs glob pris en charge par [micromatch](https://github.com/micromatch/micromatch#matching-features) et un chemin de fichier `base` indiquant où se trouvent vos fichiers. L'`id` de chaque entrée sera automatiquement généré à partir de son nom de fichier. Utilisez ce chargeur lorsque vous avez un fichier par entrée. +Le [chargeur `glob()`](/fr/reference/content-loader-reference/#le-chargeur-glob) récupère les entrées de fichiers Markdown, MDX, Markdoc, JSON, YAML ou TOML depuis n'importe quel répertoire du système de fichiers. Si vous stockez vos entrées de contenu localement sous forme de fichiers séparés, comme un répertoire d'articles de blog, alors le chargeur `glob()` est tout ce dont vous avez besoin pour accéder à votre contenu. -Le [chargeur `file()`](/fr/reference/content-loader-reference/#le-chargeur-file) crée plusieurs entrées à partir d'un seul fichier local. Chaque entrée du fichier doit avoir un nom de propriété `id` unique. Il accepte un chemin de fichier `base` vers votre fichier et éventuellement une [fonction `parser`](#fonction-parser) pour les fichiers de données qu'il ne peut pas analyser automatiquement, ou pour analyser les données de manière asynchrone.. Utilisez ce chargeur lorsque votre fichier de données peut être analysé comme un tableau d'objets. +Ce chargeur nécessite un modèle (`pattern`) de fichiers d'entrée à faire correspondre à l'aide des motifs glob pris en charge par [micromatch](https://github.com/micromatch/micromatch#matching-features), ainsi qu'un chemin d'accès de `base` indiquant l'emplacement de vos fichiers. Un `id` unique sera généré automatiquement pour chaque entrée à partir du nom de son fichier, mais vous pouvez [définir des identifiants personnalisés](#définition-didentifiants-personnalisés) si nécessaire. -```ts title="src/content.config.ts" {6,10} +```ts title="src/content.config.ts" {5} import { defineCollection } from 'astro:content'; -import { glob, file } from 'astro/loaders'; // Non disponible avec l'API héritée -import { z } from 'astro/zod'; +import { glob } from 'astro/loaders'; const blog = defineCollection({ loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }), - schema: /* ... */ -}); -const dogs = defineCollection({ - loader: file("src/data/dogs.json"), - schema: /* ... */ }); -const probes = defineCollection({ - // `loader` peut accepter un tableau de plusieurs modèles ainsi que des modèles de chaîne de caractères - // Chargez tous les fichiers Markdown dans le répertoire space-probes, à l'exception de ceux qui commencent par « voyager- » - loader: glob({ pattern: ['*.md', '!voyager-*'], base: 'src/data/space-probes' }), - schema: z.object({ - name: z.string(), - type: z.enum(['Space Probe', 'Mars Rover', 'Comet Lander']), - launch_date: z.date(), - status: z.enum(['Actif', 'Inactif', 'Déclassé']), - destination: z.string(), - operator: z.string(), - notable_discoveries: z.array(z.string()), +export const collections = { blog }; +``` + +#### Définition d'identifiants personnalisés + +Lors de l'utilisation du [chargeur `glob()`](#le-chargeur-glob) avec des fichiers Markdown, MDX, Markdoc, JSON ou TOML, l'[`id`](/fr/reference/modules/astro-content/#collectionentryid) de chaque entrée de contenu est automatiquement généré dans un format compatible avec les URL à partir du nom du fichier. Cet identifiant unique (`id`) est utilisé pour interroger directement l'entrée dans votre collection. Il est également utile lors de la [création de nouvelles pages et URL à partir de votre contenu](#génération-de-routes-à-partir-du-contenu). + +Vous pouvez remplacer l'identifiant généré d'une entrée en ajoutant votre propre propriété `slug` à l'en-tête du fichier ou à l'objet de données pour les fichiers JSON. Cela est similaire à la fonctionnalité « lien permanent » d'autres frameworks web. + +```md title="src/blog/1.md" {3} +--- +title: Mon article de blog +slug: mon-identifiant-personnalisé/prend-en-charge/les-barres-obliques +--- +Le contenu de votre article de blog ici. +``` + +```json title="src/categories/1.json" {3} +{ + "title": "Ma Catégorie", + "slug": "mon-identifiant-personnalisé/prend-en-charge/les-barres-obliques", + "description": "La description de votre catégorie ici." +} +``` + +Vous pouvez également transmettre des options à la [fonction d'assistance `generateID()`](/fr/reference/content-loader-reference/#generateid) du chargeur `glob()` lors de la définition de votre collection au moment de la compilation, afin d'ajuster la façon dont les `id` sont générés. Par exemple, vous pouvez souhaiter annuler le comportement par défaut qui consiste à convertir les majuscules en minuscules pour chaque entrée de la collection : + +```js title="src/content.config.ts" +const auteurs = defineCollection({ + /* Récupérer tous les fichiers JSON de votre répertoire d'auteurs tout en conservant + * les majuscules dans l'identifiant. */ + loader: glob({ + pattern: '**/*.json', + base: "./src/data/auteurs", + generateId: ({ entry }) => entry.replace(/\.json$/, ''), }), }); +``` + +### Le chargeur `file()` + +Le [chargeur `file()`](/fr/reference/content-loader-reference/#le-chargeur-file) récupère plusieurs entrées à partir d'un seul fichier local défini dans votre collection. Il détectera et analysera automatiquement (en fonction de l'extension du fichier) un seul tableau d'objets provenant de fichiers JSON et YAML, et traitera chaque table de premier niveau comme une entrée indépendante dans les fichiers TOML. + +```ts title="src/content.config.ts" {5} +import { defineCollection } from 'astro:content'; +import { file } from 'astro/loaders'; + +const chiens = defineCollection({ + loader: file("src/data/chiens.json"), +}); + +export const collections = { chiens }; +``` -export const collections = { blog, dogs, probes }; +Chaque objet d'entrée dans le fichier doit posséder un nom de propriété `id` avec une valeur unique afin de pouvoir être identifié et interrogé. Contrairement au chargeur `glob()`, le chargeur `file()` ne générera pas automatiquement d'identifiants pour chaque entrée. + +Vous pouvez fournir vos entrées sous forme de tableau d'objets avec une propriété `id`, ou sous forme d'objet où l'identifiant unique (`id`) est le nom de la propriété : + +```json title="src/data/chiens.json" +// Spécifier une propriété `id` dans chaque objet d'un tableau +[ + { "id": "caniche", "pelage": "bouclé", "mue": "faible" }, + { "id": "afghan", "pelage": "short", "mue": "low" } +] ``` -##### Fonction `parser` +```json title="src/data/chiens.json" +// Chaque nom de propriété sera utilisé comme `id` +{ + "caniche": { "pelage": "bouclé", "mue": "faible" }, + "afghan": { "pelage": "soyeux", "mue": "faible" } +} +``` -Le chargeur `file()` accepte un second argument qui définit une fonction d'analyse (`parser`). Cela vous permet de spécifier un analyseur personnalisé (par exemple `csv-parse`) pour créer une collection à partir du contenu d'un fichier. +#### Analyse d'autres formats de données -Le chargeur `file()` détectera et analysera automatiquement (en fonction de leur extension de fichier) un seul tableau d'objets à partir de fichiers JSON et YAML, et traitera chaque table de niveau supérieur comme une entrée indépendante dans les fichiers TOML. La prise en charge de ces types de fichiers est intégrée, et aucun analyseur (`parser`) n'est nécessaire, sauf si vous disposez d'un [document JSON imbriqué](#documents-json-imbriqués). Pour utiliser d'autres fichiers, comme `.csv`, vous devrez créer une fonction d'analyse. +La prise en charge de la transformation de fichiers JSON, YAML et TOML uniques en entrées de collection avec le chargeur `file()` est intégrée (sauf si vous avez un [document JSON imbriqué](#documents-json-imbriqués)). Pour charger votre collection à partir de types de fichiers non pris en charge, tels que `.csv`, vous devrez créer une [fonction d'analyse](/fr/reference/content-loader-reference/#parser). Cette fonction peut être rendue asynchrone si nécessaire (par exemple pour récupérer des fichiers sur le web, ou si votre analyseur syntaxique est asynchrone). -L'exemple suivant montre l'importation d'un analyseur CSV, puis le chargement d'une collection `cats` dans votre projet en transmettant à la fois un chemin de fichier et une fonction `parser` au chargeur `file()` : +L'exemple suivant montre comment importer un analyseur CSV tiers, puis comment transmettre une fonction `parser` personnalisée au chargeur `file()` : -```typescript title="src/content.config.ts" +```typescript title="src/content.config.ts" {3} "parser: (text) => parseCsv(text, { columns: true, skipEmptyLines: true })" import { defineCollection } from "astro:content"; import { file } from "astro/loaders"; import { parse as parseCsv } from "csv-parse/sync"; -const cats = defineCollection({ - loader: file("src/data/cats.csv", { parser: (text) => parseCsv(text, { columns: true, skipEmptyLines: true })}) +const chats = defineCollection({ + loader: file("src/data/chats.csv", { + parser: (text) => parseCsv(text, { columns: true, skipEmptyLines: true }), + }), }); ``` -###### Documents `.json` imbriqués +##### Documents `.json` imbriqués -L'argument `parser` vous permet également de charger une seule collection à partir d'un document JSON imbriqué. Par exemple, ce fichier JSON contient plusieurs collections : +L'argument `parser()` peut être utilisé pour charger une seule collection à partir d'un document JSON imbriqué. Par exemple, ce fichier JSON contient plusieurs collections : -```json title="src/data/pets.json" -{"dogs": [{}], "cats": [{}]} +```json title="src/data/animaux.json" +{"chiens": [{}], "chats": [{}]} ``` -Vous pouvez séparer ces collections en passant un analyseur personnalisé (`parser`) au chargeur `file()` pour chaque collection : +Vous pouvez séparer ces collections en passant une fonction `parser()` personnalisée au chargeur `file()` pour chaque collection, en utilisant l'analyse JSON intégrée d'Astro : ```typescript title="src/content.config.ts" -const dogs = defineCollection({ - loader: file("src/data/pets.json", { parser: (text) => JSON.parse(text).dogs }) +import { file } from "astro/loaders"; +import { defineCollection } from "astro:content"; + +const chiens = defineCollection({ + loader: file("src/data/animaux.json", { parser: (text) => JSON.parse(text).chiens }) }); -const cats = defineCollection({ - loader: file("src/data/pets.json", { parser: (text) => JSON.parse(text).cats }) +const chats = defineCollection({ + loader: file("src/data/animaux.json", { parser: (text) => JSON.parse(text).chats }) }); ``` -#### Créer un chargeur personnalisé - -Vous pouvez créer un chargeur personnalisé pour récupérer du contenu distant à partir de n'importe quelle source de données, telle qu'un CMS, une base de données ou un point de terminaison d'API. +### Chargeurs personnalisés au moment de la compilation -L'utilisation d'un chargeur pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Cela vous offre tous les avantages des collections locales, tels que les assistants API spécifiques aux collections tels que `getCollection()` et `render()` pour interroger et afficher vos données, ainsi que la validation de schéma. - -:::tip -Recherchez des chargeurs créés par la communauté et des tiers dans le [répertoire des intégrations Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). -::: +Vous pouvez [créer un chargeur personnalisé](/fr/reference/content-loader-reference/#building-a-loader) en utilisant l'API des chargeurs de contenu pour récupérer du contenu distant à partir de n'importe quelle source de données, comme un CMS, une base de données ou un point de terminaison d'API. -##### Chargeurs incorporés - -Vous pouvez définir un chargeur incorporé, à l'intérieur de votre collection, comme une fonction asynchrone qui renvoie un tableau d'entrées. - -Ceci est utile pour les chargeurs qui n'ont pas besoin de contrôler manuellement la manière dont les données sont chargées et stockées. Chaque fois que le chargeur est appelé, il efface le magasin et recharge toutes les entrées. +Vous pouvez ensuite importer et définir votre chargeur personnalisé dans la configuration de vos collections, en passant les valeurs requises : ```ts title="src/content.config.ts" -const countries = defineCollection({ - loader: async () => { - const response = await fetch("https://restcountries.com/v3.1/all"); - const data = await response.json(); - // Doit renvoyer un tableau d'entrées contenant une propriété id ou un objet avec des ID comme noms de propriété et des entrées comme valeurs - return data.map((country) => ({ - id: country.cca3, - ...country, - })); - }, - schema: /* ... */ +import { defineCollection } from 'astro:content'; +import { monChargeur } from './loader.ts'; + +const blog = defineCollection({ + loader: monChargeur({ + url: "https://api.example.com/articles", + apiKey: "mon-secret", + }), }); ``` -Les entrées renvoyées sont stockées dans la collection et peuvent être interrogées à l'aide des fonctions `getCollection()` et `getEntry()`. - -##### Objets de chargement +:::tip +Trouvez des chargeurs créés par la communauté et des chargeurs tiers dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). +::: -Pour un meilleur contrôle du processus de chargement, vous pouvez utiliser l'API de chargement de contenu pour créer un objet de chargement. Par exemple, avec un accès direct à la méthode `load`, vous pouvez créer un chargeur qui permet de mettre à jour les entrées de manière incrémentielle ou d'effacer le magasin uniquement lorsque cela est nécessaire. +L'utilisation d'un chargeur personnalisé pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections locales, y compris l'accès aux fonctions d'assistance spécifiques à l'API des collections telles que `getCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-créées-au-moment-de-la-compilation), ainsi que de la validation du schéma. -Similairement à la création d'une intégration pour Astro ou d'un module d'extension pour Vite, vous pouvez [distribuer votre chargeur sous forme de paquet NPM](/fr/reference/publish-to-npm/) que d'autres peuvent utiliser dans leurs projets. +De la même manière que pour la création d'une intégration Astro ou d'un module d'extension pour Vite, vous pouvez [distribuer votre chargeur en tant que paquet npm](/fr/reference/publish-to-npm/) que d'autres peuvent utiliser dans leurs projets. -Consultez [l'API de couche de contenu complète](/fr/reference/content-loader-reference/) et des exemples pour créer votre propre chargeur. +Consultez l'intégralité de l'[API des chargeurs de contenu](/fr/reference/content-loader-reference/) pour des exemples sur la façon de créer votre propre chargeur. -### Définition d'un schéma de collection +## Définition d'un schéma de collection -Les schémas garantissent la cohérence des données du frontmatter ou d'entrée au sein d'une collection via la validation Zod. Un schéma **garantit** que ces données existent sous une forme prévisible lorsque vous devez les référencer ou les interroger. Si un fichier viole son schéma de collection, Astro fournira une erreur utile pour vous en informer. +Les schémas garantissent la cohérence des données ou du frontmatter au sein d'une collection grâce à l'utilisationd de Zod pour la validation. Un schéma **garantit** que ces données existent sous une forme prévisible lorsque vous devez les consulter ou les interroger. Si un fichier enfreint le schéma de sa collection, Astro vous fournira un message d'erreur utile pour vous en informer. -Les schémas alimentent également les typages automatiques TypeScript d'Astro pour votre contenu. Lorsque vous définissez un schéma pour votre collection, Astro génère et applique automatiquement une interface TypeScript. Le résultat est une prise en charge complète de TypeScript lorsque vous interrogez votre collection, y compris la saisie semi-automatique des propriétés et la vérification des types. +Les schémas permettent également à Astro de générer automatiquement les types TypeScript pour votre contenu. Lorsque vous définissez un schéma pour votre collection, Astro génèrera et appliquera automatiquement une interface TypeScript à celle-ci. Le résultat est une prise en charge complète de TypeScript lors de l'interrogation de votre collection, y compris la saisie semi-automatique des propriétés et la vérification des types. :::tip -Pour qu'Astro reconnaisse un schéma nouveau ou mis à jour, vous devrez peut-être redémarrer le serveur de développement ou [synchroniser la couche de contenu](/fr/reference/cli-reference/#astro-dev) (s + Entrée) pour définir le module `astro:content`. +Pour qu'Astro reconnaisse un schéma nouveau ou mis à jour, vous devrez peut-être redémarrer le serveur de développement ou [synchroniser la couche de contenu](/fr/reference/cli-reference/#astro-dev) (s + enter) pour définir le module `astro:content`. ::: -Chaque frontmatter ou propriété de données de vos entrées de collection doit être défini à l’aide d’un [type de données Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants) : +Fournir un `schema` est facultatif, mais fortement recommandé ! Si vous choisissez d’utiliser un schéma, chaque propriété de vos entrées de collection utilisée dans le frontmatter ou dans vos données doit être définie à l’aide d’un [type de données Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants) : ```ts title="src/content.config.ts" {7-12,16-20} import { defineCollection } from 'astro:content'; -import { glob, file } from 'astro/loaders'; import { z } from 'astro/zod'; +import { glob, file } from 'astro/loaders'; const blog = defineCollection({ loader: glob({ pattern: "**/*.md", base: "./src/data/blog" }), @@ -229,7 +349,7 @@ const blog = defineCollection({ }) }); const dogs = defineCollection({ - loader: file("src/data/dogs.json"), + loader: file("src/data/chiens.json"), schema: z.object({ id: z.string(), breed: z.string(), @@ -240,25 +360,25 @@ const dogs = defineCollection({ export const collections = { blog, dogs }; ``` -#### Définition des types de données avec Zod +### Définition des types de données avec Zod -Astro utilise [Zod](https://github.com/colinhacks/zod) pour alimenter ses schémas de contenu. Avec Zod, Astro est capable de valider les données de chaque fichier au sein d'une collection *et* de fournir des types TypeScript automatiques lorsque vous interrogez le contenu à partir de votre projet. +Astro utilise [Zod](https://github.com/colinhacks/zod) pour alimenter ses schémas de contenu. Avec Zod, Astro est capable de valider les données de chaque fichier au sein d'une collection *et* de fournir automatiquement les types TypeScript lorsque vous interrogez le contenu depuis votre projet. -Pour utiliser Zod dans Astro, importez l'utilitaire `z` depuis `"astro/zod"`. Il s'agit d'une réexportation de la bibliothèque Zod, et elle prend en charge toutes les fonctionnalités de Zod. +Pour utiliser Zod dans Astro, importez l'utilitaire `z` depuis `"astro/zod"`. Il s'agit d'une réexportation de la bibliothèque Zod, et elle prend en charge toutes les fonctionnalités de Zod 4. Consultez la [référence de l'utilitaire `z`](/fr/reference/modules/astro-zod/) pour obtenir un aide-mémoire des types de données courants et pour apprendre comment Zod fonctionne et quelles fonctionnalités sont disponibles. -##### Méthodes de schéma Zod +#### Méthodes de schéma Zod -Toutes [les méthodes de schéma Zod](/fr/reference/modules/astro-zod/#utilisation-des-méthodes-de-zod) (p. ex. `.parse()`, `.transform()`) sont disponibles, avec certaines limitations. Notamment, l'exécution de contrôles de validation personnalisés sur les images à l'aide de `image().refine()` n'est pas prise en charge. +Toutes les [méthodes des schéma Zod](/fr/reference/modules/astro-zod/#utilisation-des-méthodes-de-zod) (par exemple `.parse()`, `.transform()`) sont disponibles, avec certaines limitations. Notamment, l'exécution de contrôles de validation personnalisés sur les images à l'aide de `image().refine()` n'est pas prise en charge. -#### Définition des références de collection +### Définition des références de collection -Les entrées de collection peuvent également « faire référence » à d’autres entrées associées. +Les entrées de collection peuvent également « faire référence » à d'autres entrées connexes. -Avec la [fonction `reference()`](/fr/reference/modules/astro-content/#reference) de l'API des collections, vous pouvez définir une propriété dans un schéma de collection en tant qu'entrée d'une autre collection. Par exemple, vous pouvez exiger que chaque entrée `space-shuttle` inclue une propriété `pilot` qui utilise le schéma propre à la collection `pilot` pour la vérification du type, la saisie semi-automatique et la validation. +Avec la fonction [`reference()`](/fr/reference/modules/astro-content/#reference), vous pouvez définir une propriété dans un schéma de collection comme une entrée d'une autre collection. Par exemple, vous pouvez exiger que chaque entrée de `space-shuttle` inclue une propriété `pilot` utilisant le schéma propre à la collection `pilot` pour la vérification des types, la saisie semi-automatique et la validation. -Un exemple courant est un article de blog qui fait référence à des profils d'auteur réutilisables stockés au format JSON ou à des URL d'articles associés stockées dans la même collection : +Un exemple courant est un article de blog qui fait référence à des profils d'auteurs réutilisables stockés au format JSON, ou à des URL d'articles connexes enregistrés dans la même collection : ```ts title="src/content.config.ts" import { defineCollection, reference } from 'astro:content'; @@ -266,21 +386,21 @@ import { glob } from 'astro/loaders'; import { z } from 'astro/zod'; const blog = defineCollection({ - loader: glob({ pattern: '**/[^_]*.md', base: "./src/data/blog" }), + loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }), schema: z.object({ title: z.string(), // Faire référence à un seul auteur de la collection `authors` par `id` author: reference('authors'), - // Faire référence à un tableau d'articles connexes de la collection `blog` par `slug` + // Faire référence à un tableau d'articles connexes de la collection `blog` par `id` relatedPosts: z.array(reference('blog')), }) }); const authors = defineCollection({ - loader: glob({ pattern: '**/[^_]*.json', base: "./src/data/authors" }), + loader: glob({ pattern: '**/*.json', base: "./src/data/auteurs" }), schema: z.object({ name: z.string(), - portfolio: z.string().url(), + portfolio: z.url(), }) }); @@ -289,64 +409,42 @@ export const collections = { blog, authors }; Cet exemple d'article de blog spécifie les `id` des articles associés et l'`id` de l'auteur de l'article : -```yaml title="src/data/blog/welcome.md" +```yaml title="src/content/blog/bienvenue.md" --- title: "Bienvenue sur mon blog" -author: ben-holmes # fait référence à `src/data/authors/ben-holmes.json` +author: ben-holmes # fait référence à `src/data/auteurs/ben-holmes.json` relatedPosts: -- about-me # fait référence à `src/data/blog/about-me.md` -- my-year-in-review # fait référence à `src/data/blog/my-year-in-review.md` +- a-propos # fait référence à `src/content/blog/a-propos.md` +- mon-bilan-annee # fait référence à `src/content/blog/mon-bilan-annee.md` --- ``` -Ces références seront transformées en objets contenant une propriété `collection` et une propriété `id`, vous permettant de [les interroger facilement dans vos modèles](/fr/guides/content-collections/#accès-aux-données-référencées). - -### Définition d'identifiants personnalisés +Ces références seront transformées en objets contenant les noms de propriété `collection` et `id`, vous permettant de les [interroger facilement dans vos modèles](/fr/guides/content-collections/#accès-aux-données-référencées). -Lors de l'utilisation du chargeur `glob()` avec des fichiers Markdown, MDX, Markdoc ou JSON, chaque [`id`](/fr/reference/modules/astro-content/#id) d'entrée de contenu est automatiquement généré dans un format compatible URL basé sur le nom du fichier de contenu. L'`id` est utilisé pour interroger l'entrée directement à partir de votre collection. Il est également utile lors de la création de nouvelles pages et URL à partir de votre contenu. +## Interroger les collections créées au moment de la compilation -Vous pouvez remplacer l'`id` généré par une entrée en ajoutant votre propre propriété `slug` au frontmatter du fichier ou à l'objet de données pour les fichiers JSON. Ceci est similaire à la fonctionnalité « permalien » d'autres frameworks Web. - -```md title="src/blog/1.md" {3} ---- -title: Mon article de blog -slug: mon-id-personnalise/prend-en-charge/les-barres-obliques ---- -Le contenu de votre article de blog ici. -``` - -```json title="src/categories/1.json" {3} -{ - "title": "Ma catégorie", - "slug": "mon-id-personnalise/prend-en-charge/les-barres-obliques", - "description": "Votre description de catégorie ici." -} -``` - -## Interroger les collections - -Astro fournit des fonctions d'aide pour interroger une collection et renvoyer une (ou plusieurs) entrées de contenu. +Astro fournit des fonctions d'assistance pour interroger une collection créée au moment de la compilation et renvoyer une ou plusieurs entrées de contenu. - [`getCollection()`](/fr/reference/modules/astro-content/#getcollection) récupère une collection entière et renvoie un tableau d'entrées. - [`getEntry()`](/fr/reference/modules/astro-content/#getentry) récupère une seule entrée d'une collection. -Ces entrées de retour contiennent un `id` unique, un objet `data` avec toutes les propriétés définies et renverront également un `body` contenant le corps brut et non compilé d'un document Markdown, MDX ou Markdoc. +Ces fonctions renvoient des entrées avec un `id` unique, un objet `data` avec toutes les propriétés définies, et renverront également une propriété `body` contenant le corps brut et non compilé d'un document Markdown, MDX ou Markdoc. -```js +```astro title="src/pages/index.astro" +--- import { getCollection, getEntry } from 'astro:content'; -// Obtenir toutes les entrées d'une collection. +// Récupérer toutes les entrées d'une collection. // Nécessite le nom de la collection comme argument. const allBlogPosts = await getCollection('blog'); -// Obtenir une seule entrée d’une collection. -// Nécessite le nom de la collection et un `id` -const poodleData = await getEntry('dogs', 'poodle'); - - +// Récupérer une seule entrée de collection. +// Nécessite le nom de la collection et l'`id` +const poodleData = await getEntry('chiens', 'caniche'); +--- ``` -L'ordre de tri des collections générées est non déterministe et dépend de la plateforme. Cela signifie que si vous appelez `getCollection()` et que vous avez besoin que vos entrées soient renvoyées dans un ordre spécifique (par exemple, des articles de blog triés par date), vous devez trier vous-même les entrées de la collection : +L'ordre de tri des collections générées n'est pas déterministe et dépend de la plateforme. Cela signifie que si vous appelez `getCollection()` et que vous avez besoin que vos entrées soient renvoyées dans un ordre spécifique (par exemple, des articles de blog triés par date), vous devez trier vous-même les entrées de la collection : ```astro title="src/pages/blog.astro" --- @@ -358,11 +456,13 @@ const posts = (await getCollection('blog')).sort( --- ``` -Voir la liste complète des propriétés renvoyées par le [type `CollectionEntry`](/fr/reference/modules/astro-content/#collectionentry). +Retrouvez la liste complète des propriétés renvoyées par le type [`CollectionEntry`](/fr/reference/modules/astro-content/#collectionentry). ### Utilisation du contenu dans les modèles Astro -Après avoir interrogé vos collections, vous pouvez accéder au contenu de chaque entrée directement dans votre modèle de composant Astro. Par exemple, vous pouvez créer une liste de liens vers vos articles de blog, en affichant les informations du frontmatter de votre entrée à l'aide de la propriété `data`. +Après avoir interrogé vos collections, vous pouvez accéder au contenu et aux métadonnées de chaque entrée directement dans le modèle de votre composant Astro. + +Par exemple, vous pouvez créer une liste de liens vers vos articles de blog, affichant les informations du frontmatter de votre article à l'aide de la propriété `data` : ```astro title="src/pages/index.astro" @@ -377,21 +477,20 @@ const posts = await getCollection('blog'); ))} ``` -#### Restitution du contenu -Une fois la requête effectuée, vous pouvez restituer les entrées Markdown et MDX en HTML à l'aide de la propriété de fonction [`render()`](/fr/reference/modules/astro-content/#render). L'appel de cette fonction vous donne accès au contenu HTML restitué, y compris un composant `` et une liste de tous les titres restitués. +### Restitution du contenu -```astro title="src/pages/blog/post-1.astro" {5,8} +Une fois interrogées, vous pouvez convertir les entrées Markdown et MDX en HTML à l'aide de la fonction [`render()`](/fr/reference/modules/astro-content/#render) du module `astro:content`. L'appel de cette fonction vous donne accès au contenu HTML généré, incluant un composant `` et la liste de tous les titres générés. + +```astro title="src/pages/blog/article-1.astro" {2,6,10} --- import { getEntry, render } from 'astro:content'; -const entry = await getEntry('blog', 'post-1'); -if (!entry) { - // Traiter l'erreur, par exemple : - throw new Error("Impossible de trouver l'article de blog 1"); -} -const { Content, headings } = await render(entry); +const entry = await getEntry('blog', 'article-1'); + +const { Content } = await render(entry); --- +

{entry.data.title}

Publié le : {entry.data.published.toDateString()}

``` @@ -411,59 +510,71 @@ interface Props { post: CollectionEntry<'blog'>; } -// `post` correspondra au type de schéma de votre collection 'blog' +// `post` correspondra au type du schéma de votre collection 'blog'. const { post } = Astro.props; --- ``` ### Filtrer les requêtes sur les collections -`getCollection()` prend une fonction de rappel facultative « filter » qui vous permet de filtrer votre requête en fonction des propriétés `id` ou `data` d'une entrée. +`getCollection()` accepte une fonction de rappel facultative `filter` qui vous permet de filtrer votre requête en fonction des propriétés `id` ou `data` d'une entrée. -Vous pouvez utiliser cette propriété pour filtrer selon n'importe quel critère de contenu. Par exemple, vous pouvez filtrer par des propriétés telles que `draft` pour empêcher la publication d'un brouillon d'article sur votre blog : +Vous pouvez utiliser cette fonction pour filtrer selon n'importe quel critère de contenu. Par exemple, vous pouvez filtrer par des propriétés comme `draft` pour empêcher la publication d'ébauches d'articles sur votre blog : -```js -// Exemple : Filtrer les entrées de contenu avec `draft: true` (brouillon : vrai) +```astro title="src/pages/blog.astro" +--- +// Exemple : Filtrer les entrées de contenu avec `draft: true` import { getCollection } from 'astro:content'; const publishedBlogEntries = await getCollection('blog', ({ data }) => { return data.draft !== true; }); +--- ``` -Vous pouvez également créer des pages provisoires qui sont disponibles lors de l'exécution du serveur de développement, mais qui ne sont pas générées en production : +Vous pouvez également créer des pages brouillon qui seront disponibles lors de l'exécution du serveur de développement, mais qui ne seront pas générés en production : -```js -// Exemple : Filtrer les entrées de contenu avec `draft: true` uniquement lors de la compilation pour la production +```astro title="src/pages/blog.astro" +--- +// Exemple : Filtrer les entrées de contenu avec `draft: true` uniquement lors de la génération pour la production import { getCollection } from 'astro:content'; const blogEntries = await getCollection('blog', ({ data }) => { return import.meta.env.PROD ? data.draft !== true : true; }); +--- ``` -L'argument `filter` permet également de filtrer les répertoires imbriqués dans une collection. Puisque `id` inclut le chemin imbriqué complet, vous pouvez filtrer en utilisant le début de chaque `id` pour ne renvoyer que les éléments d'un répertoire imbriqué spécifique : +L'argument `filter` prend également en charge le filtrage par répertoires imbriqués au sein d'une collection. Étant donné que l'`id` inclut le chemin imbriqué complet, vous pouvez filtrer par le début de chaque `id` pour ne renvoyer que les éléments d'un répertoire imbriqué spécifique : -```js +```astro title="src/pages/blog.astro" +--- // Exemple : Filtrer les entrées par sous-répertoire dans la collection import { getCollection } from 'astro:content'; const englishDocsEntries = await getCollection('docs', ({ id }) => { return id.startsWith('en/'); }); +--- ``` ### Accès aux données référencées -Toutes [références définies dans votre schéma](/fr/guides/content-collections/#définition-des-références-de-collection) doivent être interrogées séparément après la première interrogation de votre entrée de collection. Puisque la [fonction `reference()`](/fr/reference/modules/astro-content/#reference) transforme une référence en un objet avec `collection` et `id` comme propriétés, vous pouvez utiliser la fonction `getEntry()` pour renvoyer un seul élément référencé ou `getEntries()` pour récupérer plusieurs entrées référencées à partir de l'objet `data` renvoyé. +Pour accéder aux [références définies dans votre schéma](#définition-des-références-de-collection), commencez par interroger votre entrée de collection. Vos références seront disponibles dans l'objet `data` renvoyé (par exemple, `entry.data.author` et `entry.data.relatedPosts`). + +Ensuite, vous pouvez utiliser à nouveau la fonction `getEntry()` (ou `getEntries()` pour récupérer plusieurs entrées référencées) en passant ces valeurs renvoyées. La fonction `reference()` de votre schéma transforme ces valeurs en un ou plusieurs objets contenant `collection` et `id`, ce qui facilite l'interrogation de ces données associées. -```astro title="src/pages/blog/welcome.astro" + +```astro title="src/pages/blog/aventures-dans-espace.astro" --- import { getEntry, getEntries } from 'astro:content'; -const blogPost = await getEntry('blog', 'welcome'); +// Tout d'abord, interroger un article de blog. +const blogPost = await getEntry('blog', "Aventures dans l'espace"); -// Restituer une seule référence (p. ex. `{collection: "authors", id: "ben-holmes"}`) +// Récupérer un seul élément de référence : l’auteur de l’article de blog +// Équivalent à une requête utilisant `{collection: "auteurs", id: "ben-holmes"}` const author = await getEntry(blogPost.data.author); -// Restituer un tableau de références -// (p. ex. `[{collection: "blog", id: "about-me"}, {collection: "blog", id: "my-year-in-review"}]`) + +// Récupérer un tableau d'éléments référencés : tous les articles associés +// Équivalent à une requête utilisant `[{collection: "blog", id: "visiter-mars"}, {collection: "blog", id: "quitter-la-terre-pour-la-premiere-fois"}]` const relatedPosts = await getEntries(blogPost.data.relatedPosts); --- @@ -472,7 +583,7 @@ const relatedPosts = await getEntries(blogPost.data.relatedPosts); -

Vous pourriez aussi aimer :

+

Vous pourriez également aimer :

{relatedPosts.map(post => ( {post.data.title} ))} @@ -480,22 +591,22 @@ const relatedPosts = await getEntries(blogPost.data.relatedPosts); ## Générer des routes à partir du contenu -Les collections de contenu sont stockées en dehors du répertoire `src/pages/`. Cela signifie qu'aucune page ou route n'est générée par défaut pour vos éléments de collection. +Les collections de contenu sont stockées en dehors du répertoire `src/pages/`. Cela signifie qu'aucune page ni route n'est générée par défaut pour les éléments de votre collection par le [système de routage reposant sur les fichiers](/fr/guides/routing/) d'Astro. -Vous devrez créer manuellement une nouvelle [route dynamique](/fr/guides/routing/#routes-dynamiques) si vous souhaitez générer des pages HTML pour chacune de vos entrées de collection, telles que des articles de blog individuels. Votre route dynamique va mettre en correspondance le paramètre de la requête entrante (p. ex. : `Astro.params.slug` dans `src/pages/blog/[...slug].astro`) pour récupérer la bonne entrée à l'intérieur d'une collection. +Vous devrez créer manuellement une nouvelle [route dynamique](/fr/guides/routing/#routes-dynamiques) si vous souhaitez générer des pages HTML pour chacune des entrées de votre collection, telles que des articles de blog individuels. Cette route dynamique associera le paramètre de la requête entrante (par exemple, `Astro.params.id` dans `src/pages/blog/[...id].astro`) à l'élément correspondant sur chaque page. -La méthode exacte de génération des routes dépendra du fait que vos pages sont pré-rendues (par défaut) ou rendues à la demande par un serveur. +La méthode exacte de génération des routes dépendra du fait que vos pages soient pré-rendues (par défaut) ou générées à la demande par un serveur. -### Créer pour une sortie statique (par défaut) +### Compilation pour sortie statique (par défaut) -Si vous créez un site web statique (comportement par défaut d'Astro), utilisez la fonction [`getStaticPaths()`](/fr/reference/routing-reference/#getstaticpaths) pour créer plusieurs pages à partir d'un seul composant de page (par exemple `src/pages/[slug]`) au moment de la compilation. +Si vous créez un site web statique (comportement par défaut d'Astro) avec des collections au moment de la compilation, utilisez la fonction [`getStaticPaths()`](/fr/reference/routing-reference/#getstaticpaths) pour créer plusieurs pages à partir d'un seul composant de page (par exemple `src/pages/[id].astro`) lors de votre compilation. -Appelez `getCollection()` à l'intérieur de `getStaticPaths()` pour que vos données de collection soient disponibles pour la création de routes statiques. Ensuite, créez les chemins d'URL individuels à l'aide de la propriété `id` de chaque entrée de contenu. Chaque page reçoit l'entrée de collection entière en tant que propriété à [utiliser dans votre modèle de page](#utilisation-du-contenu-dans-les-modèles-astro). +Appelez `getCollection()` à l'intérieur de `getStaticPaths()` pour que les données de votre collection soient disponibles pour la création de routes statiques. Ensuite, créez les chemins d'URL individuels à l'aide de la propriété `id` de chaque entrée de contenu. Chaque page reçoit l'intégralité de l'entrée de collection comme propriété à [utiliser dans votre modèle de page](#utilisation-du-contenu-dans-les-modèles-astro). ```astro title="src/pages/posts/[id].astro" "{ id: post.id }" "{ post }" --- import { getCollection, render } from 'astro:content'; -// 1. Génére un nouveau chemin pour chaque entrée de collection +// 1. Générer un nouveau chemin pour chaque entrée de collection export async function getStaticPaths() { const posts = await getCollection('blog'); return posts.map(post => ({ @@ -514,28 +625,37 @@ const { Content } = await render(post); Cela générera une route de page pour chaque entrée de la collection `blog`. Par exemple, une entrée dans `src/blog/hello-world.md` possèdera un `id` avec la valeur `hello-world`, ainsi son URL finale sera `/posts/hello-world/`. :::note -Si vos slugs personnalisés contiennent le caractère `/` pour produire des URLs avec plusieurs segments de chemin, vous devez utiliser un [paramètre du reste (par exemple `[...slug]`)](/fr/guides/routing/#paramètres-du-reste) dans le nom de fichier `.astro` pour cette page de routage dynamique. +Si vos slugs personnalisés contiennent le caractère `/` pour produire des URL avec plusieurs segments de chemin, vous devez utiliser un [paramètre du reste (par exemple `[...id]`)](/fr/guides/routing/#paramètres-du-reste) dans le nom de fichier `.astro` pour cette page de routage dynamique. ::: -### Créer pour une sortie serveur (SSR) +### Création de routes à la demande au moment de la requête -Si vous créez un site web dynamique (en utilisant la prise en charge SSR d'Astro), vous n'êtes pas censé générer des chemins à l'avance pendant la compilation. Au lieu de cela, votre page devrait examiner la requête (en utilisant `Astro.request` ou `Astro.params`) pour obtenir le `slug` demandé, et ensuite récupérer l'entrée en utilisant [`getEntry()`](/fr/reference/modules/astro-content/#getentry). +Avec un adaptateur installé pour le [rendu à la demande](/fr/guides/on-demand-rendering/), vous pouvez générer vos routes de page dynamiques au moment de la requête. Commencez par examiner la requête (à l'aide de `Astro.request` ou `Astro.params`) pour trouver le slug demandé, puis récupérez-le à l'aide d'une des fonctions d'assistance des collections de contenu d'Astro : + +- [`getEntry()`](/fr/reference/modules/astro-content/#getentry) pour les pages de collection générées au moment de la compilation, qui sont générées une seule fois, lors de la première requête. +- [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) pour les pages de collection en direct où les données sont (re)récupérées à chaque requête. ```astro title="src/pages/posts/[id].astro" --- +export const prerender = false; // Pas nécessaire en mode `server` + import { getEntry, render } from "astro:content"; -// 1. Récupérer le slug de la requête entrante du serveur + +// 1. Récupérer le slug de la requête entrante du serveur. const { id } = Astro.params; if (id === undefined) { return Astro.redirect("/404"); } -// 2. Interroger l'entrée directement à l'aide du slug de requête + +// 2. Interroger l'entrée directement en utilisant le slug de la requête. const post = await getEntry("blog", id); -// 3. Redirection si l'entrée n'existe pas + +// 3. Rediriger si l'entrée n'existe pas if (post === undefined) { return Astro.redirect("/404"); } + // 4. Effecter le rendu de l'entrée en HTML dans le modèle const { Content } = await render(post); --- @@ -544,99 +664,273 @@ const { Content } = await render(post); ``` :::tip -Explorez le dossier `src/pages/` du [code de démonstration du tutoriel du blog sur GitHub](https://github.com/withastro/blog-tutorial-demo/tree/content-collections/src/pages) pour voir des exemples complets de création de pages à partir de vos collections pour des fonctionnalités de blog telles qu'une liste d'articles de blog, des pages de balises, etc. +Explorez le dossier `src/pages/` du [code de démonstration du tutoriel de blog sur GitHub](https://github.com/withastro/blog-tutorial-demo/tree/content-collections/src/pages) pour voir des exemples complets de création de pages dynamiques à partir de vos collections pour des fonctionnalités de blog telles qu'une liste d'articles de blog, des pages de tags, et plus encore ! +::: + +## Collections de contenu en direct + +Les collections en direct utilisent une API différente de celle des collections de contenu générées lors de la compilation, même si les fonctions de configuration et d'assistance sont conçues pour être familières. + +Les principales différences sont les suivantes : + +1. **Moment d'exécution** : Exécuté à la demande et non au moment de la compilation +2. **Fichier de configuration** : Utilise `src/live.config.ts` au lieu de `src/content.config.ts` +3. **Définition de collections**: Utilise `defineLiveCollection()` au lieu de `defineCollection()` +4. **API du chargeur**: Implémente les méthodes `loadCollection` et `loadEntry` au lieu de la méthode `load` +5. **Données renvoyées** : Renvoie les données directement au lieu de les stocker dans le magasin de données +6. **Fonctions destinées aux utilisateurs** : Utilise `getLiveCollection()`/`getLiveEntry()` au lieu de `getCollection()`/`getEntry()` + +De plus, vous devez disposer d'un adaptateur configuré pour le [rendu à la demande](/fr/guides/on-demand-rendering/) des données de la collection en direct. + +Définissez vos collections en direct dans le fichier spécial `src/live.config.ts` (distinct de votre fichier `src/content.config.ts` pour les collections générées au moment de la compilation, si vous en avez un). + +Chaque collection individuelle configure : +- un [chargeur en direct (`loader`)](#création-dun-chargeur-en-direct) pour votre source de données, et éventuellement pour la sûreté du typage (obligatoire) +- un [schéma de collection en direct (`schema`)](#utilisation-des-schémas-zod-avec-des-collections-en-direct) pour la sûreté du typage (optionnel) + +Contrairement aux collections créées au moment de la compilation, aucun chargeur en direct intégré n'est disponible. Vous devrez [créer un chargeur en direct personnalisé](#création-dun-chargeur-en-direct) pour votre source de données spécifique ou trouver un chargeur tiers à transmettre à la propriété `loader` de votre collection en direct. + +Vous pouvez éventuellement [inclure la sécurité des types dans vos chargeurs en direct](/fr/reference/content-loader-reference/#the-liveloader-object). Par conséquent, [définir un schéma Zod](#utilisation-des-schémas-zod-avec-des-collections-en-direct) pour les collections en direct est facultatif. Cependant, si vous en fournissez un, il sera prioritaire sur les types du chargeur en direct. + +```ts title="src/live.config.ts" +// Définir des collections en direct pour accéder aux données en temps réel +import { defineLiveCollection } from 'astro:content'; +import { storeLoader } from '@mystore/astro-loader'; + +const products = defineLiveCollection({ + loader: storeLoader({ + apiKey: process.env.STORE_API_KEY, + endpoint: 'https://api.mystore.com/v1', + }), +}); + +// Exporter un seul objet `collections` pour enregistrer votre ou vos collections. +export const collections = { products }; +``` + +Vous pouvez ensuite utiliser les fonctions dédiées `getLiveCollection()` et `getLiveEntry()` pour [accéder à vos données en direct](#accès-aux-données-en-direct) et afficher votre contenu. + +Vous pouvez [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection en direct à la demande, en récupérant des données fraîches au moment de l'exécution à chaque requête sans avoir besoin d'une recompilation de votre site comme le font les [collections générées au moment de la compilation](#définition-de-collections-de-contenu-générées-au-moment-de-la-compilation). Ceci est utile lorsque l'accès à des données en direct et actualisées est plus important que la disponibilité de votre contenu dans une couche de stockage de données performante qui persiste entre les différentes compilations du site. + +### Création d'un chargeur en direct + +Vous pouvez créer un [chargeur en direct](/fr/reference/content-loader-reference/#live-loaders) personnalisé en utilisant l'API des chargeurs en direct pour récupérer du contenu distant à la demande à partir de n'importe quelle source de données, telle qu'un CMS, une base de données ou un point de terminaison d'API. Vous devrez indiquer à votre chargeur en direct comment récupérer et renvoyer les entrées de contenu à partir de votre source de données souhaitée, ainsi que prévoir la gestion des erreurs pour les requêtes de données infructueuses. + +L'utilisation d'un chargeur en direct pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections de contenu d'Astro, notamment des fonctions d'assistance spécifiques à l'API des collections telles que `getLiveCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-créées-au-moment-de-la-compilation), ainsi que d'une gestion utile des erreurs. + +:::tip +Trouvez des chargeurs en direct créés par la communauté et par des tiers dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). ::: -## Schémas JSON de collection +Consultez les principes de base de la [création d'un chargeur en direct](/fr/reference/content-loader-reference/#building-a-live-loader) à l'aide de l'API des chargeurs en direct + +### Utilisation des schémas Zod avec des collections en direct + +Vous pouvez utiliser des schémas Zod avec des collections en direct pour valider et transformer les données à l'exécution. Cette validation Zod fonctionne de la même manière que les [schémas pour les collections créées au moment de la compilation](#définition-dun-schéma-de-collection). + +Lorsque vous définissez un schéma pour une collection en direct, celui-ci a priorité sur [les types du chargeur en direct](/fr/reference/content-loader-reference/#the-liveloader-object) lorsque vous interrogez la collection : + +```ts title="src/live.config.ts" +import { defineLiveCollection } from 'astro:content'; +import { z } from 'astro/zod'; +import { apiLoader } from './loaders/api-loader'; + +const products = defineLiveCollection({ + loader: apiLoader({ endpoint: process.env.API_URL }), + schema: z + .object({ + id: z.string(), + name: z.string(), + price: z.number(), + // Transformer le format de catégorie de l'API + category: z.string().transform((str) => str.toLowerCase().replace(/\s+/g, '-')), + // Convertir la date en un objet Date + createdAt: z.coerce.date(), + }) + .transform((data) => ({ + ...data, + // Ajouter un champ de prix formaté + displayPrice: `${data.price.toFixed(2)} €`, + })), +}); + +export const collections = { products }; +``` + +Lors de l'utilisation de schémas Zod avec des collections en direct, les erreurs de validation sont automatiquement interceptées et renvoyées sous forme d'objets `AstroError` : + +```astro title="src/pages/store/index.astro" +--- +export const prerender = false; // Pas nécessaire en mode `server` + +import { LiveCollectionValidationError } from 'astro/content/runtime'; +import { getLiveEntry } from 'astro:content'; + +const { entry, error } = await getLiveEntry('products', '123'); + +// Vous pouvez gérer spécifiquement les erreurs de validation +if (LiveCollectionValidationError.is(error)) { + console.error(error.message); + return Astro.rewrite('/500'); +} + +// TypeScript sait que entry.data correspond à votre schéma Zod, et non au type du chargeur. +console.log(entry?.data.displayPrice); // p. ex., "29.99 €" +--- +``` + +Consultez le [fichier README de Zod](https://github.com/colinhacks/zod) pour obtenir la documentation complète sur le fonctionnement de Zod et les fonctionnalités disponibles. + + +### Accès aux données en direct + +Astro fournit des fonctions d'assistance pour les collections en direct permettant d'accéder aux données en temps réel à chaque requête et de renvoyer une ou plusieurs entrées de contenu. Celles-ci peuvent être utilisées de la même manière que leurs [homologues des collections générées au moment de la compilation](#interroger-les-collections-créées-au-moment-de-la-compilation). + +- [`getLiveCollection()`](/fr/reference/modules/astro-content/#getlivecollection) récupère une collection entière et renvoie un tableau d'entrées. +- [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) récupère une seule entrée d'une collection. + +Ces fonctions renvoient des entrées avec un identifiant unique (`id`) et un objet `data` contenant toutes les propriétés définies par le chargeur en direct. Lors de l'utilisation de chargeurs tiers ou communautaires distribués sous forme de paquets npm, veuillez consulter leur documentation pour connaître le format des données renvoyées. + +Vous pouvez utiliser ces fonctions pour accéder à vos données en direct, en transmettant le nom de la collection et, éventuellement, des conditions de filtrage. + +```astro title="src/pages/store/[slug].astro" +--- +export const prerender = false; // Pas nécessaire en mode `server` + +import { getLiveCollection, getLiveEntry } from 'astro:content'; + +// Utiliser des filtres spécifiques au chargeur +const { entries: draftArticles } = await getLiveCollection('articles', { + status: 'draft', + author: 'john-doe', +}); + +// Obtenir un produit spécifique par son identifiant +const { entry: product } = await getLiveEntry('products', Astro.params.slug); +--- +``` + +#### Restitution du contenu + +Si votre chargeur en direct [renvoie une propriété `rendered`](/fr/reference/content-loader-reference/#livedataentryrendered), vous pouvez utiliser [la fonction `render()` et le composant ``](#restitution-du-contenu) pour afficher votre contenu directement dans vos pages, en utilisant la même méthode que les collections générées au moment de la compilation. + +Vous avez également accès à toute [erreur renvoyée par le chargeur en direct](/fr/reference/content-loader-reference/#error-handling-in-live-loaders), par exemple, pour rediriger vers une page 404 lorsque le contenu ne peut pas être affiché : + +```astro title="src/pages/store/[id].astro" "render(entry)" "" +--- +export const prerender = false; // Pas nécessaire en mode `server` + +import { getLiveEntry, render } from 'astro:content'; +const { entry, error } = await getLiveEntry('articles', Astro.params.id); +if (error) { + return Astro.rewrite('/404'); +} + +const { Content } = await render(entry); +--- + +

{entry.data.title}

+ +``` + +#### Gestion des erreurs + +Les chargeurs en direct peuvent échouer en raison de problèmes de réseau, d'erreurs d'API ou de problèmes de validation. L'API est conçue pour rendre la gestion des erreurs explicite. + +Lorsque vous appelez `getLiveCollection()` ou `getLiveEntry()`, l'erreur sera l'une des suivantes : + +- Le type d'erreur défini par le chargeur (s'il a renvoyé une erreur) +- Une erreur `LiveEntryNotFoundError` si l'entrée est introuvable +- Une erreur `LiveCollectionValidationError` si les données de la collection ne correspondent pas au schéma attendu +- Une erreur `LiveCollectionCacheHintError` si l'indication de cache est invalide +- Une erreur `LiveCollectionError` pour les autres types d'erreurs, comme les erreurs non interceptées émises par le chargeur + +Vous pouvez utiliser `instanceof` pour vérifier le type d'une erreur lors de l'exécution : + +```astro title="src/pages/store/[id].astro" "LiveEntryNotFoundError.is(error)" +--- +export const prerender = false; // Pas nécessaire en mode `server` + +import { LiveEntryNotFoundError } from 'astro/content/runtime'; +import { getLiveEntry } from 'astro:content'; + +const { entry, error } = await getLiveEntry('produits', Astro.params.id); + +if (error) { + if (error instanceof LiveEntryNotFoundError) { + console.error(`Produit introuvable : ${error.message}`); + Astro.response.status = 404; + } else { + console.error(`Erreur lors du chargement du produit : ${error.message}`); + return Astro.redirect('/500'); + } +} +--- +``` + +## Utiliser des fichiers de schéma JSON dans votre éditeur

Astro génère automatiquement des fichiers de [schéma JSON](https://json-schema.org/) pour les collections, que vous pouvez utiliser dans votre éditeur pour obtenir IntelliSense et la vérification de type pour les fichiers de données. -Un fichier de schéma au format JSON est généré pour chaque collection de votre projet et envoyé dans le répertoire `.astro/collections/`. Par exemple, si vous avez deux collections, l'une nommée `authors` et l'autre `posts`, Astro générera `.astro/collections/authors.schema.json` et `.astro/collections/posts.schema.json`. +Un fichier de schéma JSON est généré pour chaque collection de votre projet et enregistré dans le répertoire `.astro/collections/`. +Par exemple, si vous avez deux collections, l'une nommée `auteurs` et l'autre nommée `articles`, Astro générera `.astro/collections/auteurs.schema.json` et `.astro/collections/articles.schema.json`. -### Utiliser des schémas JSON dans les fichiers JSON +

Utiliser des schémas JSON dans les fichiers JSON

-Vous pouvez pointer manuellement vers un schéma généré par Astro en définissant le champ `$schema` dans votre fichier JSON. -La valeur doit être un chemin d'accès au schéma relatif au fichier de données. -Dans l'exemple suivant, un fichier de données dans `src/data/authors/` utilise le schéma généré pour la collection `authors` : +Vous pouvez indiquer manuellement un schéma généré par Astro en définissant le champ `$schema` dans votre fichier JSON. +La valeur doit être un chemin relatif entre le fichier de données et le schéma. +Dans l'exemple suivant, un fichier de données situé dans `src/data/auteurs/` utilise le schéma généré pour la collection `auteurs` : -```json title="src/data/authors/armand.json" ins={2} +```json title="src/data/auteurs/armand.json" ins={2} { - "$schema": "../../../.astro/collections/authors.schema.json", - "name": "Armand", - "skills": ["Astro", "Starlight"] + "$schema": "../../../.astro/collections/auteurs.schema.json", + "nom": "Armand", + "competences": ["Astro", "Starlight"] } ``` -#### Utiliser un schéma pour un groupe de fichiers JSON dans VS Code +

Utiliser un schéma pour un groupe de fichiers JSON dans VS Code

-Dans VS Code, vous pouvez configurer un schéma applicable à tous les fichiers d'une collection grâce au [paramètre `json.schemas`](https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings). -Dans l'exemple suivant, tous les fichiers du répertoire `src/data/authors/` utiliseront le schéma généré pour la collection `authors` : +Dans VS Code, vous pouvez configurer un schéma à appliquer à tous les fichiers d'une collection à l'aide du paramètre [`json.schemas`](https://code.visualstudio.com/docs/languages/json#_json-schemas-and-settings). +Dans l'exemple suivant, tous les fichiers du répertoire `src/data/auteurs/` utiliseront le schéma généré pour la collection `auteurs` : ```json { "json.schemas": [ { - "fileMatch": ["/src/data/authors/**"], - "url": "./.astro/collections/authors.schema.json" + "fileMatch": ["/src/data/auteurs/**"], + "url": "./.astro/collections/auteurs.schema.json" } ] } ``` -### Utiliser des schémas dans les fichiers YAML dans VS Code +

Utiliser des schémas dans les fichiers YAML dans VS Code

-Dans VS Code, vous pouvez ajouter la prise en charge des schémas JSON dans les fichiers YAML grâce à l'extension [Red Hat YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml). -Une fois cette extension installée, vous pouvez référencer un schéma dans un fichier YAML à l'aide d'une syntaxe de commentaire spécifique : +Dans VS Code, vous pouvez ajouter la prise en charge de l'utilisation de schémas JSON dans les fichiers YAML à l'aide de l'extension [Red Hat YAML](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml). +Une fois cette extension installée, vous pouvez référencer un schéma dans un fichier YAML en utilisant une syntaxe de commentaire spéciale : -```yaml title="src/data/authors/armand.yml" ins={1} -# yaml-language-server: $schema=../../../.astro/collections/authors.schema.json -name: Armand -skills: +```yaml title="src/data/auteurs/armand.yml" ins={1} +# yaml-language-server: $schema=../../../.astro/collections/auteurs.schema.json +nom: Armand +competences: - Astro - Starlight ``` -#### Utiliser des schémas pour un groupe de fichiers YAML dans VS Code +

Utiliser des schémas pour un groupe de fichiers YAML dans VS Code

-Avec l'extension Red Hat YAML, vous pouvez configurer un schéma applicable à tous les fichiers YAML d'une collection grâce au paramètre `yaml.schemas`. -Dans l'exemple suivant, tous les fichiers YAML du répertoire `src/data/authors/` utiliseront le schéma généré pour la collection `authors` : +Avec l'extension Red Hat YAML, vous pouvez configurer un schéma à appliquer à tous les fichiers YAML d'une collection à l'aide du paramètre `yaml.schemas`. +Dans l'exemple suivant, tous les fichiers YAML du répertoire `src/data/auteurs/` utiliseront le schéma généré pour la collection `auteurs` : ```json { "yaml.schemas": { - "./.astro/collections/authors.schema.json": ["/src/content/authors/*.yml"] + "./.astro/collections/auteurs.schema.json": ["/src/content/auteurs/*.yml"] } } ``` -Consultez [« Association de schémas »](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml#associating-schemas) dans la documentation de l'extension Red Hat YAML pour plus de détails. - -## Quand créer une collection - -Vous pouvez [créer une collection](#définition-des-collections) à chaque fois que vous disposez d'un groupe de données ou de contenus associés qui partagent une structure commune. - -Une grande partie des avantages liés à l’utilisation des collections provient de : - -- La définition d'une structure de données commune pour valider qu'une entrée individuelle est « correcte » ou « complète », évitant ainsi les erreurs de production. -- API axées sur le contenu conçues pour rendre les requêtes intuitives (par exemple, `getCollection()` au lieu de `import.meta.glob()`) lors de l'importation et du rendu du contenu sur vos pages. -- Une [API de chargement de contenu](/fr/reference/content-loader-reference/) pour récupérer votre contenu qui fournit à la fois des chargeurs intégrés et un accès à l'API de bas niveau. Il existe plusieurs chargeurs tiers et communautaires disponibles, et vous pouvez créer votre propre chargeur personnalisé pour récupérer des données de n'importe où. -- La performance et l'évolutivité. L'API de couche de contenu permet de mettre en cache les données entre les compilations et convient à des dizaines de milliers d'entrées de contenu. - -[Définissez vos données](#définition-des-collections) comme une collection lorsque : - -- Vous avez plusieurs fichiers ou données à organiser qui partagent la même structure globale (par exemple, des articles de blog écrits en Markdown qui ont tous les mêmes propriétés de frontmatter). -- Vous disposez d'un contenu existant stocké à distance, par exemple dans un CMS, et vous souhaitez profiter des fonctions d'assistance des collections et de l'API de couche de contenu au lieu d'utiliser `fetch()` ou des SDK. -- Vous devez récupérer (des dizaines de) milliers de données connexes et avez besoin d'une méthode d'interrogation et de mise en cache capable de gérer à grande échelle. - -### Quand ne pas créer une collection - -Les collections offrent une excellente structure, sécurité et organisation lorsque vous avez **plusieurs éléments de contenu qui doivent partager les mêmes propriétés**. - -Les collections **ne sont peut-être pas votre solution** si : - -- Vous n'avez qu'une seule page ou un petit nombre de pages différentes. Envisagez plutôt de [créer des composants de page individuels](/fr/basics/astro-pages/) tels que `src/pages/about.astro` directement avec votre contenu. -- Vous affichez des fichiers qui ne sont pas traités par Astro, comme des fichiers PDF. Placez plutôt ces ressources statiques dans le [répertoire `public/`](/fr/basics/project-structure/#public) de votre projet. -- Votre source de données possède sa propre bibliothèque SDK/client pour les importations qui est incompatible avec ou n'offre pas de chargeur de contenu et vous préférez l'utiliser directement. -- Vous utilisez des API qui doivent être mises à jour en temps réel. Les collections de contenu ne sont mises à jour qu'au moment de la création. Par conséquent, si vous avez besoin de données en direct, utilisez d'autres méthodes d'[importation de fichiers](/fr/guides/imports/#instructions-dimportation) ou de [récupération de données](/fr/guides/data-fetching/) avec le [rendu à la demande](/fr/guides/on-demand-rendering/). +Consultez la section [« Associating schemas »](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml#associating-schemas) dans la documentation de l’extension YAML de Red Hat pour plus de détails. From 8d344c91826272212a74430f4b78be7bb53c1cfb Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 12 Mar 2026 16:52:24 +0100 Subject: [PATCH 03/11] fix some links --- src/content/docs/fr/guides/cms/cloudcannon.mdx | 2 +- src/content/docs/fr/guides/cms/keystatic.mdx | 2 +- src/content/docs/fr/guides/content-collections.mdx | 2 +- src/content/docs/fr/guides/integrations-guide/markdoc.mdx | 2 +- src/content/docs/fr/guides/integrations-guide/mdx.mdx | 4 ++-- src/content/docs/fr/guides/markdown-content.mdx | 2 +- src/content/docs/fr/guides/media/cloudinary.mdx | 2 +- .../docs/fr/guides/migrate-to-astro/from-create-react-app.mdx | 2 +- src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx | 4 ++-- src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx | 2 +- src/content/docs/fr/reference/cli-reference.mdx | 2 +- .../docs/fr/reference/errors/file-glob-not-supported.mdx | 2 +- .../docs/fr/reference/errors/file-parser-not-found.mdx | 2 +- src/content/docs/fr/tutorial/6-islands/4.mdx | 2 +- 14 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/docs/fr/guides/cms/cloudcannon.mdx b/src/content/docs/fr/guides/cms/cloudcannon.mdx index c179854c7f0c4..236e54fb7ca9e 100644 --- a/src/content/docs/fr/guides/cms/cloudcannon.mdx +++ b/src/content/docs/fr/guides/cms/cloudcannon.mdx @@ -144,7 +144,7 @@ L'exemple suivant créera un nouvel article de blog à partir de la collection ## Affichage du contenu de CloudCannon -Utilisez l'API des collections de contenu d'Astro pour [interroger et afficher vos articles et collections](/fr/guides/content-collections/#interroger-les-collections), comme vous le feriez dans n'importe quel projet Astro. +Utilisez l'API des collections de contenu d'Astro pour [interroger et afficher vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation), comme vous le feriez dans n'importe quel projet Astro. ### Affichage d'une liste pour une collection diff --git a/src/content/docs/fr/guides/cms/keystatic.mdx b/src/content/docs/fr/guides/cms/keystatic.mdx index fc007384db7c7..69a3b0cf96958 100644 --- a/src/content/docs/fr/guides/cms/keystatic.mdx +++ b/src/content/docs/fr/guides/cms/keystatic.mdx @@ -183,7 +183,7 @@ Visitez `http://127.0.0.1:4321/keystatic` dans le navigateur pour voir l'interfa ## Rendu du contenu Keystatic -Utilisez l'API des collections de contenu d'Astro pour [interroger et afficher vos articles et collections](/fr/guides/content-collections/#interroger-les-collections), comme vous le feriez dans n'importe quel projet Astro. +Utilisez l'API des collections de contenu d'Astro pour [interroger et afficher vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation), comme vous le feriez dans n'importe quel projet Astro. ### Affichage d'une liste de collections diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index 20f808fcbd5d1..8f7334e9c8dbf 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -185,7 +185,7 @@ export const collections = { blog }; #### Définition d'identifiants personnalisés -Lors de l'utilisation du [chargeur `glob()`](#le-chargeur-glob) avec des fichiers Markdown, MDX, Markdoc, JSON ou TOML, l'[`id`](/fr/reference/modules/astro-content/#collectionentryid) de chaque entrée de contenu est automatiquement généré dans un format compatible avec les URL à partir du nom du fichier. Cet identifiant unique (`id`) est utilisé pour interroger directement l'entrée dans votre collection. Il est également utile lors de la [création de nouvelles pages et URL à partir de votre contenu](#génération-de-routes-à-partir-du-contenu). +Lors de l'utilisation du [chargeur `glob()`](#le-chargeur-glob) avec des fichiers Markdown, MDX, Markdoc, JSON ou TOML, l'[`id`](/fr/reference/modules/astro-content/#collectionentryid) de chaque entrée de contenu est automatiquement généré dans un format compatible avec les URL à partir du nom du fichier. Cet identifiant unique (`id`) est utilisé pour interroger directement l'entrée dans votre collection. Il est également utile lors de la [création de nouvelles pages et URL à partir de votre contenu](#générer-des-routes-à-partir-du-contenu). Vous pouvez remplacer l'identifiant généré d'une entrée en ajoutant votre propre propriété `slug` à l'en-tête du fichier ou à l'objet de données pour les fichiers JSON. Cela est similaire à la fonctionnalité « lien permanent » d'autres frameworks web. diff --git a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx index d10cb10340b4c..d22053c9e4e75 100644 --- a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx @@ -113,7 +113,7 @@ Les fichiers Markdoc ne peuvent être utilisés que dans les collections de cont - quick-start.mdoc -Interrogez ensuite votre collection à l'aide des [API de collections de contenus](/fr/guides/content-collections/#interroger-les-collections) : +Ensuite, [interrogez et affichez vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) : ```astro title="src/pages/why-markdoc.astro" --- diff --git a/src/content/docs/fr/guides/integrations-guide/mdx.mdx b/src/content/docs/fr/guides/integrations-guide/mdx.mdx index 33c37c0f099fc..ed90b7e387445 100644 --- a/src/content/docs/fr/guides/integrations-guide/mdx.mdx +++ b/src/content/docs/fr/guides/integrations-guide/mdx.mdx @@ -96,9 +96,9 @@ Elle ajoute également des fonctionnalités supplémentaires au MDX standard, y Les fichiers `.mdx` doivent être écrits en [syntaxe MDX](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) plutôt qu'en syntaxe HTML d'Astro. -### Utilisation de MDX avec des collections de contenu +### Utilisation de MDX local avec des collections de contenu -Pour inclure des fichiers MDX dans une collection de contenus, assurez-vous que votre [chargeur de collection](/fr/guides/content-collections/#définir-le-chargeur-de-collection-loader) est configuré pour charger du contenu à partir de fichiers `.mdx` : +Pour inclure vos fichiers MDX locaux dans une collection de contenu, assurez-vous que votre [chargeur de collection](/fr/guides/content-collections/#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) est configuré pour charger le contenu à partir de fichiers `.mdx` : ```js title="src/content.config.ts" ins="mdx" import { defineCollection } from 'astro:content'; diff --git a/src/content/docs/fr/guides/markdown-content.mdx b/src/content/docs/fr/guides/markdown-content.mdx index a8f80b29f5689..cc4cabee800be 100644 --- a/src/content/docs/fr/guides/markdown-content.mdx +++ b/src/content/docs/fr/guides/markdown-content.mdx @@ -401,7 +401,7 @@ Lorsque vous utilisez la propriété frontmatter `layout`, vous devez inclure la Le processeur Markdown interne d'Astro n'est pas disponible pour le traitement du Markdown distant. -Pour récupérer du Markdown distant à utiliser dans des [collections de contenu](/fr/guides/content-collections/), vous pouvez [créer un chargeur personnalisé](/fr/guides/content-collections/#cr%C3%A9er-un-chargeur-personnalis%C3%A9) qui a accès à une [fonction `renderMarkdown()`](/fr/reference/content-loader-reference/#rendermarkdown). +Pour récupérer du Markdown distant à utiliser dans des [collections de contenu](/fr/guides/content-collections/), vous pouvez [créer un chargeur personnalisé](/fr/guides/content-collections/#chargeurs-personnalisés-au-moment-de-la-compilation) qui a accès à une [fonction `renderMarkdown()`](/fr/reference/content-loader-reference/#rendermarkdown). Pour récupérer directement du Markdown distant et le restituer au format HTML, vous devrez installer et configurer votre propre interpréteur de Markdown à partir de NPM. Celui-ci n'héritera pas des paramètres Markdown intégrés d'Astro que vous avez configurés. diff --git a/src/content/docs/fr/guides/media/cloudinary.mdx b/src/content/docs/fr/guides/media/cloudinary.mdx index 4369e888d6db3..e3643a455b3d1 100644 --- a/src/content/docs/fr/guides/media/cloudinary.mdx +++ b/src/content/docs/fr/guides/media/cloudinary.mdx @@ -134,7 +134,7 @@ export const collections = { } ``` -Vous pouvez ensuite utiliser les [fonctions de requête `getCollection()` ou `getEntry()`](/fr/guides/content-collections/#interroger-les-collections) pour sélectionner une ou plusieurs images ou vidéos de votre collection. +Vous pouvez ensuite utiliser les [fonctions de requête `getCollection()` ou `getEntry()`](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) pour sélectionner une ou plusieurs images ou vidéos de votre collection. Consultez la [documentation `cldAssetsLoader` de Cloudinary](https://astro.cloudinary.dev/cldassetsloader/basic-usage) pour plus d'informations. diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx index 9b10244eebd96..3595d3b191774 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx @@ -349,7 +349,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou [la récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) ou [la récupération de données distantes](/fr/guides/data-fetching/). ### La mise en forme de CRA à Astro diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx index 4ffe959e29a30..143b232d91ff8 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx @@ -36,7 +36,7 @@ Lorsque vous recréez votre site Gatsby dans Astro, vous remarquerez quelques di - [Les composants `.astro`](/fr/basics/astro-components/) ne sont pas écrits sous forme de fonctions exportées renvoyant des modèles de page. Au lieu de cela, vous diviserez votre code en un « délimiteur de code » pour votre JavaScript et en un corps dédié au HTML que vous générez. -- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. +- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. ## Convertir votre projet Gatsby @@ -355,7 +355,7 @@ Vous pouvez en apprendre davantage sur [l'utilisation d'images dans Astro](/fr/g Supprimez toutes les références aux requêtes GraphQL et utilisez à la place [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour accéder aux données de vos fichiers locaux. -Ou, si vous utilisez des collections de contenu, interrogez vos fichiers Markdown et MDX dans `src/content/` en utilisant [`getEntry()` et `getCollection()`](/fr/guides/content-collections/#interroger-les-collections). +Ou, si vous utilisez des collections de contenu, interrogez vos fichiers Markdown et MDX dans `src/content/` en utilisant [`getEntry()` et `getCollection()`](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation). Ces demandes de données sont réalisées dans le frontmatter du composant Astro utilisant ces données. diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx index e4c7e75433a6d..f016ada9b1571 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx @@ -405,7 +405,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur les [importations de fichiers locaux avec `import.meta.glob()`](/fr/guides/imports/#importmetaglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections) ou la [récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur les [importations de fichiers locaux avec `import.meta.glob()`](/fr/guides/imports/#importmetaglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) ou la [récupération de données distantes](/fr/guides/data-fetching/). ### Les styles : de Next vers Astro diff --git a/src/content/docs/fr/reference/cli-reference.mdx b/src/content/docs/fr/reference/cli-reference.mdx index b7e9a5cb9266b..bb6ccb15c4f8d 100644 --- a/src/content/docs/fr/reference/cli-reference.mdx +++ b/src/content/docs/fr/reference/cli-reference.mdx @@ -420,7 +420,7 @@ astro --config config/astro.config.mjs dev

-Vide le [cache de la couche de contenu](/fr/guides/content-collections/#définir-le-chargeur-de-collection-loader), forçant une nouvelle compilation complète. +Vide le cache de la couche de contenu, forçant une nouvelle compilation complète. ### `--mode ` diff --git a/src/content/docs/fr/reference/errors/file-glob-not-supported.mdx b/src/content/docs/fr/reference/errors/file-glob-not-supported.mdx index aa796b5be5591..fd7446b81b746 100644 --- a/src/content/docs/fr/reference/errors/file-glob-not-supported.mdx +++ b/src/content/docs/fr/reference/errors/file-glob-not-supported.mdx @@ -11,4 +11,4 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/ Le chargeur `file` doit recevoir un seul fichier local. Les motifs glob ne sont pas pris en charge. Utilisez le chargeur `glob` intégré pour créer des entrées à partir de motifs comprenant plusieurs fichiers locaux. **Voir aussi :** -- [Chargeurs intégrés d'Astro](/fr/guides/content-collections/#chargeurs-intégrés) +- [Chargeur `file()` intégré à Astro](/fr/reference/content-loader-reference/#le-chargeur-file) diff --git a/src/content/docs/fr/reference/errors/file-parser-not-found.mdx b/src/content/docs/fr/reference/errors/file-parser-not-found.mdx index 76563df57aec2..f777bf5afaea5 100644 --- a/src/content/docs/fr/reference/errors/file-parser-not-found.mdx +++ b/src/content/docs/fr/reference/errors/file-parser-not-found.mdx @@ -10,4 +10,4 @@ githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/ Le chargeur `file` ne peut pas déterminer quel analyseur utiliser. Veuillez fournir un analyseur personnalisé (par exemple `csv-parse`) pour créer une collection à partir de votre type de fichier. **Voir aussi :** -- [Transmettre un analyseur (`parser`) au chargeur `file`](/fr/guides/content-collections/#fonction-parser) +- [Transmettre un analyseur (`parser`) au chargeur `file`](/fr/reference/content-loader-reference/#parser) diff --git a/src/content/docs/fr/tutorial/6-islands/4.mdx b/src/content/docs/fr/tutorial/6-islands/4.mdx index 82681b420250f..939db5b7c5307 100644 --- a/src/content/docs/fr/tutorial/6-islands/4.mdx +++ b/src/content/docs/fr/tutorial/6-islands/4.mdx @@ -149,7 +149,7 @@ Effectuez une mise à niveau vers la dernière version d'Astro et mettez à nive 1. Créez un fichier de page appelé `src/pages/posts/[...slug].astro`. Vos fichiers Markdown et MDX ne deviennent plus automatiquement des pages utilisant le routage basé sur les fichiers d'Astro lorsqu'ils se trouvent dans une collection. Vous devez donc créer une page chargée de générer chaque article de blog individuel. -2. Ajoutez le code suivant pour [interroger votre collection](/fr/guides/content-collections/#interroger-les-collections) afin de rendre le slug et le contenu de chaque page d'article de blog disponibles pour chaque page qu'elle générera : +2. Ajoutez le code suivant pour [interroger votre collection](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) afin de rendre le slug et le contenu de chaque page d'article de blog disponibles pour chaque page qu'elle générera : ```astro title="src/pages/posts/[...slug].astro" --- From 4a5a0a0df58b32a605576c438c1b0d5cb2353176 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 12 Mar 2026 19:33:12 +0100 Subject: [PATCH 04/11] fix self-referencing link --- src/content/docs/fr/guides/content-collections.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index 8f7334e9c8dbf..692ff4af6872c 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -419,7 +419,7 @@ relatedPosts: --- ``` -Ces références seront transformées en objets contenant les noms de propriété `collection` et `id`, vous permettant de les [interroger facilement dans vos modèles](/fr/guides/content-collections/#accès-aux-données-référencées). +Ces références seront transformées en objets contenant les noms de propriété `collection` et `id`, vous permettant de les [interroger facilement dans vos modèles](#accès-aux-données-référencées). ## Interroger les collections créées au moment de la compilation From 5c1640c21f86a8364775f204eb9101b679bbe68a Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 12 Mar 2026 22:49:59 +0100 Subject: [PATCH 05/11] i18n(fr): update `content-loader-reference.mdx` See #12322 --- .../fr/reference/content-loader-reference.mdx | 1148 ++++++++++++++--- 1 file changed, 992 insertions(+), 156 deletions(-) diff --git a/src/content/docs/fr/reference/content-loader-reference.mdx b/src/content/docs/fr/reference/content-loader-reference.mdx index 666bc4293b9f4..e0669fafb812e 100644 --- a/src/content/docs/fr/reference/content-loader-reference.mdx +++ b/src/content/docs/fr/reference/content-loader-reference.mdx @@ -1,22 +1,28 @@ --- -title: API du chargeur de contenu d'Astro +title: API des chargeurs de contenu d'Astro sidebar: - label: API du chargeur de contenu + label: API des chargeurs de contenu i18nReady: true +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 3 --- import Since from '~/components/Since.astro'; +import ReadMore from '~/components/ReadMore.astro'; -L'API du chargeur de contenu d'Astro (Content Loader) vous permet de charger vos données à partir de n'importe quelle source, locale ou distante, et d'interagir avec la couche de contenu d'Astro pour gérer vos [collections de contenu](/fr/guides/content-collections/). +L'API des chargeurs de contenu d'Astro (Content Loader) vous permet de charger vos données à partir de n'importe quelle source, locale ou distante, et d'interagir avec la couche de contenu d'Astro pour gérer vos [collections de contenu](/fr/guides/content-collections/). -## Qu'est-ce qu'un chargeur ? +Cette API inclut deux chargeurs prêts à l'emploi pour le contenu stocké localement. Elle fournit également des outils permettant de créer vos propres objets personnalisés capables de charger des données depuis n'importe quelle source dans des collections de contenu. -Les chargeurs Astro vous permettent de charger des données dans des [collections de contenu](/fr/guides/content-collections/), qui peuvent ensuite être utilisées dans des pages et des composants. Les [chargeurs intégrés `glob()` et `file()`](/fr/guides/content-collections/#chargeurs-intégrés) sont utilisés pour charger le contenu du système de fichiers, et vous pouvez créer vos propres chargeurs pour charger le contenu à partir d'autres sources. +Apprenez-en davantage sur [l'interrogation des données chargées au moment de la compilation à l'aide de chargeurs](/fr/guides/content-collections/#querying-build-time-collections) ou [l'accès aux données en direct à partir des chargeurs en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation dans le guide des collections de contenu. -Chaque collection a besoin [d'un chargeur défini dans son schéma](/fr/guides/content-collections/#définir-le-chargeur-de-collection-loader). Vous pouvez définir un chargeur incorporé au fichier `src/content.config.ts` de votre projet, partager un chargeur entre plusieurs collections, ou même [publier votre chargeur sur NPM en tant que paquet](/fr/reference/publish-to-npm/) à partager avec d'autres et à inclure dans notre bibliothèque d'intégrations. +## Chargeurs utilisés lors de la compilation -## Chargeurs intégrés +Les chargeurs utilisés lors de la compilation sont des objets dotés d'une [méthode `load()`](#loaderload) appelée lors de la compilation pour récupérer les données et mettre à jour le magasin de données. Cet objet peut également définir un schéma pour les entrées, qui peut être utilisé pour valider les données et générer des types statiques. -Astro propose deux systèmes de chargement intégrés pour vous aider à récupérer vos collections. Les deux offrent des options qui conviennent à un large choix de cas d'utilisation. +Les chargeurs [`glob()`](#glob-loader) et [`file()`](#file-loader) d'Astro sont des exemples de chargeurs d'objets fournis prêts à l'emploi pour une utilisation avec du contenu local. Pour le contenu distant, aucun chargeur prédéfini n'est fourni. Vous devrez créer un chargeur d'objets ou utiliser un [chargeur publié par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) pour récupérer le contenu distant et interagir avec le magasin de données. + +Pour une simple récupération de données, vous pouvez également [définir un chargeur en tant qu'une fonction asynchrone](#définir-un-chargeur-comme-une-fonction) qui renvoie un tableau ou un objet contenant des entrées. ### Le chargeur `glob()` @@ -30,19 +36,17 @@ Le chargeur `glob()` crée des entrées à partir de répertoires de fichiers si Ce chargeur accepte un objet avec les propriétés suivantes : `pattern`, `base` (optionnel), `generateId` (optionnel) et `retainBody` (optionnel). -```ts title="src/content.config.ts" {2,6,11,17-21, 27-31} +```ts title="src/content.config.ts" import { defineCollection } from 'astro:content'; import { glob } from 'astro/loaders'; const pages = defineCollection({ /* Récupère tous les fichiers Markdown dans votre répertoire de pages. */ loader: glob({ pattern: "**/*.md", base: "./src/data/pages" }), - schema: /* ... */ }); const blog = defineCollection({ /* Récupère tous les fichiers Markdown et MDX dans le répertoire de votre blog. */ loader: glob({ pattern: "**/*.(md|mdx)", base: "./src/data/blog" }), - schema: /* ... */ }); const notes = defineCollection({ /* Récupére tous les fichiers Markdown de votre répertoire de notes et empêche @@ -62,8 +66,9 @@ const authors = defineCollection({ base: "./src/data/authors", generateId: ({ entry }) => entry.replace(/\.json$/, ''), }), - schema: /* ... */ }); + +export const collections = { pages, blog, authors }; ``` #### `pattern` @@ -116,7 +121,7 @@ Lorsque `retainBody` est défini sur `false`, [`entry.body`](/fr/reference/modul Définir cette propriété sur `false` réduit considérablement la taille déployée du magasin de données et permet d'éviter d'atteindre les limites de taille pour les sites comportant de très grandes collections. -Pour les fichiers Markdown, le contenu rendu sera toujours disponible dans la propriété [`entry.rendered.html`](/fr/reference/content-loader-reference/#rendered), et la propriété [`entry.filePath`](/fr/reference/content-loader-reference/#filepath) pointera toujours vers le fichier d'origine. +Pour les fichiers Markdown, le contenu rendu sera toujours disponible dans la propriété [`entry.rendered.html`](#dataentryrenderedhtml), et la propriété [`entry.filePath`](#dataentryfilepath) pointera toujours vers le fichier d'origine. Pour les collections MDX, cela réduira considérablement leur taille, puisqu'aucun contenu ne sera plus conservé en magasin. @@ -128,26 +133,28 @@ Pour les collections MDX, cela réduira considérablement leur taille, puisqu'au

-Le chargeur `file()` crée des entrées à partir d'un seul fichier contenant un tableau d'objets avec un champ `id` unique, ou un objet avec des identifiants comme clés et des entrées comme valeurs. Il supporte JSON, YAML ou TOML, et vous pouvez fournir un `parser` personnalisé pour les fichiers de données qu'il ne peut pas analyser par défaut. +Le chargeur `file()` crée des entrées à partir d'un seul fichier contenant un tableau d'objets avec un champ `id` unique, ou un objet avec des identifiants comme noms de propriété et des entrées comme valeurs. + +Il prend en charge les fichiers JSON, YAML ou TOML et vous pouvez fournir un `parser` personnalisé pour les fichiers de données qu'il ne peut pas analyser par défaut, ou pour analyser les données de manière asynchrone. Ce chargeur accepte une propriété `fileName` et un objet optionnel comme second argument : -```ts title="src/content.config.ts" {2,6,11-13} +```ts title="src/content.config.ts" import { defineCollection } from 'astro:content'; import { file } from 'astro/loaders'; const authors = defineCollection({ /* Récupère toutes les entrées d'un fichier JSON. */ loader: file("src/data/authors.json"), - schema: /* ... */ }); const products = defineCollection({ /* Récupère toutes les entrées d'un fichier CSV à l'aide d'un analyseur personnalisé. */ loader: file("src/data/products.csv", { parser: (fileContent) => { /* la logique de votre analyseur */ }, }), - schema: /* ... */ }); + +export const collections = { authors, products }; ``` #### `fileName` @@ -175,147 +182,634 @@ Un objet optionnel avec les propriétés suivantes : **Type :** `(text: string) => Record> | Array> | Promise> | Array>>`

-Une fonction de rappel pour créer une collection à partir du contenu d'un fichier. Utilisez-la lorsque vous avez besoin de traiter des fichiers non pris en charge par défaut (par exemple `.csv`) ou lorsque vous utilisez des [documents `.json` imbriqués](/fr/guides/content-collections/#documents-json-imbriqués). +Une fonction de rappel pour créer une collection à partir du contenu d'un fichier. Utilisez-la lorsque vous devez traiter des fichiers autres que JSON, YAML ou TOML qui ne sont pas pris en charge par défaut (par exemple, `.csv`) ou lorsque vous utilisez des [documents `.json` imbriqués](/fr/guides/content-collections/#documents-json-imbriqués). + +### Création d'un chargeur + +L'API des chargeurs de contenu est flexible et complète, offrant diverses options de récupération de données. Il est possible de créer des chargeurs simples ou complexes. Votre chargeur personnalisé dépendra à la fois de la source et de la structure de vos données, ainsi que de la manière dont vous choisissez de gérer la couche de stockage persistant des données. + +La plupart des chargeurs exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur](#the-loader-object) comprenant un nom (`name`) pour votre chargeur, une méthode `load()` et un `schema` définissant vos entrées. + +#### Chargement de collections dans le magasin de données + +La fonction [`load()`](#loaderload) renvoyée dans l'objet loader définit comment votre contenu est récupéré, analysé, validé et mis à jour. Il accepte un objet `context` qui vous permet de personnaliser la gestion de vos données de diverses manières et d'interagir avec le magasin de données. Une fonction `load()` typique va : + +- Récupérer vos données à partir d'une source. +- Effacer le magasin de données existant. +- Analyser et valider vos données selon un schéma fourni. +- Mettre à jour le magasin de données avec les nouvelles entrées. + +La méthode `load()` fournit également des fonctions d'assistance pour enregistrer des messages dans la console, générer du contenu en HTML, surveiller les modifications en mode développement et recharger les données, donner accès aux métadonnées +et même à la configuration complète d'Astro, et bien plus encore. + +Consultez la liste complète des propriétés de [`LoaderContext`](#loadercontext) pour connaître toutes les options disponibles pour la fonction `load()`. + +#### Fournir un schéma + +Fournir un [`schema`](#loaderschema) Zod dans votre chargeur vous permet de valider les entrées de contenu récupérées avec [`parseData()`](#loadercontextparsedata) avant de les ajouter au [magasin](#loadercontextstore) de données. Ce schéma sera également utilisé comme schéma par défaut de la collection si aucun schéma n'est défini dans `src/content.config.ts`, afin de garantir la sûreté du typage et l'accès aux outils de l'éditeur. Vous n'avez pas non plus besoin de définir un schéma dans la collection de contenu si le chargeur fournit cette propriété. + +Toutefois, si la collection de contenu [définit également un schéma](/fr/guides/content-collections/#defining-the-collection-schema), ce schéma sera utilisé à la place de celui de votre chargeur. Ceci permet aux utilisateurs de votre chargeur d'étendre son schéma ou de transformer des données pour leurs projets. Si vous [publiez et distribuez un chargeur](#distributing-your-loader), vous souhaiterez peut-être documenter ce comportement et inciter les utilisateurs à ne pas définir eux-mêmes de schéma de collection, ou leur indiquer comment le faire en toute sécurité s'ils ont besoin de données renvoyées dans un format différent. + +Si vous devez générer dynamiquement le schéma en fonction des options de configuration ou en introspectant une API, vous pouvez utiliser [`createSchema()`](#loadercreateschema) à la place. + +#### Exemple de chargeur + +L'exemple suivant montre un chargeur qui récupère des données à partir d'une URL de flux fournie (à l'aide d'un utilitaire `loadFeedData` personnalisé) et met à jour le magasin de données avec de nouvelles entrées à chaque fois que le site est compilé : + +```ts title="src/feed-loader.ts" +// 1. Importer le type `Loader` et toutes les autres dépendances nécessaires. +import type { Loader } from 'astro/loaders'; +import { z } from 'astro/zod'; +import { loadFeedData } from "./feed.js"; + +// 2. Définir les options requises par votre chargeur +export function myLoader(options: { url: string, apiKey: string }) { + const feedUrl = new URL(options.url); + // 3. Renvoyer un objet décrivant le chargeur + return { + name: "feed-loader", + load: async ({ store, parseData }) => { + const feed = await loadFeedData(feedUrl, options.apiKey); + + store.clear(); + + for (const item of feed.items) { + const id = item.guid; + const data = await parseData({ + id, + data: item, + }); + store.set({ + id, + data, + }); + } + }, + // 4. Définir le schéma d'une entrée. + schema: z.object({ + // ... + }) + } satisfies Loader; +} +``` + +#### Définir votre collection avec votre chargeur + +Utilisez votre chargeur personnalisé comme valeur de la propriété `loader` lorsque vous définissez votre collection dans `src/content.config.ts`. Les options de configuration peuvent être transmises à votre chargeur en tant qu'arguments : + +```ts title="src/content.config.ts" +import { defineCollection } from 'astro:content'; +import { feedLoader } from './feed-loader.ts'; + +const blog = defineCollection({ + loader: feedLoader({ + url: "https://api.example.com/articles", + apiKey: "mon-secret", + }), +}); + +export const collections = { blog }; +``` -## Types de chargeurs +### Définir un chargeur sous forme de fonction -Les chargeurs peuvent être définis soit comme une simple fonction qui renvoie un tableau d'entrées, soit avec l'API du chargeur de contenu sous forme d'objet plus puissante pour plus de contrôle sur le processus de chargement. +Pour les extractions de données simples qui ne nécessitent pas de gestion personnalisée du magasin de données, de validation, de journalisation ou d'autres aides fournies par l'[objet de chargement utilisé au moment de la compilation](#the-loader-object), vous pouvez définir votre chargeur sous forme de fonction. -### Chargeurs incorporés +La fonction peut être asynchrone et doit renvoyer soit un tableau d'entrées contenant chacune un champ `id` unique, soit un objet où chaque nom de propriété est un identifiant unique et chaque valeur représente l'entrée. -Un chargeur incorporé au document est une fonction asynchrone qui renvoie un tableau ou un objet contenant des entrées. Utilisez-le pour les chargeurs simples, en particulier ceux qui sont définis au sein du fichier `src/content.config.ts`. +Ce modèle fournit un raccourci pratique pour accomplir les tâches de base normalement effectuées par la fonction `load()` pour [charger les collections dans le magasin de données](#loading-collections-into-the-data-store). Lors de la compilation, le chargeur effacera automatiquement le magasin de données et rechargera toutes les entrées. Aucune autre option de personnalisation ni fonction d'assistance pour la gestion des données n'est fournie. -La fonction peut être asynchrone et doit renvoyer soit un tableau d'entrées contenant chacune un champ `id` unique, soit un objet où chaque clé est un ID unique et chaque valeur est l'entrée. Chaque fois que le chargeur est appelé, il efface le magasin et recharge toutes les entrées. +Ces chargeurs sont souvent suffisamment simples pour que vous puissiez choisir de les définir directement dans le fichier `src/content.config.ts` : ```ts title="src/content.config.ts" +import { defineCollection } from "astro:content"; + const countries = defineCollection({ loader: async () => { const response = await fetch("https://restcountries.com/v3.1/all"); const data = await response.json(); // Doit renvoyer un tableau d'entrées avec une propriété id - // ou un objet avec des identifiants comme clés et des entrées comme valeurs + // ou un objet dont les noms de propriétés sont les identifiants et les valeurs les entrées return data.map((country) => ({ id: country.cca3, ...country, })); }, - schema: /* ... */ }); + +export const collections = { countries }; ``` -### Chargeurs sous forme d'objet +## Chargeurs en direct -Un chargeur est un objet doté d'une méthode `load()` qui est appelée au moment de la compilation pour récupérer des données et mettre à jour le magasin de données. Il permet de mettre à jour les entrées de manière incrémentielle ou de vider le magasin uniquement lorsque cela est nécessaire. Il peut également définir un schéma pour les entrées, qui peut être utilisé pour valider les données et générer des types statiques. +L'API des chargeurs en direct est conçue pour interroger n'importe quelle donnée en temps réel. Les chargeurs en direct peuvent filtrer les données entrantes et vérifier leur contenu en garantissant la sûreté du typage. Étant donné que les chargeurs en direct récupèrent les données à jour à chaque requête, il n'y a pas de magasin de données à mettre à jour. Ces chargeurs sont conçus pour renvoyer soit des données, soit un objet `Error` afin de vous permettre de gérer les erreurs en douceur. -Le modèle recommandé consiste à définir une fonction qui accepte les options de configuration et renvoie l'objet chargeur, de la même manière que vous définiriez normalement une intégration Astro ou un module d'extension Vite. +### Création d'un chargeur en direct +La plupart des chargeurs en direct exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur en direct](#the-liveloader-object) comprenant un `nom` pour votre chargeur et deux méthodes pour définir comment charger votre collection d'entrées et comment charger une seule entrée : `loadCollection()` et `loadEntry()`. -```ts title=loader.ts -import type { Loader, LoaderContext } from 'astro/loaders'; -import { z } from 'astro/zod'; -import { loadFeedData } from "./feed.js"; +#### Chargement des données en direct -// Définir toutes les options dont le chargeur a besoin -export function myLoader(options: { url: string, apiKey: string }): Loader { - // Configurer le chargeur - const feedUrl = new URL(options.url); - // Renvoyer un objet chargeur +Pour renvoyer des données à propos de votre collection, vous devez fournir une fonction [`loadCollection()`](#liveloaderloadcollection) qui récupère les données et renvoie un tableau d'[entrées (`entries`)](#livedatacollectionentries) de contenu ou une erreur. + +Pour renvoyer une seule entrée de collection en direct, vous devez fournir une fonction [`loadEntry()`](#liveloaderloadentry) qui récupère des données filtrées pour un `id` donné et renvoie une seule [entrée (`entry`)](#livedataentry), `undefined` ou une erreur. + +La récupération des données pour ces deux fonctions est généralement effectuée à l'aide d'une [instruction `try...catch`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/try...catch) pour [gérer les erreurs lors de l'accès aux données en direct](#error-handling-in-live-loaders). + +Consultez l'intégralité de l'[API des chargeurs en direct](#live-loader-api) pour en savoir plus sur les fonctions et les types disponibles pour la création de votre chargeur en direct. + +#### Fourniture d'un schéma pour les chargeurs en direct + +Les chargeurs en direct ne comportent pas de propriété de schéma. Vous pouvez toutefois garantir la sûreté du typage en [définissant un schéma Zod pour votre collection](/fr/guides/content-collections/#using-zod-schemas-with-live-collections) dans `src/live.config.ts`, ou en passant des types génériques à l'interface `LiveLoader` pour les données qu'ils renvoient. + +#### Exemple de chargeur en direct + +L'exemple suivant montre un chargeur en direct qui définit la récupération de données à partir d'un CMS (à l'aide d'un utilitaire `fetchFromCMS` personnalisé) pour une collection d'entrées et une entrée unique, incluant la sûreté du typage et la gestion des erreurs : + +```ts title="src/article-loader.ts" +import type { LiveLoader } from 'astro/loaders'; +import { fetchFromCMS } from './cms-client.js'; + +interface Article { + id: string; + title: string; + htmlContent: string; + author: string; +} + +interface EntryFilter { + id: string; +} + +interface CollectionFilter { + author?: string; +} + +export function articleLoader(config: { apiKey: string }): LiveLoader { return { - name: "my-loader", - // Appelé lors de la mise à jour de la collection. - load: async (context: LoaderContext): Promise => { - // Charger les données et mettre à jour le magasin - const response = await loadFeedData(feedUrl, options.apiKey); + name: 'article-loader', + loadCollection: async ({ filter }) => { + try { + const articles = await fetchFromCMS({ + apiKey: config.apiKey, + type: 'article', + filter, + }); + + return { + entries: articles.map((article) => ({ + id: article.id, + data: article, + })), + }; + } catch (error) { + return { + error: new Error('Impossible de charger les articles', { cause: error }), + }; + } + }, + loadEntry: async ({ filter }) => { + try { + // Le filtre sera { id: "un-id" } lorsqu'il sera appelé avec une chaîne de caractères. + const article = await fetchFromCMS({ + apiKey: config.apiKey, + type: 'article', + id: filter.id, + }); + + if (!article) { + return { + error: new Error('Article introuvable'), + }; + } + + return { + id: article.id, + data: article, + rendered: { + html: article.htmlContent, + }, + }; + } catch (error) { + return { + error: new Error("Impossible de charger l'article", { cause: error }), + }; + } }, - // En option, définir le schéma d'une entrée. - // Il sera remplacé par le schéma défini par l'utilisateur. - schema: async () => z.object({ - // ... - }) }; } ``` -Ces options de configuration peuvent ensuite être définies lors de la définition d'une collection : +#### Définir votre collection en direct avec votre chargeur -```ts title="src/content.config.ts" {3,6-9} -import { defineCollection } from 'astro:content'; -import { z } from 'astro/zod'; -import myLoader from '../../loader.ts'; +Utilisez votre chargeur en direct personnalisé comme valeur de la propriété `loader` lorsque vous définissez votre collection dans `src/live.config.ts`. Les options de configuration peuvent être transmises à votre chargeur en tant qu'arguments : + +```ts title="src/live.config.ts" {2,5-7} +import { defineLiveCollection } from 'astro:content'; +import { articleLoader } from './article-loader.ts'; -const blog = defineCollection({ - loader: myLoader({ - url: "https://api.example.com/posts", +const blog = defineLiveCollection({ + loader: articleLoader({ apiKey: "mon-secret", - }), - schema: /* ... */ -}); + }), +}); + +export const collections = { blog }; +``` + +#### Gestion des erreurs dans les chargeurs en direct + +Les chargeurs en direct renvoient une sous-classe [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) pour les erreurs. Vous pouvez créer des [types d'erreurs personnalisés](#creating-live-loader-error-types) et les utiliser pour une gestion des erreurs plus spécifique si nécessaire. Si une erreur est émise dans le chargeur en direct, elle sera interceptée et renvoyée, encapsulée dans un `LiveCollectionError`. + +Astro générera lui-même certaines erreurs, en fonction de la réponse du chargeur en direct : + +- Si `loadEntry` renvoie `undefined`, Astro renverra une erreur `LiveEntryNotFoundError` à l'utilisateur. +- Si un schéma est défini pour la collection et que les données ne correspondent pas au schéma, Astro renverra une erreur `LiveCollectionValidationError`. +- Si le chargeur renvoie une indication de cache invalide, Astro renverra une exception `LiveCollectionCacheHintError`. Le champ `cacheHint` est facultatif ; si vous n'avez pas de données valides à renvoyer, vous pouvez simplement l'omettre. + +```ts title="mon-chargeur.ts" {10-12} +import type { LiveLoader } from 'astro/loaders'; +import type { MyData } from "./types"; +import { MyLoaderError } from './errors'; + +export function myLoader(config): LiveLoader { + return { + name: 'mon-chargeur', + loadCollection: async () => { + // Renvoyer votre type d'erreur personnalisé + return { + error: new MyLoaderError('Échec du chargement', 'LOAD_ERROR'), + }; + }, + // ... + }; +} +``` + +##### Création des types d'erreurs du chargeur en direct + +Vous pouvez créer des types d'erreurs personnalisés pour les [erreurs renvoyées par votre chargeur](#error-handling-in-live-loaders) et les transmettre en tant que type générique pour obtenir un typage correct : + +```ts title="mon-chargeur.ts" +import type { LiveLoader } from "astro/loaders"; +import type { MyData } from "./types" + +export class MyLoaderError extends Error { + constructor(message: string, public code?: string) { + super(message); + this.name = 'MyLoaderError'; + } +} + +export function myLoader(config): LiveLoader { + return { + name: 'mon-chargeur', + loadCollection: async () => { + // Renvoyer votre type d'erreur personnalisé + return { + error: new MyLoaderError('Échec du chargement', 'LOAD_ERROR'), + }; + }, + // ... + }; +} +``` + +Lorsque vous utilisez `getLiveCollection()` ou `getLiveEntry()`, TypeScript déduira le type d'erreur personnalisé, vous permettant ainsi de gérer l'erreur de manière appropriée : + +```astro +--- +export const prerender = false; // Pas nécessaire en mode `server` + +import { getLiveEntry } from 'astro:content'; +import { MyLoaderError } from "../my-loader"; + +const { entry, error } = await getLiveEntry('products', '123'); + +if (error) { + if (error instanceof MyLoaderError) { + console.error(`Erreur du chargeur : ${error.message} (code : ${error.code})`); + } else { + console.error(`Erreur inattendue : ${error.message}`); + } + return Astro.rewrite('/500'); +} +--- +``` + +#### Définition de types de filtres personnalisés + +Les chargeurs en direct peuvent définir des types de filtres personnalisés pour `getLiveCollection()` et `getLiveEntry()`. Cela permet d'effectuer des requêtes bénéficiant de la sûreté du typage et adaptées aux capacités de votre API, ce qui facilite la découverte des filtres disponibles par les utilisateurs et leur permet de s'assurer de leur utilisation correcte. Si vous incluez des commentaires JSDoc dans les types de vos filtres, l'utilisateur les verra dans son IDE sous forme d'indications lors de l'utilisation du chargeur. + +```ts title="store-loader.ts" "EntryFilter, CollectionFilter" {6,8} +import type { LiveLoader } from 'astro/loaders'; +import { fetchProduct, fetchCategory, type Product } from './store-client'; + +interface CollectionFilter { + category?: string; + /** Prix minimum pour filtrer les produits */ + minPrice?: number; + /** Prix maximum pour filtrer les produits */ + maxPrice?: number; +} + +interface EntryFilter { + /** Alias pour `sku` */ + id?: string; + slug?: string; + sku?: string; +} + +export function productLoader(config: { + apiKey: string; + endpoint: string; +}): LiveLoader { + return { + name: 'product-loader', + loadCollection: async ({ filter }) => { + // Le filtre est de type `CollectionFilter` + const data = await fetchCategory({ + apiKey: config.apiKey, + category: filter?.category ?? 'all', + minPrice: filter?.minPrice, + maxPrice: filter?.maxPrice, + }); + + return { + entries: data.products.map((product) => ({ + id: product.sku, + data: product, + })), + }; + }, + loadEntry: async ({ filter }) => { + // Le filtre est de type `EntryFilter | { id: string }` + const product = await fetchProduct({ + apiKey: config.apiKey, + slug: filter.slug, + sku: filter.sku || filter.id, + }); + if (!product) { + return { + error: new Error('Produit introuvable'), + }; + } + return { + id: product.sku, + data: product, + }; + }, + }; +} +``` + +#### Indications de cache + +Les chargeurs en direct peuvent fournir des indications de cache pour faciliter la mise en cache des réponses. Vous pouvez utiliser ces données pour envoyer des en-têtes de cache HTTP ou pour orienter votre stratégie de mise en cache. + +```ts title="mon-chargeur.ts" +import type { LiveLoader } from "astro/loaders"; +import { loadStoreProduct, loadStoreProducts, getLastModifiedDate } from "./store"; +import type { Product, ProductEntryFilter, ProductCollectionFilter } from "./types"; + +export function myLoader(config): LiveLoader { + return { + name: 'cached-loader', + loadCollection: async ({ filter }) => { + const products = await loadStoreProducts(filter); + return { + entries: products.map((item) => ({ + id: item.id, + data: item, + // Vous pouvez éventuellement fournir des indications de cache pour chaque entrée. + cacheHint: { + tags: [`produit-${item.id}`, `categorie-${item.category}`], + }, + })), + cacheHint: { + // Tous les champs sont facultatifs et sont combinés aux indications de cache de chaque entrée. + // Les étiquettes (`tags`) sont fusionnées à partir de toutes les entrées + // `lastModified` est la dernière valeur de `lastModified` dans toutes les entrées et dans la collection + lastModified: getLastModifiedDate(products), + tags: ['produits'], + }, + }; + }, + loadEntry: async ({ filter }) => { + const item = await loadStoreProduct(filter); + return { + id: item.id, + data: item, + cacheHint: { + lastModified: new Date(item.lastModified), + tags: [`produit-${item.id}`, `categorie-${item.category}`], + }, + }; + }, + }; +} +``` + +Vous pouvez ensuite utiliser ces indications dans vos pages. Si vous avez activé la [mise en cache expérimentale des routes](/fr/reference/experimental-flags/route-caching/), transmettez directement les indications de cache à `Astro.cache.set()` : + +```astro title="src/pages/store/[id].astro" +--- +export const prerender = false; // Pas nécessaire en mode `server` + +import { getLiveEntry } from 'astro:content'; + +const { entry, error, cacheHint } = await getLiveEntry('produits', Astro.params.id); + +if (error) { + return Astro.redirect('/404'); +} + +// Transmettre les indications de cache à la mise en cache des routes +if (cacheHint) { + Astro.cache.set(cacheHint); +} +Astro.cache.set({ maxAge: 300 }); +--- + +

{entry.data.name}

+

{entry.data.description}

+``` + +Sans la mise en cache des routes activée, vous pouvez utiliser des indications de cache pour définir manuellement les en-têtes de réponse pour votre propre stratégie de mise en cache : + +```astro title="src/pages/store/[id].astro" +--- +export const prerender = false; // Pas nécessaire en mode `server` + +import { getLiveEntry } from 'astro:content'; + +const { entry, error, cacheHint } = await getLiveEntry('produits', Astro.params.id); + +if (error) { + return Astro.redirect('/404'); +} + +if (cacheHint?.tags) { + Astro.response.headers.set('Cache-Tag', cacheHint.tags.join(',')); +} + +if (cacheHint?.lastModified) { + Astro.response.headers.set('Last-Modified', cacheHint.lastModified.toUTCString()); +} +--- + +

{entry.data.name}

+

{entry.data.description}

``` +:::note +Les indications de cache n'entraînent pas automatiquement la mise en cache de la réponse par Astro. Elles fournissent des valeurs que vous pouvez transmettre à la [mise en cache des routes](/fr/reference/experimental-flags/route-caching/) ou utiliser pour implémenter votre propre stratégie de mise en cache. +::: + +## Distribuer votre chargeur + +Les chargeurs peuvent être définis sur votre site ou sous forme de paquet npm distinct. Si vous souhaitez partager votre chargeur avec la communauté, vous pouvez [le publier sur npm avec les mots-clés `withastro` et `astro-loader`](/fr/reference/publish-to-npm/#données-du-fichier-packagejson). + +Un chargeur doit exporter une fonction qui renvoie un objet `LiveLoader` pour les chargeurs en direct ou un objet `Loader` pour les chargeurs utilisés au moment de la compilation, permettant aux utilisateurs de le configurer avec leurs propres paramètres. + ## API des chargeurs sous forme d'objet -L'API pour les [chargeurs incorporés](#chargeurs-incorporés) est très simple et est présentée ci-dessus. Cette section présente l'API permettant de définir un chargeur sous forme d'objet. +

+ +Cette section présente l'API permettant de définir un [chargeur sous forme d'objet utilisé au moment de la compilation](#building-a-loader). ### L'objet `Loader` -L'objet chargeur possède les propriétés suivantes : -#### `name` +

+ +**Type :** `Loader` +

+ +Une fonction de chargeur renvoie un objet comportant deux propriétés obligatoires. En plus de fournir un nom pour le chargeur, cet objet décrit comment récupérer les données de la collection. + +Vous pouvez également renvoyer une troisième propriété définissant un schéma pour valider les entrées de votre collection. Utilisez l'opérateur [`satisfies` de TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) au lieu d'une annotation de type de retour afin de garantir la sûreté du typage au sein de votre objet de chargeur et de préserver l'inférence de type lorsque celui-ci est utilisé dans une collection. + +#### `Loader.name`

-**Type** : `string` +**Type :** `string` +

Un nom unique pour le chargeur, utilisé dans les logs et [pour le chargement conditionnel](/fr/reference/integrations-reference/#option-refreshcontent). -#### `load` +#### `Loader.load()`

-**Type** : (context: LoaderContext) => Promise<void> +**Type :** (context: LoaderContext) => Promise<void> +

-Une fonction asynchrone qui est appelée au moment de la compilation pour charger les données et mettre à jour le magasin. Voir [`LoaderContext`](#loadercontext) pour plus d'informations. +Une fonction asynchrone appelée lors de la compilation pour charger les données et mettre à jour le magasin. Elle reçoit un objet [`LoaderContext`](#loadercontext) contenant des fonctions et propriétés utilitaires pour l'implémentation du chargeur, ainsi que la base de données `store` et les méthodes permettant d'interagir avec elle. -#### `schema` +#### `Loader.schema`

-**Type** : `ZodSchema | Promise | (() => ZodSchema | Promise)` +**Type :** `ZodSchema | Promise | (() => ZodSchema | Promise)` +

Un [schéma Zod](/fr/guides/content-collections/#définition-des-types-de-données-avec-zod) facultatif qui définit la forme des entrées. Il est utilisé à la fois pour valider les données et pour générer des types TypeScript pour la collection. -Si une fonction est fournie, elle sera appelée au moment de la compilation avant `load()` pour générer le schéma. Vous pouvez l'utiliser pour générer dynamiquement le schéma en fonction des options de configuration ou en introspectant une API. +Lorsque vous devez générer dynamiquement le schéma au moment de la compilation en fonction des options de configuration ou en introspectant une API, utilisez plutôt [`createSchema()`](#loadercreateschema). + +Si la propriété est présente, elle sera remplacée par tout schéma Zod défini pour la collection dans le fichier `src/content.config.ts`.n fonction des options de configuration ou en introspectant une API. + +#### `Loader.createSchema()` + +

+ +**Type :** `() => Promise<{ schema: ZodSchema; types: string }>` + +

+ +Une fonction asynchrone optionnelle qui renvoie un objet contenant un [schéma Zod](/fr/guides/content-collections/#définition-des-types-de-données-avec-zod) et des types. Elle permet de générer dynamiquement le schéma lors de la compilation, en fonction des options de configuration ou par introspection d'une API. + +Lorsque vous n'avez besoin de fournir qu'un schéma statique, fournissez plutôt un objet de validation Zod en utilisant [`schema`](#loaderschema). + +Si elle est présente, elle sera remplacée par tout schéma Zod défini pour la collection dans le fichier `src/content.config.ts`. + +Le contenu de `types` renvoyé sera écrit dans un fichier TypeScript et devra exporter un type ou une interface `Entry` : + +```ts title="src/feed-loader.ts" ins={27-35} +import type { Loader } from 'astro/loaders'; +import { z } from 'astro/zod'; +import { loadFeedData, getSchema, getTypes } from "./feed.js"; + +export function myLoader(options: { url: string, apiKey: string }) { + const feedUrl = new URL(options.url); + + return { + name: "feed-loader", + load: async ({ store, parseData }) => { + const feed = await loadFeedData(feedUrl, options.apiKey); + + store.clear(); + + for (const item of feed.items) { + const id = item.guid; + const data = await parseData({ + id, + data: item, + }); + store.set({ + id, + data, + }); + } + }, + createSchema: async () => { + const schema = await getSchema(); + const types = await getTypes(); + + return { + schema, + types: `export type Entry = ${types}`, + }; + }, + } satisfies Loader; +} +``` ### `LoaderContext` -Cet objet est passé à la méthode `load()` du chargeur et contient les propriétés suivantes : +Cet objet est passé à la méthode [`load()`](#loaderload) du chargeur et contient les propriétés suivantes : -#### `collection` +#### `LoaderContext.collection`

-**Type** : `string` +**Type :** `string` +

Le nom unique de la collection. Il s'agit de la clé dans l'objet `collections` dans le fichier `src/content.config.ts`. -#### `store` +#### `LoaderContext.store`

-**Type** : [`DataStore`](#datastore) +**Type :** [`DataStore`](#datastore) +

Une magasin de données pour stocker les données réelles. Utilisez-le pour mettre à jour le magasin avec de nouvelles entrées. Voir [`DataStore`](#datastore) pour plus d'informations. -#### `meta` +#### `LoaderContext.meta`

-**Type** : `MetaStore` +**Type :** `MetaStore` +

Un magasin de clés-valeurs avec une portée limitée à la collection, conçu pour des choses comme la synchronisation des jetons et des heures de dernière modification. Ces métadonnées sont conservées entre les compilations avec les données de la collection, mais ne sont disponibles qu'à l'intérieur du chargeur. @@ -326,38 +820,77 @@ const lastModified = meta.get("lastModified"); meta.set("lastModified", new Date().toISOString()); ``` -#### `logger` +#### `LoaderContext.logger`

-**Type** : [`AstroIntegrationLogger`](/fr/reference/integrations-reference/#astrointegrationlogger) +**Type :** [`AstroIntegrationLogger`](/fr/reference/integrations-reference/#astrointegrationlogger) +

-Un enregistreur qui peut être utilisé pour enregistrer des messages dans la console. Utilisez-le à la place de `console.log` pour des enregistrements plus utiles qui incluent le nom du chargeur dans le message affiché. Voir [`AstroIntegrationLogger`](/fr/reference/integrations-reference/#astrointegrationlogger) pour plus d'informations. +Un outil de journalisation permettant d'enregistrer des messages dans la console. Utilisez-le plutôt que `console.log` pour obtenir des journaux plus détaillés contenant des informations spécifiques au chargeur, comme son nom ou des détails sur le processus de chargement. Consultez [`AstroIntegrationLogger`](/fr/reference/integrations-reference/#astrointegrationlogger) pour plus d'informations. + +```ts title="Extrait du chargeur file()" {10} "logger" +return { + name: 'file-loader', + load: async ({ config, store, logger, watcher }) => { + const url = new URL(fileName, config.root); + const filePath = fileURLToPath(url); + await syncData(filePath, store); + + watcher?.on('change', async (changedPath) => { + if (changedPath === filePath) { + logger.info(`Reloading data from ${fileName}`); + await syncData(filePath, store); + } + }); + }, +}; +``` -#### `config` +#### `LoaderContext.config`

-**Type** : `AstroConfig` +**Type :** `AstroConfig` +

L'objet de configuration d'Astro complet et résolu avec toutes les valeurs par défaut appliquées. Consultez [la référence de configuration](/fr/reference/configuration-reference/) pour plus d'informations. -#### `parseData` +```ts title="Extrait du chargeur file()" {4} "config" +return { + name: 'file-loader', + load: async ({ config, store, logger, watcher }) => { + const url = new URL(fileName, config.root); + const filePath = fileURLToPath(url); + await syncData(filePath, store); + + watcher?.on('change', async (changedPath) => { + if (changedPath === filePath) { + logger.info(`Reloading data from ${fileName}`); + await syncData(filePath, store); + } + }); + }, +}; +``` + +#### `LoaderContext.parseData()`

-**Type** : `(props: ParseDataOptions) => Promise` +**Type :** `(props: ParseDataOptions) => Promise` +

Valide et analyse les données conformément au schéma de la collection. Transmettez les données à cette fonction pour les valider et les analyser avant de les stocker dans le magasin de données. -```ts title=loader.ts {14-17} +```ts title=loader.ts {15-18} import type { Loader } from "astro/loaders"; import { loadFeed } from "./feed.js"; -export function feedLoader({ url }): Loader { +export function feedLoader({ url }) { const feedUrl = new URL(url); return { name: "feed-loader", @@ -367,8 +900,9 @@ export function feedLoader({ url }): Loader { store.clear(); for (const item of feed.items) { + const id = item.guid; const data = await parseData({ - id: item.guid, + id, data: item, }); store.set({ @@ -377,29 +911,29 @@ export function feedLoader({ url }): Loader { }); } }, - }; + } satisfies Loader; } ``` -#### `renderMarkdown` +#### `LoaderContext.renderMarkdown()`

-**Type** : `(markdown: string) => Promise` +**Type :** `(content: string, options?: { fileURL?: URL }) => Promise`

Restitue une chaîne Markdown en HTML, renvoyant un objet `RenderedContent`. -Cela vous permet de restituer le contenu Markdown directement dans vos chargeurs en utilisant le même traitement Markdown que le chargeur `glob` intégré d'Astro et donne accès à la fonction `render()` et au composant `` pour [la restitution du contenu](/fr/guides/content-collections/#restitution-du-contenu). +Cela vous permet de restituer le contenu Markdown directement dans vos chargeurs en utilisant le même traitement Markdown que le chargeur `glob()` intégré d'Astro et donne accès à la fonction `render()` et au composant `` pour [la restitution du contenu](/fr/guides/content-collections/#restitution-du-contenu). -Affecter cet objet au champ [`rendered`](#rendered) de l'objet [DataEntry](#dataentry) pour permettre aux utilisateurs d'[afficher le contenu dans une page](/fr/guides/content-collections/#restitution-du-contenu). +Attribuez cet objet au champ [`rendered`](#dataentryrendered) de l'objet [`DataEntry`](#dataentry) pour permettre aux utilisateurs d'[afficher le contenu dans une page](/fr/guides/content-collections/#restitution-du-contenu). Si le contenu Markdown inclut un frontmatter, celui-ci sera analysé et disponible dans `metadata.frontmatter`. Les métadonnées seront exclues du rendu HTML. ```ts title=loader.ts {16-17} import type { Loader } from 'astro/loaders'; import { loadFromCMS } from './cms.js'; -export function myLoader(settings): Loader { +export function myLoader(settings) { return { name: 'cms-loader', async load({ renderMarkdown, store }) { @@ -416,24 +950,50 @@ export function myLoader(settings): Loader { }); } }, - }; + } satisfies Loader; } ``` -#### `generateDigest` +##### `LoaderContext.fileURL`

-**Type** : `(data: Record | string) => string` +**Type :** `URL` +

-Génère un résumé de contenu non cryptographique d'un objet ou d'une chaîne de caractères. Cela peut être utilisé pour suivre si les données ont changé en définissant [le champ `digest`](#digest) d'une entrée. +Spécifie le chemin d'accès au fichier à utiliser pour résoudre les chemins d'image relatifs dans le contenu Markdown. + +L'exemple suivant utilise le [répertoire racine configuré](/fr/reference/configuration-reference/#root) pour résoudre les chemins d'accès aux images : + +```ts title=loader.ts {7} +for (const file of files) { + const content = await readFile(file.path, 'utf8'); + store.set({ + id: file.id, + data: file.data, + rendered: await renderMarkdown(content, { + fileURL: new URL(file.path, config.root), + }), + }); +} +``` + +#### `LoaderContext.generateDigest()` + +

+ +**Type :** `(data: Record | string) => string` + +

+ +Génère un résumé de contenu non cryptographique d'un objet ou d'une chaîne de caractères. Cela peut être utilisé pour suivre si les données ont changé en définissant [le champ `digest`](#dataentrydigest) d'une entrée. ```ts title=loader.ts {19,24} import type { Loader } from "astro/loaders"; import { loadFeed } from "./feed.js"; -export function feedLoader({ url }): Loader { +export function feedLoader({ url }) { const feedUrl = new URL(url); return { name: "feed-loader", @@ -443,8 +1003,9 @@ export function feedLoader({ url }): Loader { store.clear(); for (const item of feed.items) { + const id = item.guid; const data = await parseData({ - id: item.guid, + id, data: item, }); @@ -457,15 +1018,16 @@ export function feedLoader({ url }): Loader { }); } }, - }; + } satisfies Loader; } ``` -#### `watcher` +#### `LoaderContext.watcher`

-**Type** : `FSWatcher` +**Type :** `FSWatcher` +

En mode dev, il s'agit d'un observateur de système de fichiers qui peut être utilisé pour déclencher des mises à jour. Voir [`ViteDevServer`](https://vite.dev/guide/api-javascript.html#vitedevserver) pour plus d'informations. @@ -488,17 +1050,21 @@ return { }; ``` -#### `refreshContextData` +#### `LoaderContext.refreshContextData`

-**Type** : `Record` +**Type :** `Record` +

Si le chargeur a été déclenché par une intégration, il peut éventuellement contenir des données supplémentaires définies par cette intégration. Il n'est défini que lorsque le chargeur est déclenché par une intégration. Consultez la référence du hook [`astro:server:setup`](/fr/reference/integrations-reference/#option-refreshcontent) pour plus d'informations. -```ts title=loader.ts {5-8} -export function myLoader(options: { url: string }): Loader { +```ts title=loader.ts {8-11} +import type { Loader } from "astro/loaders"; +import { processWebhook } from "./lib/webhooks"; + +export function myLoader(options: { url: string }) { return { name: "mon-chargeur", load: async ({ refreshContextData, store, logger }) => { @@ -508,7 +1074,7 @@ export function myLoader(options: { url: string }): Loader { } // ... }, - }; + } satisfies Loader; } ``` @@ -516,11 +1082,12 @@ export function myLoader(options: { url: string }): Loader { Le magasin de données est l'interface d'un chargeur vers les données de la collection de contenu. Il s'agit d'un magasin clé-valeur (abrégé KV en anglais), limité à la collection, et par conséquent, un chargeur ne peut accéder qu'aux données de sa propre collection. -#### `get` +#### `DataStore.get()`

-**Type** : (key: string) => DataEntry | undefined +**Type :** (key: string) => DataEntry | undefined +

Obtenir une entrée du magasin par son ID. Renvoie `undefined` si l'entrée n'existe pas. @@ -531,19 +1098,21 @@ const existingEntry = store.get("my-entry"); L'objet renvoyé est un objet [`DataEntry`](#dataentry). -#### `set` +#### `DataStore.set()`

-**Type** : (entry: DataEntry) => boolean +**Type :** (entry: DataEntry) => boolean +

-Utilisé après que les données ont été [validées et analysées](#parsedata) pour ajouter une entrée au magasin, renvoyant `true` si l'entrée a été définie. Renvoie `false` lorsque la propriété [`digest`](#digest) détermine qu'une entrée n'a pas changé et ne doit pas être mise à jour. +Utilisé après que les données ont été [validées et analysées](#loadercontextparsedata) pour ajouter une entrée au magasin, renvoyant `true` si l'entrée a été définie. Renvoie `false` lorsque la propriété [`digest`](#dataentrydigest) détermine qu'une entrée n'a pas changé et ne doit pas être mise à jour. -```ts title=loader.ts {7-14} +```ts title=loader.ts {8-15} for (const item of feed.items) { + const id = item.guid; const data = await parseData({ - id: item.guid, + id, data: item, }); const digest = generateDigest(data); @@ -558,56 +1127,62 @@ Utilisé après que les données ont été [validées et analysées](#parsedata) } ``` -#### `entries` +#### `DataStore.entries()`

-**Type** : `() => Array<[id: string, DataEntry]>` +**Type :** () => Array\<[id: string, DataEntry]\> +

Obtenir toutes les entrées de la collection sous forme de tableau de paires clé-valeur. -#### `keys` +#### `DataStore.keys()`

-**Type** : `() => Array` +**Type :** `() => Array` +

Obtenir toutes les clés des entrées de la collection. -#### `values` +#### `DataStore.values()`

-**Type** : `() => Array` +**Type :** () => Array\<DataEntry\> +

Obtenir toutes les entrées de la collection sous forme de tableau. -#### `delete` +#### `DataStore.delete()`

-**Type** : `(key: string) => void` +**Type :** `(key: string) => void` +

Supprimer une entrée du magasin par son ID. -#### `clear` +#### `DataStore.clear()`

-**Type** : `() => void` +**Type :** `() => void` +

Effacer toutes les entrées de la collection. -#### `has` +#### `DataStore.has()`

-**Type** : `(key: string) => boolean` +**Type :** `(key: string) => boolean` +

Vérifier si une entrée existe dans le magasin par son ID. @@ -616,87 +1191,348 @@ Vérifier si une entrée existe dans le magasin par son ID. Il s'agit du type d'objet stocké dans le magasin de données. Il possède les propriétés suivantes : -#### `id` +#### `DataEntry.id`

-**Type** : `string` +**Type :** `string` +

Un identifiant pour l'entrée, qui doit être unique dans la collection. Il est utilisé pour rechercher l'entrée dans le magasin et constitue la clé utilisée avec `getEntry` pour cette collection. -#### `data` +#### `DataEntry.data`

-**Type** : `Record` +**Type :** `Record` +

Les données réelles de l'entrée. Lorsqu'un utilisateur accède à la collection, des types TypeScript seront générés selon le schéma de la collection. -Il est de la responsabilité du chargeur d'utiliser [`parseData`](#parsedata) pour valider et analyser les données avant de les stocker dans le magasin de données : aucune validation n'est effectuée lors de l'obtention ou de la définition des données. +Il est de la responsabilité du chargeur d'utiliser [`parseData`](#loadercontextparsedata) pour valider et analyser les données avant de les stocker dans le magasin de données : aucune validation n'est effectuée lors de l'obtention ou de la définition des données. -#### `filePath` +#### `DataEntry.filePath`

-**Type** : `string | undefined` +**Type :** `string | undefined` +

Chemin d'accès au fichier source de cette entrée, par rapport à la racine du site. Cela s'applique uniquement aux chargeurs basés sur des fichiers et est utilisé pour résoudre des chemins tels que des images ou d'autres ressources. S'il n'est pas défini, tous les champs du schéma qui utilisent [l'assistant `image()`](/fr/guides/images/#images-dans-les-collections-de-contenu) seront traités comme des [chemins publics](/fr/guides/images/#où-stocker-les-images) et non transformés. -#### `body` +#### `DataEntry.body`

-**Type** : `string | undefined` +**Type :** `string | undefined` +

-Le corps brut de l'entrée, le cas échéant. Si l'entrée inclut du [contenu rendu](#rendered), ce champ peut être utilisé pour stocker la source brute. Ceci est facultatif et n'est pas utilisé en interne. +Le corps brut de l'entrée, le cas échéant. Si l'entrée inclut du [contenu rendu](#dataentryrendered), ce champ peut être utilisé pour stocker la source brute. Ceci est facultatif et n'est pas utilisé en interne. -#### `digest` +#### `DataEntry.digest`

-**Type** : `string | undefined` +**Type :** `string | undefined` +

Un résumé facultatif du contenu de l'entrée qui peut être utilisé pour vérifier si les données ont changé. -Lors de [la définition d'une entrée](#set), l'entrée ne sera mise à jour que si le résumé ne correspond pas à une entrée existante avec le même ID. +Lors de [la définition d'une entrée](#datastoreset), l'entrée ne sera mise à jour que si le résumé ne correspond pas à une entrée existante avec le même ID. -Le format du résumé dépend du chargeur, mais il doit s'agir d'une chaîne de caractères qui change lorsque les données changent. Cela peut être fait avec la fonction [`generateDigest`](#generatedigest). +Le format du résumé dépend du chargeur, mais il doit s'agir d'une chaîne de caractères qui change lorsque les données changent. Cela peut être fait avec la fonction [`generateDigest`](#loadercontextgeneratedigest). -#### `rendered` +#### `DataEntry.rendered`

-**Type** : `RenderedContent | undefined` +**Type :** `RenderedContent | undefined` +

Stocke un objet avec le contenu rendu et les métadonnées d'une entrée si elle a été rendue au format HTML. Par exemple, cela peut être utilisé pour stocker le contenu rendu d'une entrée Markdown ou du code HTML d'un CMS. Si ce champ est fourni, alors [la fonction `render()` et le composant ``](/fr/guides/content-collections/#restitution-du-contenu) sont disponibles pour restituer l'entrée dans une page. -Le format de l'objet `RenderedContent` est : +Si l'entrée contient du contenu Markdown, vous pouvez utiliser la fonction [`renderMarkdown()`](#loadercontextrendermarkdown) pour générer cet objet à partir de la chaîne de caractères au format Markdown. + +##### `DataEntry.rendered.html` + +

+ +**Type :** `string` +

+ +Contient la chaîne de caractères rendue au format HTML. Celle-ci est utilisée par [`render()`](/fr/reference/modules/astro-content/#render) pour renvoyer un composant qui effectue le rendu de ce HTML. + +##### `DataEntry.rendered.metadata` + +

+ +**Type :** `object | undefined` +

+ +Décrit les métadonnées présentes dans ce fichier. Cela inclut les chemins d'accès aux images (`imagePaths`), les titres (`headings`), le `frontmatter` et toutes autres métadonnées présentes dans le fichier. Si le fichier n'a pas été rendu au format HTML, cette valeur sera `undefined`. + +###### `DataEntry.rendered.metadata.imagePaths` + +

+ +**Type :** `string[]` +

+ +Spécifie la liste des chemins d'accès aux images présentes dans cette entrée. Chaque chemin est relatif au [chemin de l'entrée (`filePath`)] (#dataentryfilepath). + +###### `DataEntry.rendered.metadata.headings` + +

+ +**Type :** `MarkdownHeading[]` +

+ +Spécifie la liste des titres présents dans ce fichier. Chaque titre est décrit par une profondeur (`depth`) déterminée par le niveau du titre (`h1 -> h6`), un `slug` généré avec [`github-slugger`](https://github.com/Flet/github-slugger), et son contenu (`text`). + +###### `DataEntry.rendered.metadata.frontmatter` + +

+ +**Type :** `Record` +

+ +Décrit le frontmatter brut, analysé à partir du fichier. Cela peut inclure [des données injectées par programmation à partir de modules d'extension Remark](/fr/guides/markdown-content/#modifying-frontmatter-programmatically). + +## API des chargeurs en direct + +

+ +Cette section présente l'API permettant de définir un [chargeur en direct](#live-loaders). + +### L'objet `LiveLoader` + +

+ +**Type :** `LiveLoader` + +

+ +Une fonction de chargement en direct renvoie un objet comportant trois propriétés obligatoires. En plus de fournir un nom pour le chargeur, cet objet décrit comment récupérer des entrées individuelles et une collection entière à partir de votre source de données en direct. + +Utilisez le type générique `LiveLoader` pour garantir la sûreté du typage dans votre chargeur. Ce type accepte les paramètres de type suivants, dans cet ordre : + +- **`TData`** (par défaut `Record`) : La structure de données de chaque entrée renvoyée par le chargeur. +- **`TEntryFilter`** (par défaut : `never`) : Type d’objet filtre accepté par [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) et accessible dans [`loadEntry()`](#liveloaderloadentry). Utilisez `never` si vous ne prenez pas en charge le filtrage des entrées individuelles. +- **`TCollectionFilter`** (par défaut : `never`) : Type d’objet filtre accepté par [`getLiveCollection()`](/fr/reference/modules/astro-content/#getlivecollection) et accessible dans [`loadCollection()`](#liveloaderloadcollection). Utilisez `never` lorsque vous ne prenez pas en charge le filtrage des collections. +- **`TError`** (par défaut `Error`) : Une [classe `Error` personnalisée](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Error#types_derreur_personnalisés) qui peut être renvoyée par le chargeur pour une gestion des erreurs plus granulaire. + +#### `LiveLoader.name` + +

+ +**Type :** `string` + +

+ + +Un nom unique pour le chargeur, utilisé dans les journaux. + +#### `LiveLoader.loadCollection()` + +

+ +**Type :** (context: LoadCollectionContext\) => Promise\<LiveDataCollection\ | \{ error: TError; \}\> + +

+ +Définit une méthode pour charger une collection d'entrées. Cette fonction reçoit un [objet de contexte](#loadcollectioncontext) contenant une propriété `filter` facultative et doit renvoyer les données associées à cette collection ou les erreurs. + +#### `LiveLoader.loadEntry()` + +

+ +**Type :** (context: LoadEntryContext\) => Promise\<LiveDataEntry\ | undefined | \{ error: TError; \}\> + +

+ +Définit une méthode pour charger une seule entrée. Cette fonction reçoit un [objet de contexte](#loadentrycontext) contenant une propriété `filter` et renvoie soit les données associées à l'entrée demandée, `undefined` lorsque l'entrée est introuvable, soit les erreurs. + +### `LoadCollectionContext` + +

+ +**Type :** `{ filter?: TCollectionFilter; }` + +

+ +Cet objet est transmis à la méthode [`loadCollection()`](#liveloaderloadcollection) du chargeur et contient les propriétés suivantes : + +#### `LoadCollectionContext.filter` + +

+ +**Type :** `Record | never`
+**Default:** `never` + +

+ +Un objet décrivant les [filtres pris en charge par votre chargeur](#defining-custom-filter-types). + +### `LoadEntryContext` + +

+ +**Type :** `{ filter: TEntryFilter; }` + +

+ +Cet objet est transmis à la méthode [`loadEntry()`](#liveloaderloadentry) du chargeur et contient les propriétés suivantes : + +#### `LoadEntryContext.filter` + +

+ +**Type :** `Record | never`
+**Default:** `never` + +

+ +Un objet décrivant les [filtres pris en charge par votre chargeur](#defining-custom-filter-types). + + +### `LiveDataEntry` + +

+ +**Type :** \{ id: string; data: TData; rendered?: \{ html: string \}; cacheHint?: CacheHint; \} + +

+ +Il s'agit de l'objet de type renvoyé par la méthode [`loadEntry()`](#liveloaderloadentry). Il contient les propriétés suivantes : + +#### `LiveDataEntry.id` + +

+ +**Type :** `string` + +

+ +Un identifiant pour l'entrée, qui doit être unique au sein de la collection. Il s'agit du nom de propriété utilisé avec [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) pour cette collection. + +#### `LiveDataEntry.data` + +

+ +**Type :** `Record` + +

+ +Les données réelles de l'entrée. Lorsqu'un utilisateur accède à la collection, des types TypeScript sont générés conformément au schéma de la collection. + +Il incombe au chargeur de valider et d'analyser les données avant de les renvoyer. + +#### `LiveDataEntry.rendered` + +

+ +**Type :** `{ html: string }` + +

+ +Un objet contenant le contenu rendu d'une entrée si celle-ci a été convertie en HTML. Par exemple, il peut s'agir du contenu rendu d'une entrée Markdown ou du code HTML provenant d'un CMS. + +Si ce champ est fourni, alors [la fonction `render()` et le composant ``](/fr/guides/content-collections/#rendering-body-content) sont disponibles pour afficher l'entrée dans une page. + +Si le chargeur ne renvoie pas de propriété `rendered` pour une entrée, le composant `` ne génèrera rien. + +#### `LiveDataEntry.cacheHint` + +

+ +**Type :** [`CacheHint`](#cachehint) + +

+ +Un objet optionnel fournissant une indication sur la manière de mettre en cache cette entrée spécifique. + +### `LiveDataCollection` + +

+ +**Type :** \{ entries: Array\<LiveDataEntry\\>; cacheHint?: CacheHint; \} + +

+ +Il s'agit du type d'objet renvoyé par la méthode [`loadCollection()`](#liveloaderloadcollection). Il contient les propriétés suivantes : + +#### `LiveDataCollection.entries` + +

+ +**Type :** Array\<LiveDataEntry\\> + +

+ +Un tableau d'objets [`LiveDataEntry`](#livedataentry). + +#### `LiveDataCollection.cacheHint` + +

+ +**Type :** [`CacheHint`](#cachehint) + +

+ +Un objet optionnel fournissant des indications sur la manière de mettre en cache cette collection. Cet objet sera fusionné avec les indications de cache définies pour chaque entrée individuelle, si elles sont fournies. + +### `CacheHint` + +Un objet que les chargeurs peuvent renvoyer via la propriété `cacheHint` dans [`LiveDataCollection`](#livedatacollection) ou [`LiveDataEntry`](#livedataentry) pour fournir des indications pour aider à la mise en cache de la réponse. Cet objet contient les propriétés suivantes : + +#### `CacheHint.tags` + +

+ +**Type :** `Array` + +

+ +Un tableau d'identifiants de chaînes de caractères permettant un contrôle précis du cache. Cela vous permet de regrouper du contenu similaire et d'invalider sélectivement les réponses mises en cache lorsque certains contenus sont modifiés. + +L'exemple suivant définit des étiquettes d'indication de cache pour une collection d'articles filtrés par auteur : ```ts -{ - /** Chaîne HTML rendue. Si elle est présente, `render(entry)` renverra un composant qui restitue ce code HTML. */ - html: string; - metadata?: { - /** Toutes les images présentes dans cette entrée. Relatives au chemin d'accès au fichier DataEntry. */ - imagePaths?: Array; - /** Tous les titres présents dans ce fichier. Renvoyé comme `headings` par `render()` */ - headings?: MarkdownHeading[]; - /** Frontmatter brut, analysé à partir du fichier. Cela peut inclure des données provenant de modules d'extension Remark. */ - frontmatter?: Record; - /** Toute autre métadonnée présente dans ce fichier. */ - [key: string]: unknown; - }; -} +return { + /* ... */ + cacheHint: { + tags: ["articles", `articles-${filter.author}`], + }, +}; ``` -Si l'entrée contient du contenu Markdown, vous pouvez utiliser la fonction [`renderMarkdown()`](#rendermarkdown) pour générer cet objet à partir de la chaîne Markdown. +#### `CacheHint.lastModified` + +

+ +**Type :** `Date` + +

+ +La date de la dernière modification du contenu (par exemple, la dernière mise à jour d'une entrée dans une collection). Cette date peut être utilisée pour définir des en-têtes de cache HTTP tels que [`Last-Modified`](https://developer.mozilla.org/fr/docs/Web/HTTP/Reference/Headers/Last-Modified) et [`If-Modified-Since`](https://developer.mozilla.org/fr/docs/Web/HTTP/Reference/Headers/If-Modified-Since). + +L'exemple suivant définit une indication de cache pour un seul produit en utilisant sa date de dernière mise à jour : + +```ts +return { + /* ... */ + cacheHint: { + lastModified: new Date(product.updatedAt) + }, +}; +``` From 07fd1f31057f5ff81b86c8fb9e86d8a00ba57cea Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 13 Mar 2026 12:19:06 +0100 Subject: [PATCH 06/11] fix some links --- .../fr/reference/content-loader-reference.mdx | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/content/docs/fr/reference/content-loader-reference.mdx b/src/content/docs/fr/reference/content-loader-reference.mdx index e0669fafb812e..a7838d0741403 100644 --- a/src/content/docs/fr/reference/content-loader-reference.mdx +++ b/src/content/docs/fr/reference/content-loader-reference.mdx @@ -20,9 +20,9 @@ Cette API inclut deux chargeurs prêts à l'emploi pour le contenu stocké local Les chargeurs utilisés lors de la compilation sont des objets dotés d'une [méthode `load()`](#loaderload) appelée lors de la compilation pour récupérer les données et mettre à jour le magasin de données. Cet objet peut également définir un schéma pour les entrées, qui peut être utilisé pour valider les données et générer des types statiques. -Les chargeurs [`glob()`](#glob-loader) et [`file()`](#file-loader) d'Astro sont des exemples de chargeurs d'objets fournis prêts à l'emploi pour une utilisation avec du contenu local. Pour le contenu distant, aucun chargeur prédéfini n'est fourni. Vous devrez créer un chargeur d'objets ou utiliser un [chargeur publié par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) pour récupérer le contenu distant et interagir avec le magasin de données. +Les chargeurs [`glob()`](#le-chargeur-glob) et [`file()`](#le-chargeur-file) d'Astro sont des exemples de chargeurs d'objets fournis prêts à l'emploi pour une utilisation avec du contenu local. Pour le contenu distant, aucun chargeur prédéfini n'est fourni. Vous devrez créer un chargeur d'objets ou utiliser un [chargeur publié par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) pour récupérer le contenu distant et interagir avec le magasin de données. -Pour une simple récupération de données, vous pouvez également [définir un chargeur en tant qu'une fonction asynchrone](#définir-un-chargeur-comme-une-fonction) qui renvoie un tableau ou un objet contenant des entrées. +Pour une simple récupération de données, vous pouvez également [définir un chargeur en tant qu'une fonction asynchrone](#définir-un-chargeur-sous-forme-de-fonction) qui renvoie un tableau ou un objet contenant des entrées. ### Le chargeur `glob()` @@ -188,9 +188,9 @@ Une fonction de rappel pour créer une collection à partir du contenu d'un fich L'API des chargeurs de contenu est flexible et complète, offrant diverses options de récupération de données. Il est possible de créer des chargeurs simples ou complexes. Votre chargeur personnalisé dépendra à la fois de la source et de la structure de vos données, ainsi que de la manière dont vous choisissez de gérer la couche de stockage persistant des données. -La plupart des chargeurs exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur](#the-loader-object) comprenant un nom (`name`) pour votre chargeur, une méthode `load()` et un `schema` définissant vos entrées. +La plupart des chargeurs exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur](#lobjet-loader) comprenant un nom (`name`) pour votre chargeur, une méthode `load()` et un `schema` définissant vos entrées. -#### Chargement de collections dans le magasin de données +#### Charger les collections dans le magasin de données La fonction [`load()`](#loaderload) renvoyée dans l'objet loader définit comment votre contenu est récupéré, analysé, validé et mis à jour. Il accepte un objet `context` qui vous permet de personnaliser la gestion de vos données de diverses manières et d'interagir avec le magasin de données. Une fonction `load()` typique va : @@ -208,7 +208,7 @@ et même à la configuration complète d'Astro, et bien plus encore. Fournir un [`schema`](#loaderschema) Zod dans votre chargeur vous permet de valider les entrées de contenu récupérées avec [`parseData()`](#loadercontextparsedata) avant de les ajouter au [magasin](#loadercontextstore) de données. Ce schéma sera également utilisé comme schéma par défaut de la collection si aucun schéma n'est défini dans `src/content.config.ts`, afin de garantir la sûreté du typage et l'accès aux outils de l'éditeur. Vous n'avez pas non plus besoin de définir un schéma dans la collection de contenu si le chargeur fournit cette propriété. -Toutefois, si la collection de contenu [définit également un schéma](/fr/guides/content-collections/#defining-the-collection-schema), ce schéma sera utilisé à la place de celui de votre chargeur. Ceci permet aux utilisateurs de votre chargeur d'étendre son schéma ou de transformer des données pour leurs projets. Si vous [publiez et distribuez un chargeur](#distributing-your-loader), vous souhaiterez peut-être documenter ce comportement et inciter les utilisateurs à ne pas définir eux-mêmes de schéma de collection, ou leur indiquer comment le faire en toute sécurité s'ils ont besoin de données renvoyées dans un format différent. +Toutefois, si la collection de contenu [définit également un schéma](/fr/guides/content-collections/#defining-the-collection-schema), ce schéma sera utilisé à la place de celui de votre chargeur. Ceci permet aux utilisateurs de votre chargeur d'étendre son schéma ou de transformer des données pour leurs projets. Si vous [publiez et distribuez un chargeur](#distribuer-votre-chargeur), vous souhaiterez peut-être documenter ce comportement et inciter les utilisateurs à ne pas définir eux-mêmes de schéma de collection, ou leur indiquer comment le faire en toute sécurité s'ils ont besoin de données renvoyées dans un format différent. Si vous devez générer dynamiquement le schéma en fonction des options de configuration ou en introspectant une API, vous pouvez utiliser [`createSchema()`](#loadercreateschema) à la place. @@ -273,11 +273,11 @@ export const collections = { blog }; ### Définir un chargeur sous forme de fonction -Pour les extractions de données simples qui ne nécessitent pas de gestion personnalisée du magasin de données, de validation, de journalisation ou d'autres aides fournies par l'[objet de chargement utilisé au moment de la compilation](#the-loader-object), vous pouvez définir votre chargeur sous forme de fonction. +Pour les extractions de données simples qui ne nécessitent pas de gestion personnalisée du magasin de données, de validation, de journalisation ou d'autres aides fournies par l'[objet de chargement utilisé au moment de la compilation](#lobjet-loader), vous pouvez définir votre chargeur sous forme de fonction. La fonction peut être asynchrone et doit renvoyer soit un tableau d'entrées contenant chacune un champ `id` unique, soit un objet où chaque nom de propriété est un identifiant unique et chaque valeur représente l'entrée. -Ce modèle fournit un raccourci pratique pour accomplir les tâches de base normalement effectuées par la fonction `load()` pour [charger les collections dans le magasin de données](#loading-collections-into-the-data-store). Lors de la compilation, le chargeur effacera automatiquement le magasin de données et rechargera toutes les entrées. Aucune autre option de personnalisation ni fonction d'assistance pour la gestion des données n'est fournie. +Ce modèle fournit un raccourci pratique pour accomplir les tâches de base normalement effectuées par la fonction `load()` pour [charger les collections dans le magasin de données](#charger-les-collections-dans-le-magasin-de-données). Lors de la compilation, le chargeur effacera automatiquement le magasin de données et rechargera toutes les entrées. Aucune autre option de personnalisation ni fonction d'assistance pour la gestion des données n'est fournie. Ces chargeurs sont souvent suffisamment simples pour que vous puissiez choisir de les définir directement dans le fichier `src/content.config.ts` : @@ -306,7 +306,7 @@ L'API des chargeurs en direct est conçue pour interroger n'importe quelle donn ### Création d'un chargeur en direct -La plupart des chargeurs en direct exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur en direct](#the-liveloader-object) comprenant un `nom` pour votre chargeur et deux méthodes pour définir comment charger votre collection d'entrées et comment charger une seule entrée : `loadCollection()` et `loadEntry()`. +La plupart des chargeurs en direct exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur en direct]lobjet-liveloader) comprenant un `nom` pour votre chargeur et deux méthodes pour définir comment charger votre collection d'entrées et comment charger une seule entrée : `loadCollection()` et `loadEntry()`. #### Chargement des données en direct @@ -314,9 +314,9 @@ Pour renvoyer des données à propos de votre collection, vous devez fournir une Pour renvoyer une seule entrée de collection en direct, vous devez fournir une fonction [`loadEntry()`](#liveloaderloadentry) qui récupère des données filtrées pour un `id` donné et renvoie une seule [entrée (`entry`)](#livedataentry), `undefined` ou une erreur. -La récupération des données pour ces deux fonctions est généralement effectuée à l'aide d'une [instruction `try...catch`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/try...catch) pour [gérer les erreurs lors de l'accès aux données en direct](#error-handling-in-live-loaders). +La récupération des données pour ces deux fonctions est généralement effectuée à l'aide d'une [instruction `try...catch`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/try...catch) pour [gérer les erreurs lors de l'accès aux données en direct](#gestion-des-erreurs-dans-les-chargeurs-en-direct). -Consultez l'intégralité de l'[API des chargeurs en direct](#live-loader-api) pour en savoir plus sur les fonctions et les types disponibles pour la création de votre chargeur en direct. +Consultez l'intégralité de l'[API des chargeurs en direct](#api-des-chargeurs-en-direct) pour en savoir plus sur les fonctions et les types disponibles pour la création de votre chargeur en direct. #### Fourniture d'un schéma pour les chargeurs en direct @@ -419,7 +419,7 @@ export const collections = { blog }; #### Gestion des erreurs dans les chargeurs en direct -Les chargeurs en direct renvoient une sous-classe [Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) pour les erreurs. Vous pouvez créer des [types d'erreurs personnalisés](#creating-live-loader-error-types) et les utiliser pour une gestion des erreurs plus spécifique si nécessaire. Si une erreur est émise dans le chargeur en direct, elle sera interceptée et renvoyée, encapsulée dans un `LiveCollectionError`. +Les chargeurs en direct renvoient une sous-classe [Error](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Error) pour les erreurs. Vous pouvez créer des [types d'erreurs personnalisés](#création-des-types-derreurs-du-chargeur-en-direct) et les utiliser pour une gestion des erreurs plus spécifique si nécessaire. Si une erreur est émise dans le chargeur en direct, elle sera interceptée et renvoyée, encapsulée dans un `LiveCollectionError`. Astro générera lui-même certaines erreurs, en fonction de la réponse du chargeur en direct : @@ -448,7 +448,7 @@ export function myLoader(config): LiveLoader

-Cette section présente l'API permettant de définir un [chargeur sous forme d'objet utilisé au moment de la compilation](#building-a-loader). +Cette section présente l'API permettant de définir un [chargeur sous forme d'objet utilisé au moment de la compilation](#création-dun-chargeur). ### L'objet `Loader` @@ -1288,7 +1288,7 @@ Décrit les métadonnées présentes dans ce fichier. Cela inclut les chemins d' **Type :** `string[]`

-Spécifie la liste des chemins d'accès aux images présentes dans cette entrée. Chaque chemin est relatif au [chemin de l'entrée (`filePath`)] (#dataentryfilepath). +Spécifie la liste des chemins d'accès aux images présentes dans cette entrée. Chaque chemin est relatif au [chemin de l'entrée (`filePath`)](#dataentryfilepath). ###### `DataEntry.rendered.metadata.headings` @@ -1312,7 +1312,7 @@ Décrit le frontmatter brut, analysé à partir du fichier. Cela peut inclure [d

-Cette section présente l'API permettant de définir un [chargeur en direct](#live-loaders). +Cette section présente l'API permettant de définir un [chargeur en direct](#chargeurs-en-direct). ### L'objet `LiveLoader` @@ -1381,7 +1381,7 @@ Cet objet est transmis à la méthode [`loadCollection()`](#liveloaderloadcollec

-Un objet décrivant les [filtres pris en charge par votre chargeur](#defining-custom-filter-types). +Un objet décrivant les [filtres pris en charge par votre chargeur](#définition-de-types-de-filtres-personnalisés). ### `LoadEntryContext` @@ -1402,7 +1402,7 @@ Cet objet est transmis à la méthode [`loadEntry()`](#liveloaderloadentry) du c

-Un objet décrivant les [filtres pris en charge par votre chargeur](#defining-custom-filter-types). +Un objet décrivant les [filtres pris en charge par votre chargeur](#définition-de-types-de-filtres-personnalisés). ### `LiveDataEntry` From c0bcf2e5b017ad59f6bd328889aef0887d8570e3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 13 Mar 2026 14:52:50 +0100 Subject: [PATCH 07/11] fix most of the broken links --- .../docs/fr/guides/content-collections.mdx | 12 +++++----- .../docs/fr/guides/markdown-content.mdx | 2 +- .../fr/reference/content-loader-reference.mdx | 12 +++++----- .../fr/reference/modules/astro-content.mdx | 24 +++++++++---------- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index 692ff4af6872c..c1abdafefb578 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -296,7 +296,7 @@ const chats = defineCollection({ ### Chargeurs personnalisés au moment de la compilation -Vous pouvez [créer un chargeur personnalisé](/fr/reference/content-loader-reference/#building-a-loader) en utilisant l'API des chargeurs de contenu pour récupérer du contenu distant à partir de n'importe quelle source de données, comme un CMS, une base de données ou un point de terminaison d'API. +Vous pouvez [créer un chargeur personnalisé](/fr/reference/content-loader-reference/#création-dun-chargeur) en utilisant l'API des chargeurs de contenu pour récupérer du contenu distant à partir de n'importe quelle source de données, comme un CMS, une base de données ou un point de terminaison d'API. Vous pouvez ensuite importer et définir votre chargeur personnalisé dans la configuration de vos collections, en passant les valeurs requises : @@ -690,7 +690,7 @@ Chaque collection individuelle configure : Contrairement aux collections créées au moment de la compilation, aucun chargeur en direct intégré n'est disponible. Vous devrez [créer un chargeur en direct personnalisé](#création-dun-chargeur-en-direct) pour votre source de données spécifique ou trouver un chargeur tiers à transmettre à la propriété `loader` de votre collection en direct. -Vous pouvez éventuellement [inclure la sécurité des types dans vos chargeurs en direct](/fr/reference/content-loader-reference/#the-liveloader-object). Par conséquent, [définir un schéma Zod](#utilisation-des-schémas-zod-avec-des-collections-en-direct) pour les collections en direct est facultatif. Cependant, si vous en fournissez un, il sera prioritaire sur les types du chargeur en direct. +Vous pouvez éventuellement [inclure la sécurité des types dans vos chargeurs en direct](/fr/reference/content-loader-reference/#lobjet-liveloader). Par conséquent, [définir un schéma Zod](#utilisation-des-schémas-zod-avec-des-collections-en-direct) pour les collections en direct est facultatif. Cependant, si vous en fournissez un, il sera prioritaire sur les types du chargeur en direct. ```ts title="src/live.config.ts" // Définir des collections en direct pour accéder aux données en temps réel @@ -714,7 +714,7 @@ Vous pouvez [générer des routes de page](#générer-des-routes-à-partir-du-co ### Création d'un chargeur en direct -Vous pouvez créer un [chargeur en direct](/fr/reference/content-loader-reference/#live-loaders) personnalisé en utilisant l'API des chargeurs en direct pour récupérer du contenu distant à la demande à partir de n'importe quelle source de données, telle qu'un CMS, une base de données ou un point de terminaison d'API. Vous devrez indiquer à votre chargeur en direct comment récupérer et renvoyer les entrées de contenu à partir de votre source de données souhaitée, ainsi que prévoir la gestion des erreurs pour les requêtes de données infructueuses. +Vous pouvez créer un [chargeur en direct](/fr/reference/content-loader-reference/#chargeurs-en-direct) personnalisé en utilisant l'API des chargeurs en direct pour récupérer du contenu distant à la demande à partir de n'importe quelle source de données, telle qu'un CMS, une base de données ou un point de terminaison d'API. Vous devrez indiquer à votre chargeur en direct comment récupérer et renvoyer les entrées de contenu à partir de votre source de données souhaitée, ainsi que prévoir la gestion des erreurs pour les requêtes de données infructueuses. L'utilisation d'un chargeur en direct pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections de contenu d'Astro, notamment des fonctions d'assistance spécifiques à l'API des collections telles que `getLiveCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-créées-au-moment-de-la-compilation), ainsi que d'une gestion utile des erreurs. @@ -722,13 +722,13 @@ L'utilisation d'un chargeur en direct pour récupérer vos données créera auto Trouvez des chargeurs en direct créés par la communauté et par des tiers dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). ::: -Consultez les principes de base de la [création d'un chargeur en direct](/fr/reference/content-loader-reference/#building-a-live-loader) à l'aide de l'API des chargeurs en direct +Consultez les principes de base de la [création d'un chargeur en direct](/fr/reference/content-loader-reference/#création-dun-chargeur-en-direct) à l'aide de l'API des chargeurs en direct ### Utilisation des schémas Zod avec des collections en direct Vous pouvez utiliser des schémas Zod avec des collections en direct pour valider et transformer les données à l'exécution. Cette validation Zod fonctionne de la même manière que les [schémas pour les collections créées au moment de la compilation](#définition-dun-schéma-de-collection). -Lorsque vous définissez un schéma pour une collection en direct, celui-ci a priorité sur [les types du chargeur en direct](/fr/reference/content-loader-reference/#the-liveloader-object) lorsque vous interrogez la collection : +Lorsque vous définissez un schéma pour une collection en direct, celui-ci a priorité sur [les types du chargeur en direct](/fr/reference/content-loader-reference/#lobjet-liveloader) lorsque vous interrogez la collection : ```ts title="src/live.config.ts" import { defineLiveCollection } from 'astro:content'; @@ -814,7 +814,7 @@ const { entry: product } = await getLiveEntry('products', Astro.params.slug); Si votre chargeur en direct [renvoie une propriété `rendered`](/fr/reference/content-loader-reference/#livedataentryrendered), vous pouvez utiliser [la fonction `render()` et le composant ``](#restitution-du-contenu) pour afficher votre contenu directement dans vos pages, en utilisant la même méthode que les collections générées au moment de la compilation. -Vous avez également accès à toute [erreur renvoyée par le chargeur en direct](/fr/reference/content-loader-reference/#error-handling-in-live-loaders), par exemple, pour rediriger vers une page 404 lorsque le contenu ne peut pas être affiché : +Vous avez également accès à toute [erreur renvoyée par le chargeur en direct](/fr/reference/content-loader-reference/#gestion-des-erreurs-dans-les-chargeurs-en-direct), par exemple, pour rediriger vers une page 404 lorsque le contenu ne peut pas être affiché : ```astro title="src/pages/store/[id].astro" "render(entry)" "" --- diff --git a/src/content/docs/fr/guides/markdown-content.mdx b/src/content/docs/fr/guides/markdown-content.mdx index cc4cabee800be..ac508ec2e80a4 100644 --- a/src/content/docs/fr/guides/markdown-content.mdx +++ b/src/content/docs/fr/guides/markdown-content.mdx @@ -401,7 +401,7 @@ Lorsque vous utilisez la propriété frontmatter `layout`, vous devez inclure la Le processeur Markdown interne d'Astro n'est pas disponible pour le traitement du Markdown distant. -Pour récupérer du Markdown distant à utiliser dans des [collections de contenu](/fr/guides/content-collections/), vous pouvez [créer un chargeur personnalisé](/fr/guides/content-collections/#chargeurs-personnalisés-au-moment-de-la-compilation) qui a accès à une [fonction `renderMarkdown()`](/fr/reference/content-loader-reference/#rendermarkdown). +Pour récupérer du Markdown distant à utiliser dans des [collections de contenu](/fr/guides/content-collections/), vous pouvez [créer un chargeur personnalisé](/fr/guides/content-collections/#chargeurs-personnalisés-au-moment-de-la-compilation) qui a accès à une [fonction `renderMarkdown()`](/fr/reference/content-loader-reference/#loadercontextrendermarkdown). Pour récupérer directement du Markdown distant et le restituer au format HTML, vous devrez installer et configurer votre propre interpréteur de Markdown à partir de NPM. Celui-ci n'héritera pas des paramètres Markdown intégrés d'Astro que vous avez configurés. diff --git a/src/content/docs/fr/reference/content-loader-reference.mdx b/src/content/docs/fr/reference/content-loader-reference.mdx index a7838d0741403..a6d08619d2402 100644 --- a/src/content/docs/fr/reference/content-loader-reference.mdx +++ b/src/content/docs/fr/reference/content-loader-reference.mdx @@ -14,7 +14,7 @@ L'API des chargeurs de contenu d'Astro (Content Loader) vous permet de charger v Cette API inclut deux chargeurs prêts à l'emploi pour le contenu stocké localement. Elle fournit également des outils permettant de créer vos propres objets personnalisés capables de charger des données depuis n'importe quelle source dans des collections de contenu. -Apprenez-en davantage sur [l'interrogation des données chargées au moment de la compilation à l'aide de chargeurs](/fr/guides/content-collections/#querying-build-time-collections) ou [l'accès aux données en direct à partir des chargeurs en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation dans le guide des collections de contenu. +Apprenez-en davantage sur [l'interrogation des données chargées au moment de la compilation à l'aide de chargeurs](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) ou [l'accès aux données en direct à partir des chargeurs en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation dans le guide des collections de contenu. ## Chargeurs utilisés lors de la compilation @@ -117,7 +117,7 @@ Par défaut, il utilise [`github-slugger`](https://github.com/Flet/github-slugge Détermine s'il faut ou non stocker le contenu brut des fichiers dans le magasin de données. -Lorsque `retainBody` est défini sur `false`, [`entry.body`](/fr/reference/modules/astro-content/#body) sera `undefined` au lieu de contenir le contenu brut du fichier. +Lorsque `retainBody` est défini sur `false`, [`entry.body`](/fr/reference/modules/astro-content/#collectionentrybody) sera `undefined` au lieu de contenir le contenu brut du fichier. Définir cette propriété sur `false` réduit considérablement la taille déployée du magasin de données et permet d'éviter d'atteindre les limites de taille pour les sites comportant de très grandes collections. @@ -208,7 +208,7 @@ et même à la configuration complète d'Astro, et bien plus encore. Fournir un [`schema`](#loaderschema) Zod dans votre chargeur vous permet de valider les entrées de contenu récupérées avec [`parseData()`](#loadercontextparsedata) avant de les ajouter au [magasin](#loadercontextstore) de données. Ce schéma sera également utilisé comme schéma par défaut de la collection si aucun schéma n'est défini dans `src/content.config.ts`, afin de garantir la sûreté du typage et l'accès aux outils de l'éditeur. Vous n'avez pas non plus besoin de définir un schéma dans la collection de contenu si le chargeur fournit cette propriété. -Toutefois, si la collection de contenu [définit également un schéma](/fr/guides/content-collections/#defining-the-collection-schema), ce schéma sera utilisé à la place de celui de votre chargeur. Ceci permet aux utilisateurs de votre chargeur d'étendre son schéma ou de transformer des données pour leurs projets. Si vous [publiez et distribuez un chargeur](#distribuer-votre-chargeur), vous souhaiterez peut-être documenter ce comportement et inciter les utilisateurs à ne pas définir eux-mêmes de schéma de collection, ou leur indiquer comment le faire en toute sécurité s'ils ont besoin de données renvoyées dans un format différent. +Toutefois, si la collection de contenu [définit également un schéma](/fr/guides/content-collections/#définition-dun-schéma-de-collection), ce schéma sera utilisé à la place de celui de votre chargeur. Ceci permet aux utilisateurs de votre chargeur d'étendre son schéma ou de transformer des données pour leurs projets. Si vous [publiez et distribuez un chargeur](#distribuer-votre-chargeur), vous souhaiterez peut-être documenter ce comportement et inciter les utilisateurs à ne pas définir eux-mêmes de schéma de collection, ou leur indiquer comment le faire en toute sécurité s'ils ont besoin de données renvoyées dans un format différent. Si vous devez générer dynamiquement le schéma en fonction des options de configuration ou en introspectant une API, vous pouvez utiliser [`createSchema()`](#loadercreateschema) à la place. @@ -320,7 +320,7 @@ La récupération des données pour ces deux fonctions est généralement effect #### Fourniture d'un schéma pour les chargeurs en direct -Les chargeurs en direct ne comportent pas de propriété de schéma. Vous pouvez toutefois garantir la sûreté du typage en [définissant un schéma Zod pour votre collection](/fr/guides/content-collections/#using-zod-schemas-with-live-collections) dans `src/live.config.ts`, ou en passant des types génériques à l'interface `LiveLoader` pour les données qu'ils renvoient. +Les chargeurs en direct ne comportent pas de propriété de schéma. Vous pouvez toutefois garantir la sûreté du typage en [définissant un schéma Zod pour votre collection](/fr/guides/content-collections/#utilisation-des-schémas-zod-avec-des-collections-en-direct) dans `src/live.config.ts`, ou en passant des types génériques à l'interface `LiveLoader` pour les données qu'ils renvoient. #### Exemple de chargeur en direct @@ -1306,7 +1306,7 @@ Spécifie la liste des titres présents dans ce fichier. Chaque titre est décri **Type :** `Record`

-Décrit le frontmatter brut, analysé à partir du fichier. Cela peut inclure [des données injectées par programmation à partir de modules d'extension Remark](/fr/guides/markdown-content/#modifying-frontmatter-programmatically). +Décrit le frontmatter brut, analysé à partir du fichier. Cela peut inclure [des données injectées par programmation à partir de modules d'extension Remark](/fr/guides/markdown-content/#modification-programmatique-du-frontmatter). ## API des chargeurs en direct @@ -1447,7 +1447,7 @@ Il incombe au chargeur de valider et d'analyser les données avant de les renvoy Un objet contenant le contenu rendu d'une entrée si celle-ci a été convertie en HTML. Par exemple, il peut s'agir du contenu rendu d'une entrée Markdown ou du code HTML provenant d'un CMS. -Si ce champ est fourni, alors [la fonction `render()` et le composant ``](/fr/guides/content-collections/#rendering-body-content) sont disponibles pour afficher l'entrée dans une page. +Si ce champ est fourni, alors [la fonction `render()` et le composant ``](/fr/guides/content-collections/#restitution-du-contenu) sont disponibles pour afficher l'entrée dans une page. Si le chargeur ne renvoie pas de propriété `rendered` pour une entrée, le composant `` ne génèrera rien. diff --git a/src/content/docs/fr/reference/modules/astro-content.mdx b/src/content/docs/fr/reference/modules/astro-content.mdx index 6e17384a5839b..28ac2ac90093d 100644 --- a/src/content/docs/fr/reference/modules/astro-content.mdx +++ b/src/content/docs/fr/reference/modules/astro-content.mdx @@ -76,7 +76,7 @@ Cette fonction accepte les propriétés suivantes : Un objet ou une fonction permettant de charger des données depuis n'importe quelle source, locale ou distante, dans une collection de contenu générée lors de la compilation. (Pour les collections en direct, consultez la propriété [`loader` pour les chargeurs en direct](#loader-1).) -Découvrez les [chargeurs de collections au moment de la compilation](/fr/guides/content-collections/#build-time-collection-loaders) avec des explications guidées et des exemples d'utilisation. +Découvrez les [chargeurs de collections au moment de la compilation](/fr/guides/content-collections/#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) avec des explications guidées et des exemples d'utilisation. #### `schema` @@ -128,7 +128,7 @@ Cette fonction accepte les propriétés suivantes : Un objet permettant de charger des données à l'exécution depuis une source distante dans une collection de contenu en direct. (Pour les collections générées lors de la compilation, voir la propriété [`loader` pour les chargeurs au moment de la compilation](#loader).) -Apprenez comment [créer un chargeur en direct](/fr/guides/content-collections/#creating-a-live-loader) avec des explications guidées et des exemples d'utilisation. +Apprenez comment [créer un chargeur en direct](/fr/guides/content-collections/#création-dun-chargeur-en-direct) avec des explications guidées et des exemples d'utilisation. #### `schema` @@ -140,9 +140,9 @@ Un objet permettant de charger des données à l'exécution depuis une source di Un objet Zod optionnel permet de configurer le type et la structure de vos données pour une collection en direct. Chaque valeur doit utiliser un validateur Zod. (Pour les collections générées au moment de la compilation, consultez la propriété [`schema` des collections générées au moment de la compilation](#schema).) -Lorsque vous définissez un schéma, celui-ci aura la priorité sur les [types du chargeur en direct](/fr/reference/content-loader-reference/#live-loader-api) lorsque vous interrogez la collection. +Lorsque vous définissez un schéma, celui-ci aura la priorité sur les [types du chargeur en direct](/fr/reference/content-loader-reference/#api-des-chargeurs-en-direct) lorsque vous interrogez la collection. -Apprenez à [utiliser les schémas Zod avec les collections en direct](/fr/guides/content-collections/#using-zod-schemas-with-live-collections) grâce à des explications guidées et des exemples d'utilisation. +Apprenez à [utiliser les schémas Zod avec les collections en direct](/fr/guides/content-collections/#utilisation-des-schémas-zod-avec-des-collections-en-direct) grâce à des explications guidées et des exemples d'utilisation. ### `reference()` @@ -214,7 +214,7 @@ const draftBlogPosts = await getCollection('blog', ({ data }) => { --- ``` -Apprenez à [interroger les collections générées au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections) avec des explications guidées et des exemples d'utilisation. +Apprenez à [interroger les collections générées au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) avec des explications guidées et des exemples d'utilisation. ### `getLiveCollection()` @@ -240,7 +240,7 @@ const { entries: featuredProducts } = await getLiveCollection('produits', { feat --- ``` -Apprenez comment [accéder aux données des collections en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. +Apprenez comment [accéder aux données des collections en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation. ### `getEntry()` @@ -269,7 +269,7 @@ const enterpriseCaptainProfile = await getEntry(enterprisePost.data.captain); --- ``` -Apprenez-en davantage sur [l'interrogation des collections au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections) grâce à des explications guidées et des exemples d'utilisation. +Apprenez-en davantage sur [l'interrogation des collections au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) grâce à des explications guidées et des exemples d'utilisation. ### `getLiveEntry()` @@ -293,7 +293,7 @@ const { entry: mattDraft } = await getLiveEntry('blog', { --- ``` -Apprenez comment [accéder aux données des collections en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. +Apprenez comment [accéder aux données des collections en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation. ### `getEntries()` @@ -511,7 +511,7 @@ const { entries: allProducts } = await getLiveCollection('produits'); --- ``` -Apprenez comment [accéder aux données en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. +Apprenez comment [accéder aux données en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation. #### `LiveDataCollectionResult.error` @@ -532,7 +532,7 @@ const { error } = await getLiveCollection('produits'); --- ``` -Apprenez-en davantage sur la [gestion des erreurs](/fr/guides/content-collections/#error-handling) grâce à des explications guidées et des exemples d'utilisation. +Apprenez-en davantage sur la [gestion des erreurs](/fr/guides/content-collections/#gestion-des-erreurs) grâce à des explications guidées et des exemples d'utilisation. #### `LiveDataCollectionResult.cacheHint` @@ -605,7 +605,7 @@ const { entry } = await getLiveEntry('produits', Astro.params.id); --- ``` -Apprenez comment [accéder aux données en direct](/fr/guides/content-collections/#accessing-live-data) grâce à des explications guidées et des exemples d'utilisation. +Apprenez comment [accéder aux données en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation. #### `LiveDataEntryResult.error` @@ -631,7 +631,7 @@ if (error) {

{entry.data.name}

``` -Apprenez-en davantage sur la [gestion des erreurs](/fr/guides/content-collections/#error-handling) grâce à des explications guidées et des exemples d'utilisation. +Apprenez-en davantage sur la [gestion des erreurs](/fr/guides/content-collections/#gestion-des-erreurs) grâce à des explications guidées et des exemples d'utilisation. #### `LiveDataEntryResult.cacheHint` From 63e6f87862d157d72da5ca50e6d664573cdf2a58 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 14 Mar 2026 18:20:22 +0100 Subject: [PATCH 08/11] review/reword `guides/content-collections` --- .../docs/fr/guides/cms/cloudcannon.mdx | 2 +- src/content/docs/fr/guides/cms/keystatic.mdx | 2 +- .../docs/fr/guides/content-collections.mdx | 172 +++++++++--------- .../fr/guides/integrations-guide/markdoc.mdx | 2 +- .../docs/fr/guides/integrations-guide/mdx.mdx | 2 +- .../docs/fr/guides/markdown-content.mdx | 2 +- .../docs/fr/guides/media/cloudinary.mdx | 2 +- .../from-create-react-app.mdx | 2 +- .../guides/migrate-to-astro/from-gatsby.mdx | 4 +- .../guides/migrate-to-astro/from-nextjs.mdx | 2 +- .../fr/reference/content-loader-reference.mdx | 2 +- .../fr/reference/integrations-reference.mdx | 2 +- .../fr/reference/modules/astro-content.mdx | 4 +- src/content/docs/fr/tutorial/6-islands/4.mdx | 2 +- 14 files changed, 101 insertions(+), 101 deletions(-) diff --git a/src/content/docs/fr/guides/cms/cloudcannon.mdx b/src/content/docs/fr/guides/cms/cloudcannon.mdx index a2157e51405d0..7582f323ad058 100644 --- a/src/content/docs/fr/guides/cms/cloudcannon.mdx +++ b/src/content/docs/fr/guides/cms/cloudcannon.mdx @@ -144,7 +144,7 @@ L'exemple suivant créera un nouvel article de blog à partir de la collection ## Affichage du contenu de CloudCannon -Utilisez l'API des collections de contenu d'Astro pour [interroger et afficher vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation), comme vous le feriez dans n'importe quel projet Astro. +Utilisez l'API des collections de contenu d'Astro pour [interroger et afficher vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation), comme vous le feriez dans n'importe quel projet Astro. ### Affichage d'une liste pour une collection diff --git a/src/content/docs/fr/guides/cms/keystatic.mdx b/src/content/docs/fr/guides/cms/keystatic.mdx index 2e08b13e6557b..7b5c23bfb4169 100644 --- a/src/content/docs/fr/guides/cms/keystatic.mdx +++ b/src/content/docs/fr/guides/cms/keystatic.mdx @@ -183,7 +183,7 @@ Visitez `http://127.0.0.1:4321/keystatic` dans le navigateur pour voir l'interfa ## Rendu du contenu Keystatic -[Interrogez et affichez vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation), comme vous le feriez dans n'importe quel projet Astro. +[Interrogez et affichez vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation), comme vous le feriez dans n'importe quel projet Astro. ### Affichage d'une liste de collections diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index c1abdafefb578..7e9d8ae94056c 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -21,46 +21,46 @@ Astro fournit des API performantes et évolutives pour charger, interroger et re ## Que sont les collections de contenu ? -Une collection de contenu est un ensemble de données liées et structurellement identiques. Ces données peuvent être stockées localement dans un ou plusieurs fichiers (par exemple, un dossier contenant des fichiers Markdown d'articles de blog, un fichier JSON unique de descriptions de produits) ou récupérées depuis des sources distantes telles qu'une base de données, un CMS ou un point de terminaison d'API. Chaque élément de la collection est appelé une entrée. +Une collection de contenu est un ensemble de données liées et structurellement identiques. Ces données peuvent être stockées localement dans un ou plusieurs fichiers (par exemple, un dossier contenant des fichiers Markdown d'articles de blog ou un fichier JSON unique de descriptions de produits) ou récupérées depuis des sources distantes telles qu'une base de données, un CMS ou un point de terminaison d'API. Chaque élément de la collection est appelé une entrée. - src/ - **newsletter/** la collection « newsletter » - - week-1.md une entrée de collection - - week-2.md une entrée de collection - - week-3.md une entrée de collection -- **authors/** la collection « author » - - authors.json un fichier unique contenant toutes les entrées de la collection + - semaine-1.md une entrée de collection + - semaine-2.md une entrée de collection + - semaine-3.md une entrée de collection +- **auteurs/** la collection « auteur » + - auteurs.json un fichier unique contenant toutes les entrées de la collection -Les collections sont définies par l'emplacement et la structure de leurs entrées et offrent un moyen pratique d'interroger et de restituer votre contenu et les métadonnées associées. Vous pouvez créer une collection dès lors que vous disposez d'un groupe de données ou de contenus liés, stockés au même emplacement et partageant une structure commune. +Les collections sont définies par l'emplacement et la structure de leurs entrées et offrent une manière pratique d'interroger et de restituer votre contenu et les métadonnées associées. Vous pouvez créer une collection dès lors que vous disposez d'un groupe de données ou de contenus liés, stockés au même emplacement et partageant une structure commune. -[Deux types de collections de contenu](#types-de-collections) sont disponibles pour vous permettre de travailler avec des données récupérées soit au moment de la compilation, soit au moment de la requête. Les collections créées au moment de la compilation et les collections mises à jour en direct utilisent toutes deux : +[Deux types de collections de contenu](#types-de-collections) sont disponibles pour vous permettre de travailler avec des données récupérées soit lors de la compilation, soit lors d'une requête. Les collections consommées au moment de la compilation et les collections mises à jour en direct utilisent toutes deux : -- Un `loader` obligatoire pour récupérer votre contenu et vos métadonnées depuis leur emplacement de stockage et les mettre à disposition de votre projet via des API dédiées au contenu. -- Un schéma de collection optionnel qui vous permet de définir la structure attendue de chaque entrée pour la sûreté du typage, la saisie semi-automatique et la validation dans votre éditeur. +- Un chargeur (`loader`) obligatoire pour récupérer votre contenu et vos métadonnées depuis leur emplacement de stockage et les mettre à disposition de votre projet via des API dédiées au contenu. +- Un schéma de collection (`schema`) facultatif qui vous permet de définir la structure attendue de chaque entrée pour la sûreté du typage, la saisie semi-automatique et la validation dans votre éditeur. -Les collections stockées localement dans votre projet ou dans votre système de fichiers peuvent utiliser l'un des [chargeurs appelés au moment de la compilation fournis par Astro](#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) pour récupérer des données à partir de fichiers Markdown, MDX, Markdoc, YAML, TOML ou JSON. Indiquez à Astro l'emplacement de votre contenu, définissez la structure de vos données, et vous voilà prêt à lancer un blog ou un site similaire, riche en contenu et principalement statique, en un rien de temps ! +Les collections stockées localement dans votre projet ou dans votre système de fichiers peuvent utiliser l'un des [chargeurs appelés lors de la compilation fournis par Astro](#chargeurs-de-collections-appelés-lors-de-la-compilation) pour récupérer des données à partir de fichiers Markdown, MDX, Markdoc, YAML, TOML ou JSON. Indiquez à Astro l'emplacement de votre contenu, définissez la structure de vos données, et vous voilà prêt à lancer un blog ou un site similaire, riche en contenu et principalement statique, en un rien de temps ! -Avec [des chargeurs créés par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) ou en créant vous-même un [chargeur personnalisé pour les collections générées au moment de la compilation](#chargeurs-personnalisés-au-moment-de-la-compilation) ou un [chargeur en direct](#création-dun-chargeur-en-direct), vous pouvez récupérer des données distantes à partir de n'importe quelle source externe, telle qu'un CMS, une base de données ou un système de paiement headless, soit au moment de la compilation, soit en direct à la demande. +Avec [des chargeurs créés par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) ou en créant vous-même un [chargeur personnalisé pour les collections consommées lors la compilation](#chargeurs-personnalisés-appelés-lors-de-la-compilation) ou un [chargeur en direct](#création-dun-chargeur-en-direct), vous pouvez récupérer des données distantes à partir de n'importe quelle source externe, telle qu'un CMS, une base de données ou un système de paiement headless, soit au moment de la compilation, soit en direct à la demande. ### Types de collections -Les [collections de contenu générées au moment de la compilation](#définition-de-collections-de-contenu-générées-au-moment-de-la-compilation) sont mises à jour lors de la génération du site, et les données sont enregistrées dans une couche de stockage. Cette approche offre d'excellentes performances pour la plupart des contenus, mais peut ne pas convenir aux sources de données fréquemment mises à jour qui nécessitent des données actualisées en temps réel, comme les cours boursiers. +Les [collections de contenu consommées lors de la compilation](#définition-de-collections-de-contenu-consommées-lors-de-la-compilation) sont mises à jour lors de la génération du site, et les données sont enregistrées dans une couche de stockage. Cette approche offre d'excellentes performances pour la plupart des contenus, mais peut ne pas convenir aux sources de données fréquemment mises à jour qui nécessitent des données actualisées en temps réel, comme les cours boursiers. -Pour des performances et une évolutivité optimales, utilisez les collections de contenu générées au moment de la compilation lorsqu'une ou plusieurs des conditions suivantes sont remplies : +Pour obtenir les meilleures performances et la meilleure évolutivité, utilisez les collections de contenu consommées au moment de la compilation lorsqu'une ou plusieurs des conditions suivantes sont remplies : -- **Les performances sont essentielles** et vous souhaitez effectuer le pré-rendu des données au moment de la compilation. +- **Les performances sont essentielles** et vous souhaitez effectuer le pré-rendu des données lors de la compilation. - **Vos données sont relativement statiques** (par exemple, articles de blog, documentation, descriptions de produits). - **Vous souhaitez bénéficier de l'optimisation au moment de la compilation** et de la mise en cache. - **Vous devez traiter les fichiers MDX** ou **effectuer des optimisations pour les images**. - **Vos données peuvent être récupérées une seule fois et réutilisées** pour plusieurs compilations. :::tip[Démarrage rapide] -Consultez [le modèle de démarrage officiel d'Astro pour les blogs](https://github.com/withastro/astro/tree/latest/examples/blog) afin de démarrer rapidement avec un exemple d'utilisation du [chargeur `glob()` intégré](#le-chargeur-glob) et de [définition d'un schéma](#définition-dun-schéma-de-collection) pour une collection d'articles de blog locaux Markdown ou MDX. +Consultez [le modèle de démarrage officiel d'Astro pour les blogs](https://github.com/withastro/astro/tree/latest/examples/blog) afin de démarrer rapidement avec un exemple d'utilisation du [chargeur `glob()` intégré](#le-chargeur-glob) et de [définition d'un schéma](#définition-dun-schéma-de-collection) pour une collection d'articles de blog locaux au format Markdown ou MDX. ::: -[Les collections de contenu en direct](#collections-de-contenu-en-direct) récupèrent leurs données au moment de l'exécution plutôt qu'au moment de la compilation. Cela vous permet d'accéder à des données fréquemment mises à jour provenant de CMS, d'API, de bases de données ou d'autres sources via une API unifiée, sans avoir à recompiler votre site à chaque modification des données. Cependant, cette approche peut impacter les performances, car les données sont récupérées à chaque requête et renvoyées directement, sans magasin de données persistant. +[Les collections de contenu en direct](#collections-de-contenu-en-direct) récupèrent leurs données au moment de l'exécution plutôt qu'au moment de la compilation. Cela vous permet d'accéder à des données fréquemment mises à jour provenant de CMS, d'API, de bases de données ou d'autres sources via une API unifiée, sans avoir à recompiler votre site à chaque modification des données. Cependant, cette approche peut avoir un impact sur les performances, car les données sont récupérées à chaque requête et renvoyées directement, sans magasin de données persistant. Les collections de contenu en direct sont conçues pour les données qui changent fréquemment et qui doivent être à jour lorsqu'une page est demandée. Envisagez de les utiliser lorsqu'une ou plusieurs des conditions suivantes sont remplies : @@ -70,35 +70,35 @@ Les collections de contenu en direct sont conçues pour les données qui changen - **Vous devez transmettre des filtres dynamiques** à votre source de données en fonction des paramètres saisis par l'utilisateur ou des paramètres de la requête. - **Vous développez une fonctionnalité de prévisualisation** pour un CMS où les rédacteurs ont besoin de voir immédiatement le contenu en brouillon. -Les deux types de collections peuvent coexister dans un même projet, ce qui vous permet de choisir le type de collection le plus adapté à chaque source de données. Par exemple, une collection créée au moment de la compilation peut gérer les descriptions de produits, tandis qu'une collection en direct peut gérer l'inventaire du contenu. +Les deux types de collections peuvent coexister dans un même projet, ce qui vous permet de choisir le type de collection le plus adapté à chaque source de données. Par exemple, une collection consommée lors de la compilation peut gérer les descriptions de produits, tandis qu'une collection en direct peut gérer l'inventaire du contenu. Les deux types de collections utilisent des API similaires (par exemple `getCollection()` et `getLiveCollection()`), de sorte que travailler avec les collections vous semblera familier quel que soit votre choix, tout en vous assurant de toujours savoir avec quel type de collection vous travaillez. -Nous vous recommandons d'utiliser les collections de contenu générées au moment de la compilation chaque fois que cela est possible, et les collections en direct lorsque votre contenu doit être mis à jour en temps réel et que les compromis en termes de performances sont acceptables. Par ailleurs, les collections dynamiques présentent certaines limitations par rapport aux collections générées lors de la compilation : +Nous vous recommandons d'utiliser les collections de contenu consommées lors de la compilation chaque fois que cela est possible, et les collections en direct lorsque votre contenu doit être mis à jour en temps réel et que les compromis en termes de performances sont acceptables. Par ailleurs, les collections en direct présentent certaines limitations par rapport aux collections consommées lors de la compilation : -- **Aucune prise en charge MDX** : Le rendu MDX est impossible au moment de l’exécution. -- **Aucune optimisation d'images** : Les images ne peuvent pas être traitées lors de l'exécution. +- **Aucune prise en charge de MDX** : Le rendu de MDX est impossible dans l'environnement d'exécution. +- **Aucune optimisation d'images** : Les images ne peuvent pas être traitées dans l'environnement d'exécution. - **Considérations relatives aux performances** : Les données sont récupérées à chaque requête (sauf si elles sont mises en cache). -- **Aucune persistance des données** : Les données ne sont pas enregistrées dans la base de données de la couche de contenu. +- **Aucune persistance des données** : Les données ne sont pas enregistrées dans le magasin de données de la couche de contenu. ### Quand créer une collection Définissez vos données comme une collection lorsque : -- Vous avez plusieurs fichiers ou données à organiser qui partagent la même structure globale (par exemple, un répertoire d'articles de blog écrits en Markdown qui ont tous les mêmes propriétés frontmatter). -- Vous disposez de contenu existant stocké à distance, par exemple dans un CMS, et vous souhaitez tirer parti des fonctions d'assistance aux collections au lieu d'utiliser `fetch()` ou des SDK. -- Vous devez récupérer des (dizaines de) milliers de données connexes au moment de la compilation, et vous avez besoin d'une méthode de requête et de mise en cache qui gère à grande échelle. +- Vous avez plusieurs fichiers ou données à organiser qui partagent la même structure globale (par exemple, un répertoire d'articles de blog écrits en Markdown qui possèdent tous les mêmes propriétés de frontmatter). +- Vous disposez de contenus existants stockés à distance, par exemple dans un CMS, et vous souhaitez tirer parti des fonctions d'assistance des collections au lieu d'utiliser `fetch()` ou des SDK. +- Vous devez récupérer des (dizaines de) milliers de données connexes au moment de la compilation, et vous avez besoin d'une méthode de requête et de mise en cache qui peut s'appliquer à grande échelle. La plupart des avantages provenant de l'utilisation des collections viennent : -- de la définition d'une structure de données commune pour valider qu'une entrée individuelle est « correcte » ou « complète », évitant ainsi les erreurs en production. -- des API axées sur le contenu, conçues pour rendre les requêtes intuitives (par exemple `getCollection()` au lieu de `import.meta.glob()`) lors de l'importation et de la restitution des contenus sur vos pages. -- de l'accès aux chargeurs intégrés et à l'[API des chargeurs de contenu](/fr/reference/content-loader-reference/) de bas niveau pour récupérer votre contenu. Il existe en outre plusieurs chargeurs tiers et développés par la communauté, et vous pouvez créer votre propre chargeur personnalisé pour récupérer des données depuis n'importe où. -- des performances et de l'évolutivité. Les données des collections de contenu générées au moment de la compilation peuvent être mises en cache entre les compilations et conviennent à des dizaines de milliers d'entrées de contenu. +- De la définition d'une structure de données commune pour valider qu'une entrée individuelle est « correcte » ou « complète », évitant ainsi les erreurs en production. +- Des API axées sur le contenu, conçues pour rendre les requêtes intuitives (par exemple `getCollection()` au lieu de `import.meta.glob()`) lors de l'importation et de la restitution des contenus sur vos pages. +- De l'accès aux chargeurs intégrés et à l'[API des chargeurs de contenu](/fr/reference/content-loader-reference/) de bas niveau pour récupérer votre contenu. Il existe en outre plusieurs chargeurs tiers et développés par la communauté, et vous pouvez créer votre propre chargeur personnalisé pour récupérer des données depuis n'importe où. +- Des performances et de l'évolutivité. Les données des collections de contenu consommées lors de la compilation peuvent être mises en cache entre les compilations et conviennent à des dizaines de milliers d'entrées de contenu. ### Quand ne pas créer de collection -Les collections offrent une excellente structure, sécurité et organisation lorsque vous avez plusieurs éléments de contenu qui doivent partager les mêmes propriétés. +Les collections offrent une excellente structure, sécurité et organisation lorsque vous avez plusieurs morceaux de contenu qui doivent partager les mêmes propriétés. Les collections ne sont peut-être pas la solution idéale si : @@ -106,11 +106,11 @@ Les collections ne sont peut-être pas la solution idéale si : - Vous affichez des fichiers qui ne sont pas traités par Astro, tels que des PDF. Placez plutôt ces ressources statiques dans le [dossier `public/`](/fr/basics/project-structure/#public) de votre projet. - Votre source de données possède sa propre bibliothèque SDK/client pour les importations, qui est incompatible avec ou ne propose pas de chargeur de contenu, et vous préférez l'utiliser directement. -## Configuration TypeScript pour les collections +## Configuration de TypeScript pour les collections -Les collections de contenu s'appuient sur TypeScript pour fournir la validation avec Zod, Intellisense et la vérification des types dans votre éditeur. Par défaut, Astro configure un [modèle `strict` pour TypeScript](/fr/guides/typescript/#modèles-tsconfig) lorsque vous créez un nouveau projet à l'aide de la commande `create astro` de la CLI. Les modèles `strict` et `strictest` d'Astro incluent tous deux les paramètres TypeScript dont votre projet a besoin pour les collections de contenu. +Les collections de contenu s'appuient sur TypeScript pour fournir la validation avec Zod, l'Intellisense et la vérification des types dans votre éditeur. Par défaut, Astro configure un [modèle `strict` pour TypeScript](/fr/guides/typescript/#modèles-tsconfig) lorsque vous créez un nouveau projet à l'aide de la commande `create astro` de la CLI. Les modèles `strict` et `strictest` d'Astro incluent tous deux les paramètres TypeScript dont votre projet a besoin pour les collections de contenu. -Si vous avez modifié ce paramètre en `base` parce que vous n'écrivez pas de TypeScript dans votre projet ou que vous n'utilisez aucun des modèles intégrés d'Astro, vous devrez également ajouter les options `compilerOptions` suivantes dans votre fichier `tsconfig.json` pour utiliser les collections de contenu : +Si vous avez remplacé ce paramètre par `base` parce que vous n'écrivez pas de TypeScript dans votre projet ou que vous n'utilisez aucun des modèles intégrés d'Astro, vous devrez également ajouter les options de compilation (`compilerOptions`) suivantes dans votre fichier `tsconfig.json` pour utiliser les collections de contenu : ```json title="tsconfig.json" ins={4-7} { @@ -123,12 +123,12 @@ Si vous avez modifié ce paramètre en `base` parce que vous n'écrivez pas de T } ``` -## Définition de collections de contenu générées au moment de la compilation +## Définition de collections de contenu consommées lors de la compilation -Toutes vos collections de contenu au moment de la compilation sont définies dans un fichier spécial `src/content.config.ts` (les extensions `.js` et `.mjs` sont également prises en charge) à l'aide de `defineCollection()`, puis un seul objet de collections est exporté pour être utilisé dans votre projet. +Toutes vos collections de contenu consommées au moment de la compilation sont définies dans un fichier spécial `src/content.config.ts` (les extensions `.js` et `.mjs` sont également prises en charge) à l'aide de `defineCollection()`, puis un seul objet de collections est exporté pour être utilisé dans votre projet. Chaque collection individuelle configure : -- [un chargeur appelé au moment de la compilation (`loader`)](#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) pour une source de données (obligatoire) +- [un chargeur appelé lors de la compilation (`loader`)](#chargeurs-de-collections-appelés-lors-de-la-compilation) pour une source de données (obligatoire) - [Un schéma utilisé au moment de la compilation (`schema`)](#définition-dun-schéma-de-collection) pour la sûreté du typage (optionnel, mais fortement recommandé !) ```ts title="src/content.config.ts" @@ -156,21 +156,21 @@ const blog = defineCollection({ export const collections = { blog }; ``` -Vous pouvez ensuite utiliser les fonctions dédiées `getCollection()` et `getEntry()` pour [interroger les données de vos collections de contenu](#interroger-les-collections-créées-au-moment-de-la-compilation) et afficher votre contenu. +Vous pouvez ensuite utiliser les fonctions dédiées `getCollection()` et `getEntry()` pour [interroger les données de vos collections de contenu](#interroger-les-collections-consommées-lors-de-la-compilation) et afficher votre contenu. -Vous pouvez choisir de [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection au moment de la compilation pour un site entièrement statique et pré-rendu. Vous pouvez également générer vos collections au moment de la compilation, à la demande, en choisissant de retarder la compilation de votre page jusqu'à sa première requête. Cette option est utile lorsque vous avez un grand nombre de pages (par exemple, des milliers ou des dizaines de milliers) et que vous souhaitez différer la génération d'une page statique jusqu'à ce qu'elle soit nécessaire. +Vous pouvez choisir de [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection au moment de la compilation pour un site entièrement statique et pré-rendu. Vous pouvez également générer vos collections lors de la compilation, à la demande, en choisissant de retarder la compilation de votre page jusqu'à sa première requête. Cette option est utile lorsque vous avez un grand nombre de pages (par exemple, des milliers ou des dizaines de milliers) et que vous souhaitez différer la génération d'une page statique jusqu'à ce qu'elle soit nécessaire. -## Chargeurs de collections utilisés au moment de la compilation +## Chargeurs de collections appelés lors de la compilation -Astro propose deux chargeurs intégrés (`glob()` et `file()`) pour récupérer votre contenu local lors de la compilation. Indiquez l'emplacement de vos données dans votre projet ou sur votre système de fichiers, et ces chargeurs géreront automatiquement vos données et mettront à jour la couche de contenu du magasin de données persistant. +Astro propose deux chargeurs intégrés (`glob()` et `file()`) pour récupérer votre contenu local lors de la compilation. Indiquez l'emplacement de vos données dans votre projet ou dans votre système de fichiers, et ces chargeurs géreront automatiquement vos données et mettront à jour la couche de contenu du magasin de données persistant. -Pour récupérer des données distantes au moment de la compilation, vous pouvez [créer un chargeur personnalisé](#chargeurs-personnalisés-au-moment-de-la-compilation) pour récupérer vos données et mettre à jour le magasin de données. Ou vous pouvez utiliser n'importe quelle [intégration de chargeur tierce ou publiée par la communauté](https://astro.build/integrations/2/?search=&categories%5B%5D=loaders). Plusieurs existent déjà pour les systèmes de gestion de contenu populaires ainsi que pour des sources de données courantes telles que les coffres-forts Obsidian, les dépôts GitHub ou les publications Bluesky. +Pour récupérer des données distantes au moment de la compilation, vous pouvez [créer un chargeur personnalisé](#chargeurs-personnalisés-appelés-lors-de-la-compilation) pour récupérer vos données et mettre à jour le magasin de données. Ou vous pouvez utiliser n'importe quelle [intégration de chargeur tierce ou publiée par la communauté](https://astro.build/integrations/2/?search=&categories%5B%5D=loaders). Plusieurs existent déjà pour les systèmes de gestion de contenu populaires ainsi que pour des sources de données courantes telles que les coffres-forts Obsidian, les dépôts GitHub ou les publications Bluesky. ### Le chargeur `glob()` -Le [chargeur `glob()`](/fr/reference/content-loader-reference/#le-chargeur-glob) récupère les entrées de fichiers Markdown, MDX, Markdoc, JSON, YAML ou TOML depuis n'importe quel répertoire du système de fichiers. Si vous stockez vos entrées de contenu localement sous forme de fichiers séparés, comme un répertoire d'articles de blog, alors le chargeur `glob()` est tout ce dont vous avez besoin pour accéder à votre contenu. +Le [chargeur `glob()`](/fr/reference/content-loader-reference/#le-chargeur-glob) récupère les entrées à partir de dossiers de fichiers au format Markdown, MDX, Markdoc, JSON, YAML ou TOML situés n'importe où dans le système de fichiers. Si vous stockez vos entrées de contenu localement sous forme de fichiers séparés, comme un répertoire d'articles de blog, alors le chargeur `glob()` est tout ce dont vous avez besoin pour accéder à votre contenu. -Ce chargeur nécessite un modèle (`pattern`) de fichiers d'entrée à faire correspondre à l'aide des motifs glob pris en charge par [micromatch](https://github.com/micromatch/micromatch#matching-features), ainsi qu'un chemin d'accès de `base` indiquant l'emplacement de vos fichiers. Un `id` unique sera généré automatiquement pour chaque entrée à partir du nom de son fichier, mais vous pouvez [définir des identifiants personnalisés](#définition-didentifiants-personnalisés) si nécessaire. +Ce chargeur nécessite un modèle (`pattern`) de fichiers à faire correspondre à l'aide des motifs glob pris en charge par [micromatch](https://github.com/micromatch/micromatch#matching-features), ainsi qu'un chemin d'accès indiquant l'emplacement de `base` de vos fichiers. Un `id` unique sera généré automatiquement pour chaque entrée à partir du nom de son fichier, mais vous pouvez [définir des identifiants personnalisés](#définition-didentifiants-personnalisés) si nécessaire. ```ts title="src/content.config.ts" {5} import { defineCollection } from 'astro:content'; @@ -185,9 +185,9 @@ export const collections = { blog }; #### Définition d'identifiants personnalisés -Lors de l'utilisation du [chargeur `glob()`](#le-chargeur-glob) avec des fichiers Markdown, MDX, Markdoc, JSON ou TOML, l'[`id`](/fr/reference/modules/astro-content/#collectionentryid) de chaque entrée de contenu est automatiquement généré dans un format compatible avec les URL à partir du nom du fichier. Cet identifiant unique (`id`) est utilisé pour interroger directement l'entrée dans votre collection. Il est également utile lors de la [création de nouvelles pages et URL à partir de votre contenu](#générer-des-routes-à-partir-du-contenu). +Lors de l'utilisation du [chargeur `glob()`](#le-chargeur-glob) avec des fichiers Markdown, MDX, Markdoc, JSON ou TOML, l'[`id`](/fr/reference/modules/astro-content/#collectionentryid) de chaque entrée de contenu est automatiquement généré dans un format compatible avec les URL à partir du nom du fichier. Cet identifiant unique (`id`) est utilisé pour interroger directement l'entrée dans votre collection. Il est également utile lors de la [création de nouvelles pages et d'URL à partir de votre contenu](#générer-des-routes-à-partir-du-contenu). -Vous pouvez remplacer l'identifiant généré d'une entrée en ajoutant votre propre propriété `slug` à l'en-tête du fichier ou à l'objet de données pour les fichiers JSON. Cela est similaire à la fonctionnalité « lien permanent » d'autres frameworks web. +Vous pouvez remplacer l'identifiant généré d'une entrée en ajoutant votre propre propriété `slug` dans le frontmatter du fichier ou dans l'objet de données pour les fichiers JSON. Cela est similaire à la fonctionnalité « lien permanent » d'autres frameworks web. ```md title="src/blog/1.md" {3} --- @@ -205,12 +205,12 @@ Le contenu de votre article de blog ici. } ``` -Vous pouvez également transmettre des options à la [fonction d'assistance `generateID()`](/fr/reference/content-loader-reference/#generateid) du chargeur `glob()` lors de la définition de votre collection au moment de la compilation, afin d'ajuster la façon dont les `id` sont générés. Par exemple, vous pouvez souhaiter annuler le comportement par défaut qui consiste à convertir les majuscules en minuscules pour chaque entrée de la collection : +Vous pouvez également transmettre des options à la [fonction d'assistance `generateID()`](/fr/reference/content-loader-reference/#generateid) du chargeur `glob()` lors de la définition de votre collection consommée lors de la compilation, afin d'ajuster la façon dont les `id` sont générés. Par exemple, vous pouvez souhaiter annuler le comportement par défaut qui consiste à convertir les majuscules en minuscules pour chaque entrée de la collection : ```js title="src/content.config.ts" const auteurs = defineCollection({ - /* Récupérer tous les fichiers JSON de votre répertoire d'auteurs tout en conservant - * les majuscules dans l'identifiant. */ + /* Récupérer tous les fichiers JSON de votre répertoire d'auteurs tout + * en conservant les majuscules dans l'identifiant. */ loader: glob({ pattern: '**/*.json', base: "./src/data/auteurs", @@ -234,7 +234,7 @@ const chiens = defineCollection({ export const collections = { chiens }; ``` -Chaque objet d'entrée dans le fichier doit posséder un nom de propriété `id` avec une valeur unique afin de pouvoir être identifié et interrogé. Contrairement au chargeur `glob()`, le chargeur `file()` ne générera pas automatiquement d'identifiants pour chaque entrée. +Chaque objet dans le fichier doit posséder un nom de propriété `id` avec une valeur unique afin de pouvoir être identifié et interrogé. Contrairement au chargeur `glob()`, le chargeur `file()` ne générera pas automatiquement d'identifiants pour chaque entrée. Vous pouvez fournir vos entrées sous forme de tableau d'objets avec une propriété `id`, ou sous forme d'objet où l'identifiant unique (`id`) est le nom de la propriété : @@ -254,7 +254,7 @@ Vous pouvez fournir vos entrées sous forme de tableau d'objets avec une propri } ``` -#### Analyse d'autres formats de données +#### Analyse syntaxique d'autres formats de données La prise en charge de la transformation de fichiers JSON, YAML et TOML uniques en entrées de collection avec le chargeur `file()` est intégrée (sauf si vous avez un [document JSON imbriqué](#documents-json-imbriqués)). Pour charger votre collection à partir de types de fichiers non pris en charge, tels que `.csv`, vous devrez créer une [fonction d'analyse](/fr/reference/content-loader-reference/#parser). Cette fonction peut être rendue asynchrone si nécessaire (par exemple pour récupérer des fichiers sur le web, ou si votre analyseur syntaxique est asynchrone). @@ -280,7 +280,7 @@ L'argument `parser()` peut être utilisé pour charger une seule collection à p {"chiens": [{}], "chats": [{}]} ``` -Vous pouvez séparer ces collections en passant une fonction `parser()` personnalisée au chargeur `file()` pour chaque collection, en utilisant l'analyse JSON intégrée d'Astro : +Vous pouvez séparer ces collections en transmettant une fonction `parser()` personnalisée au chargeur `file()` pour chaque collection, en utilisant l'analyse JSON intégrée d'Astro : ```typescript title="src/content.config.ts" import { file } from "astro/loaders"; @@ -294,11 +294,11 @@ const chats = defineCollection({ }); ``` -### Chargeurs personnalisés au moment de la compilation +### Chargeurs personnalisés appelés lors de la compilation Vous pouvez [créer un chargeur personnalisé](/fr/reference/content-loader-reference/#création-dun-chargeur) en utilisant l'API des chargeurs de contenu pour récupérer du contenu distant à partir de n'importe quelle source de données, comme un CMS, une base de données ou un point de terminaison d'API. -Vous pouvez ensuite importer et définir votre chargeur personnalisé dans la configuration de vos collections, en passant les valeurs requises : +Vous pouvez ensuite importer et définir votre chargeur personnalisé dans la configuration de vos collections, en transmettant les valeurs requises : ```ts title="src/content.config.ts" import { defineCollection } from 'astro:content'; @@ -316,7 +316,7 @@ const blog = defineCollection({ Trouvez des chargeurs créés par la communauté et des chargeurs tiers dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). ::: -L'utilisation d'un chargeur personnalisé pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections locales, y compris l'accès aux fonctions d'assistance spécifiques à l'API des collections telles que `getCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-créées-au-moment-de-la-compilation), ainsi que de la validation du schéma. +L'utilisation d'un chargeur personnalisé pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections locales, y compris l'accès aux fonctions d'assistance spécifiques à l'API des collections telles que `getCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-consommées-lors-de-la-compilation), ainsi que de la validation du schéma. De la même manière que pour la création d'une intégration Astro ou d'un module d'extension pour Vite, vous pouvez [distribuer votre chargeur en tant que paquet npm](/fr/reference/publish-to-npm/) que d'autres peuvent utiliser dans leurs projets. @@ -324,7 +324,7 @@ De la même manière que pour la création d'une intégration Astro ou d'un modu ## Définition d'un schéma de collection -Les schémas garantissent la cohérence des données ou du frontmatter au sein d'une collection grâce à l'utilisationd de Zod pour la validation. Un schéma **garantit** que ces données existent sous une forme prévisible lorsque vous devez les consulter ou les interroger. Si un fichier enfreint le schéma de sa collection, Astro vous fournira un message d'erreur utile pour vous en informer. +Les schémas garantissent la cohérence des données ou du frontmatter au sein d'une collection grâce à l'utilisation de Zod pour la validation. Un schéma **garantit** que ces données existent sous une forme prévisible lorsque vous devez les consulter ou les interroger. Si un fichier enfreint le schéma de sa collection, Astro vous fournira un message d'erreur utile pour vous en informer. Les schémas permettent également à Astro de générer automatiquement les types TypeScript pour votre contenu. Lorsque vous définissez un schéma pour votre collection, Astro génèrera et appliquera automatiquement une interface TypeScript à celle-ci. Le résultat est une prise en charge complète de TypeScript lors de l'interrogation de votre collection, y compris la saisie semi-automatique des propriétés et la vérification des types. @@ -376,7 +376,7 @@ Toutes les [méthodes des schéma Zod](/fr/reference/modules/astro-zod/#utilisat Les entrées de collection peuvent également « faire référence » à d'autres entrées connexes. -Avec la fonction [`reference()`](/fr/reference/modules/astro-content/#reference), vous pouvez définir une propriété dans un schéma de collection comme une entrée d'une autre collection. Par exemple, vous pouvez exiger que chaque entrée de `space-shuttle` inclue une propriété `pilot` utilisant le schéma propre à la collection `pilot` pour la vérification des types, la saisie semi-automatique et la validation. +Avec la fonction [`reference()`](/fr/reference/modules/astro-content/#reference), vous pouvez définir une propriété dans un schéma de collection en tant qu'entrée d'une autre collection. Par exemple, vous pouvez exiger que chaque entrée de `navette-spaciale` inclue une propriété `pilote` qui utilise le schéma propre à la collection `pilote` pour la vérification des types, la saisie semi-automatique et la validation. Un exemple courant est un article de blog qui fait référence à des profils d'auteurs réutilisables stockés au format JSON, ou à des URL d'articles connexes enregistrés dans la même collection : @@ -421,14 +421,14 @@ relatedPosts: Ces références seront transformées en objets contenant les noms de propriété `collection` et `id`, vous permettant de les [interroger facilement dans vos modèles](#accès-aux-données-référencées). -## Interroger les collections créées au moment de la compilation +## Interroger les collections consommées lors de la compilation -Astro fournit des fonctions d'assistance pour interroger une collection créée au moment de la compilation et renvoyer une ou plusieurs entrées de contenu. +Astro fournit des fonctions d'assistance pour interroger une collection consommée au moment de la compilation et renvoyer une ou plusieurs entrées de contenu. - [`getCollection()`](/fr/reference/modules/astro-content/#getcollection) récupère une collection entière et renvoie un tableau d'entrées. - [`getEntry()`](/fr/reference/modules/astro-content/#getentry) récupère une seule entrée d'une collection. -Ces fonctions renvoient des entrées avec un `id` unique, un objet `data` avec toutes les propriétés définies, et renverront également une propriété `body` contenant le corps brut et non compilé d'un document Markdown, MDX ou Markdoc. +Ces fonctions renvoient des entrées avec un `id` unique, un objet `data` contenant toutes les propriétés définies, et renverront également une propriété `body` contenant le corps brut et non compilé d'un document Markdown, MDX ou Markdoc. ```astro title="src/pages/index.astro" --- @@ -531,7 +531,7 @@ const publishedBlogEntries = await getCollection('blog', ({ data }) => { --- ``` -Vous pouvez également créer des pages brouillon qui seront disponibles lors de l'exécution du serveur de développement, mais qui ne seront pas générés en production : +Vous pouvez également créer des pages brouillon qui seront disponibles lors de l'exécution du serveur de développement, mais qui ne seront pas générées en production : ```astro title="src/pages/blog.astro" --- @@ -559,7 +559,7 @@ const englishDocsEntries = await getCollection('docs', ({ id }) => { Pour accéder aux [références définies dans votre schéma](#définition-des-références-de-collection), commencez par interroger votre entrée de collection. Vos références seront disponibles dans l'objet `data` renvoyé (par exemple, `entry.data.author` et `entry.data.relatedPosts`). -Ensuite, vous pouvez utiliser à nouveau la fonction `getEntry()` (ou `getEntries()` pour récupérer plusieurs entrées référencées) en passant ces valeurs renvoyées. La fonction `reference()` de votre schéma transforme ces valeurs en un ou plusieurs objets contenant `collection` et `id`, ce qui facilite l'interrogation de ces données associées. +Ensuite, vous pouvez utiliser à nouveau la fonction `getEntry()` (ou `getEntries()` pour récupérer plusieurs entrées référencées) en transmettant ces valeurs renvoyées. La fonction `reference()` de votre schéma transforme ces valeurs en un ou plusieurs objets contenant `collection` et `id`, ce qui facilite l'interrogation de ces données associées. ```astro title="src/pages/blog/aventures-dans-espace.astro" @@ -599,11 +599,11 @@ La méthode exacte de génération des routes dépendra du fait que vos pages so ### Compilation pour sortie statique (par défaut) -Si vous créez un site web statique (comportement par défaut d'Astro) avec des collections au moment de la compilation, utilisez la fonction [`getStaticPaths()`](/fr/reference/routing-reference/#getstaticpaths) pour créer plusieurs pages à partir d'un seul composant de page (par exemple `src/pages/[id].astro`) lors de votre compilation. +Si vous créez un site web statique (comportement par défaut d'Astro) avec des collections consommées lors de la compilation, utilisez la fonction [`getStaticPaths()`](/fr/reference/routing-reference/#getstaticpaths) pour créer plusieurs pages à partir d'un seul composant de page (par exemple `src/pages/[id].astro`) lors de votre compilation. Appelez `getCollection()` à l'intérieur de `getStaticPaths()` pour que les données de votre collection soient disponibles pour la création de routes statiques. Ensuite, créez les chemins d'URL individuels à l'aide de la propriété `id` de chaque entrée de contenu. Chaque page reçoit l'intégralité de l'entrée de collection comme propriété à [utiliser dans votre modèle de page](#utilisation-du-contenu-dans-les-modèles-astro). -```astro title="src/pages/posts/[id].astro" "{ id: post.id }" "{ post }" +```astro title="src/pages/articles/[id].astro" "{ id: post.id }" "{ post }" --- import { getCollection, render } from 'astro:content'; // 1. Générer un nouveau chemin pour chaque entrée de collection @@ -622,7 +622,7 @@ const { Content } = await render(post); ``` -Cela générera une route de page pour chaque entrée de la collection `blog`. Par exemple, une entrée dans `src/blog/hello-world.md` possèdera un `id` avec la valeur `hello-world`, ainsi son URL finale sera `/posts/hello-world/`. +Cela générera une route de page pour chaque entrée de la collection `blog`. Par exemple, une entrée dans `src/blog/hello-world.md` possèdera un `id` avec la valeur `hello-world`, ainsi son URL finale sera `/articles/hello-world/`. :::note Si vos slugs personnalisés contiennent le caractère `/` pour produire des URL avec plusieurs segments de chemin, vous devez utiliser un [paramètre du reste (par exemple `[...id]`)](/fr/guides/routing/#paramètres-du-reste) dans le nom de fichier `.astro` pour cette page de routage dynamique. @@ -632,11 +632,11 @@ Si vos slugs personnalisés contiennent le caractère `/` pour produire des URL Avec un adaptateur installé pour le [rendu à la demande](/fr/guides/on-demand-rendering/), vous pouvez générer vos routes de page dynamiques au moment de la requête. Commencez par examiner la requête (à l'aide de `Astro.request` ou `Astro.params`) pour trouver le slug demandé, puis récupérez-le à l'aide d'une des fonctions d'assistance des collections de contenu d'Astro : -- [`getEntry()`](/fr/reference/modules/astro-content/#getentry) pour les pages de collection générées au moment de la compilation, qui sont générées une seule fois, lors de la première requête. -- [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) pour les pages de collection en direct où les données sont (re)récupérées à chaque requête. +- [`getEntry()`](/fr/reference/modules/astro-content/#getentry) pour les pages de collection consommées au moment de la compilation, qui sont générées une seule fois, lors de la première requête. +- [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) pour les pages de collection en direct où les données sont récupérées (à nouveau) à chaque requête. -```astro title="src/pages/posts/[id].astro" +```astro title="src/pages/articles/[id].astro" --- export const prerender = false; // Pas nécessaire en mode `server` @@ -669,28 +669,28 @@ Explorez le dossier `src/pages/` du [code de démonstration du tutoriel de blog ## Collections de contenu en direct -Les collections en direct utilisent une API différente de celle des collections de contenu générées lors de la compilation, même si les fonctions de configuration et d'assistance sont conçues pour être familières. +Les collections en direct utilisent une API différente de celle des collections de contenu consommées lors de la compilation, même si les fonctions de configuration et d'assistance sont conçues pour être familières. Les principales différences sont les suivantes : 1. **Moment d'exécution** : Exécuté à la demande et non au moment de la compilation 2. **Fichier de configuration** : Utilise `src/live.config.ts` au lieu de `src/content.config.ts` -3. **Définition de collections**: Utilise `defineLiveCollection()` au lieu de `defineCollection()` -4. **API du chargeur**: Implémente les méthodes `loadCollection` et `loadEntry` au lieu de la méthode `load` +3. **Définition de collections** : Utilise `defineLiveCollection()` au lieu de `defineCollection()` +4. **API du chargeur** : Implémente les méthodes `loadCollection` et `loadEntry` au lieu de la méthode `load` 5. **Données renvoyées** : Renvoie les données directement au lieu de les stocker dans le magasin de données 6. **Fonctions destinées aux utilisateurs** : Utilise `getLiveCollection()`/`getLiveEntry()` au lieu de `getCollection()`/`getEntry()` De plus, vous devez disposer d'un adaptateur configuré pour le [rendu à la demande](/fr/guides/on-demand-rendering/) des données de la collection en direct. -Définissez vos collections en direct dans le fichier spécial `src/live.config.ts` (distinct de votre fichier `src/content.config.ts` pour les collections générées au moment de la compilation, si vous en avez un). +Définissez vos collections en direct dans le fichier spécial `src/live.config.ts` (distinct de votre fichier `src/content.config.ts` pour les collections consommées lors de la compilation, si vous en avez un). -Chaque collection individuelle configure : +Chaque collection configure : - un [chargeur en direct (`loader`)](#création-dun-chargeur-en-direct) pour votre source de données, et éventuellement pour la sûreté du typage (obligatoire) - un [schéma de collection en direct (`schema`)](#utilisation-des-schémas-zod-avec-des-collections-en-direct) pour la sûreté du typage (optionnel) -Contrairement aux collections créées au moment de la compilation, aucun chargeur en direct intégré n'est disponible. Vous devrez [créer un chargeur en direct personnalisé](#création-dun-chargeur-en-direct) pour votre source de données spécifique ou trouver un chargeur tiers à transmettre à la propriété `loader` de votre collection en direct. +Contrairement aux collections consommées lors de la compilation, aucun chargeur en direct intégré n'est disponible. Vous devrez [créer un chargeur en direct personnalisé](#création-dun-chargeur-en-direct) pour votre source de données spécifique ou trouver un chargeur tiers à transmettre à la propriété `loader` de votre collection en direct. -Vous pouvez éventuellement [inclure la sécurité des types dans vos chargeurs en direct](/fr/reference/content-loader-reference/#lobjet-liveloader). Par conséquent, [définir un schéma Zod](#utilisation-des-schémas-zod-avec-des-collections-en-direct) pour les collections en direct est facultatif. Cependant, si vous en fournissez un, il sera prioritaire sur les types du chargeur en direct. +Vous pouvez éventuellement [inclure la sûreté du typage dans vos chargeurs en direct](/fr/reference/content-loader-reference/#lobjet-liveloader). Par conséquent, [définir un schéma Zod](#utilisation-des-schémas-zod-avec-des-collections-en-direct) pour les collections en direct est facultatif. Cependant, si vous en fournissez un, il sera prioritaire sur les types du chargeur en direct. ```ts title="src/live.config.ts" // Définir des collections en direct pour accéder aux données en temps réel @@ -710,13 +710,13 @@ export const collections = { products }; Vous pouvez ensuite utiliser les fonctions dédiées `getLiveCollection()` et `getLiveEntry()` pour [accéder à vos données en direct](#accès-aux-données-en-direct) et afficher votre contenu. -Vous pouvez [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection en direct à la demande, en récupérant des données fraîches au moment de l'exécution à chaque requête sans avoir besoin d'une recompilation de votre site comme le font les [collections générées au moment de la compilation](#définition-de-collections-de-contenu-générées-au-moment-de-la-compilation). Ceci est utile lorsque l'accès à des données en direct et actualisées est plus important que la disponibilité de votre contenu dans une couche de stockage de données performante qui persiste entre les différentes compilations du site. +Vous pouvez [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection en direct à la demande, en récupérant des données fraîches au moment de l'exécution à chaque requête sans avoir besoin d'une recompilation de votre site comme le font les [collections consommées lors de la compilation](#définition-de-collections-de-contenu-consommées-lors-de-la-compilation). Ceci est utile lorsque l'accès à des données en direct et actualisées est plus important que la disponibilité de votre contenu dans une couche de stockage de données performante qui persiste entre les différentes compilations du site. ### Création d'un chargeur en direct Vous pouvez créer un [chargeur en direct](/fr/reference/content-loader-reference/#chargeurs-en-direct) personnalisé en utilisant l'API des chargeurs en direct pour récupérer du contenu distant à la demande à partir de n'importe quelle source de données, telle qu'un CMS, une base de données ou un point de terminaison d'API. Vous devrez indiquer à votre chargeur en direct comment récupérer et renvoyer les entrées de contenu à partir de votre source de données souhaitée, ainsi que prévoir la gestion des erreurs pour les requêtes de données infructueuses. -L'utilisation d'un chargeur en direct pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections de contenu d'Astro, notamment des fonctions d'assistance spécifiques à l'API des collections telles que `getLiveCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-créées-au-moment-de-la-compilation), ainsi que d'une gestion utile des erreurs. +L'utilisation d'un chargeur en direct pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections de contenu d'Astro, notamment des fonctions d'assistance spécifiques à l'API des collections telles que `getLiveCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-consommées-lors-de-la-compilation), ainsi que d'une gestion utile des erreurs. :::tip Trouvez des chargeurs en direct créés par la communauté et par des tiers dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). @@ -726,7 +726,7 @@ Trouvez des chargeurs en direct créés par la communauté et par des tiers dans ### Utilisation des schémas Zod avec des collections en direct -Vous pouvez utiliser des schémas Zod avec des collections en direct pour valider et transformer les données à l'exécution. Cette validation Zod fonctionne de la même manière que les [schémas pour les collections créées au moment de la compilation](#définition-dun-schéma-de-collection). +Vous pouvez utiliser des schémas Zod avec des collections en direct pour valider et transformer les données à l'exécution. Cette validation Zod fonctionne de la même manière que les [schémas pour les collections consommées lors de la compilation](#définition-dun-schéma-de-collection). Lorsque vous définissez un schéma pour une collection en direct, celui-ci a priorité sur [les types du chargeur en direct](/fr/reference/content-loader-reference/#lobjet-liveloader) lorsque vous interrogez la collection : @@ -759,7 +759,7 @@ export const collections = { products }; Lors de l'utilisation de schémas Zod avec des collections en direct, les erreurs de validation sont automatiquement interceptées et renvoyées sous forme d'objets `AstroError` : -```astro title="src/pages/store/index.astro" +```astro title="src/pages/boutique/index.astro" --- export const prerender = false; // Pas nécessaire en mode `server` @@ -784,7 +784,7 @@ console.log(entry?.data.displayPrice); // p. ex., "29.99 €" ### Accès aux données en direct -Astro fournit des fonctions d'assistance pour les collections en direct permettant d'accéder aux données en temps réel à chaque requête et de renvoyer une ou plusieurs entrées de contenu. Celles-ci peuvent être utilisées de la même manière que leurs [homologues des collections générées au moment de la compilation](#interroger-les-collections-créées-au-moment-de-la-compilation). +Astro fournit des fonctions d'assistance pour les collections en direct permettant d'accéder aux données en temps réel à chaque requête et de renvoyer une ou plusieurs entrées de contenu. Celles-ci peuvent être utilisées de la même manière que leurs [homologues des collections consommées lors de la compilation](#interroger-les-collections-consommées-lors-de-la-compilation). - [`getLiveCollection()`](/fr/reference/modules/astro-content/#getlivecollection) récupère une collection entière et renvoie un tableau d'entrées. - [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) récupère une seule entrée d'une collection. @@ -793,7 +793,7 @@ Ces fonctions renvoient des entrées avec un identifiant unique (`id`) et un obj Vous pouvez utiliser ces fonctions pour accéder à vos données en direct, en transmettant le nom de la collection et, éventuellement, des conditions de filtrage. -```astro title="src/pages/store/[slug].astro" +```astro title="src/pages/boutique/[slug].astro" --- export const prerender = false; // Pas nécessaire en mode `server` @@ -801,22 +801,22 @@ import { getLiveCollection, getLiveEntry } from 'astro:content'; // Utiliser des filtres spécifiques au chargeur const { entries: draftArticles } = await getLiveCollection('articles', { - status: 'draft', + status: 'brouillon', author: 'john-doe', }); // Obtenir un produit spécifique par son identifiant -const { entry: product } = await getLiveEntry('products', Astro.params.slug); +const { entry: product } = await getLiveEntry('produits', Astro.params.slug); --- ``` -#### Restitution du contenu +#### Génération du contenu -Si votre chargeur en direct [renvoie une propriété `rendered`](/fr/reference/content-loader-reference/#livedataentryrendered), vous pouvez utiliser [la fonction `render()` et le composant ``](#restitution-du-contenu) pour afficher votre contenu directement dans vos pages, en utilisant la même méthode que les collections générées au moment de la compilation. +Si votre chargeur en direct [renvoie une propriété `rendered`](/fr/reference/content-loader-reference/#livedataentryrendered), vous pouvez utiliser [la fonction `render()` et le composant ``](#restitution-du-contenu) pour générer votre contenu directement dans vos pages, en utilisant la même méthode que les collections consommées lors de la compilation. Vous avez également accès à toute [erreur renvoyée par le chargeur en direct](/fr/reference/content-loader-reference/#gestion-des-erreurs-dans-les-chargeurs-en-direct), par exemple, pour rediriger vers une page 404 lorsque le contenu ne peut pas être affiché : -```astro title="src/pages/store/[id].astro" "render(entry)" "" +```astro title="src/pages/boutique/[id].astro" "render(entry)" "" --- export const prerender = false; // Pas nécessaire en mode `server` @@ -847,7 +847,7 @@ Lorsque vous appelez `getLiveCollection()` ou `getLiveEntry()`, l'erreur sera l' Vous pouvez utiliser `instanceof` pour vérifier le type d'une erreur lors de l'exécution : -```astro title="src/pages/store/[id].astro" "LiveEntryNotFoundError.is(error)" +```astro title="src/pages/boutique/[id].astro" "LiveEntryNotFoundError.is(error)" --- export const prerender = false; // Pas nécessaire en mode `server` diff --git a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx index d22053c9e4e75..d12823ff8d313 100644 --- a/src/content/docs/fr/guides/integrations-guide/markdoc.mdx +++ b/src/content/docs/fr/guides/integrations-guide/markdoc.mdx @@ -113,7 +113,7 @@ Les fichiers Markdoc ne peuvent être utilisés que dans les collections de cont - quick-start.mdoc -Ensuite, [interrogez et affichez vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) : +Ensuite, [interrogez et affichez vos articles et collections](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) : ```astro title="src/pages/why-markdoc.astro" --- diff --git a/src/content/docs/fr/guides/integrations-guide/mdx.mdx b/src/content/docs/fr/guides/integrations-guide/mdx.mdx index ed90b7e387445..74ed39b69ccf1 100644 --- a/src/content/docs/fr/guides/integrations-guide/mdx.mdx +++ b/src/content/docs/fr/guides/integrations-guide/mdx.mdx @@ -98,7 +98,7 @@ Les fichiers `.mdx` doivent être écrits en [syntaxe MDX](https://mdxjs.com/doc ### Utilisation de MDX local avec des collections de contenu -Pour inclure vos fichiers MDX locaux dans une collection de contenu, assurez-vous que votre [chargeur de collection](/fr/guides/content-collections/#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) est configuré pour charger le contenu à partir de fichiers `.mdx` : +Pour inclure vos fichiers MDX locaux dans une collection de contenu, assurez-vous que votre [chargeur de collection](/fr/guides/content-collections/#chargeurs-de-collections-appelés-lors-de-la-compilation) est configuré pour charger le contenu à partir de fichiers `.mdx` : ```js title="src/content.config.ts" ins="mdx" import { defineCollection } from 'astro:content'; diff --git a/src/content/docs/fr/guides/markdown-content.mdx b/src/content/docs/fr/guides/markdown-content.mdx index ac508ec2e80a4..6a4f718d8374b 100644 --- a/src/content/docs/fr/guides/markdown-content.mdx +++ b/src/content/docs/fr/guides/markdown-content.mdx @@ -401,7 +401,7 @@ Lorsque vous utilisez la propriété frontmatter `layout`, vous devez inclure la Le processeur Markdown interne d'Astro n'est pas disponible pour le traitement du Markdown distant. -Pour récupérer du Markdown distant à utiliser dans des [collections de contenu](/fr/guides/content-collections/), vous pouvez [créer un chargeur personnalisé](/fr/guides/content-collections/#chargeurs-personnalisés-au-moment-de-la-compilation) qui a accès à une [fonction `renderMarkdown()`](/fr/reference/content-loader-reference/#loadercontextrendermarkdown). +Pour récupérer du Markdown distant à utiliser dans des [collections de contenu](/fr/guides/content-collections/), vous pouvez [créer un chargeur personnalisé](/fr/guides/content-collections/#chargeurs-personnalisés-appelés-lors-de-la-compilation) qui a accès à une [fonction `renderMarkdown()`](/fr/reference/content-loader-reference/#loadercontextrendermarkdown). Pour récupérer directement du Markdown distant et le restituer au format HTML, vous devrez installer et configurer votre propre interpréteur de Markdown à partir de NPM. Celui-ci n'héritera pas des paramètres Markdown intégrés d'Astro que vous avez configurés. diff --git a/src/content/docs/fr/guides/media/cloudinary.mdx b/src/content/docs/fr/guides/media/cloudinary.mdx index e3643a455b3d1..87ecdd6ffd862 100644 --- a/src/content/docs/fr/guides/media/cloudinary.mdx +++ b/src/content/docs/fr/guides/media/cloudinary.mdx @@ -134,7 +134,7 @@ export const collections = { } ``` -Vous pouvez ensuite utiliser les [fonctions de requête `getCollection()` ou `getEntry()`](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) pour sélectionner une ou plusieurs images ou vidéos de votre collection. +Vous pouvez ensuite utiliser les [fonctions de requête `getCollection()` ou `getEntry()`](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) pour sélectionner une ou plusieurs images ou vidéos de votre collection. Consultez la [documentation `cldAssetsLoader` de Cloudinary](https://astro.cloudinary.dev/cldassetsloader/basic-usage) pour plus d'informations. diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx index 3595d3b191774..0da27832c6a6e 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-create-react-app.mdx @@ -349,7 +349,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) ou [la récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur l'importation de fichiers locaux avec [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [l'interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) ou [la récupération de données distantes](/fr/guides/data-fetching/). ### La mise en forme de CRA à Astro diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx index 34347197d73ff..c851ca72f6dd5 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-gatsby.mdx @@ -36,7 +36,7 @@ Lorsque vous recréez votre site Gatsby dans Astro, vous remarquerez quelques di - [Les composants `.astro`](/fr/basics/astro-components/) ne sont pas écrits sous forme de fonctions exportées renvoyant des modèles de page. Au lieu de cela, vous diviserez votre code en un « délimiteur de code » pour votre JavaScript et en un corps dédié au HTML que vous générez. -- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. +- [Données de fichiers locaux](/fr/guides/imports/): Gatsby utilise GraphQL pour récupérer des données à partir de vos fichiers de projet. Astro utilise les importations ESM et les fonctions d'attente de niveau supérieur (par exemple, [`import.meta.glob()`](/fr/guides/imports/#importmetaglob), [`getCollection()`](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation)) pour importer des données à partir de vos fichiers de projet. Vous pouvez ajouter manuellement GraphQL à votre projet Astro mais il n'est pas inclus par défaut. ## Convertir votre projet Gatsby @@ -355,7 +355,7 @@ Vous pouvez en apprendre davantage sur [l'utilisation d'images dans Astro](/fr/g Supprimez toutes les références aux requêtes GraphQL et utilisez à la place [`import.meta.glob()`](/fr/guides/imports/#importmetaglob) pour accéder aux données de vos fichiers locaux. -Ou, si vous utilisez des collections de contenu, interrogez vos fichiers Markdown et MDX dans `src/content/` en utilisant [`getEntry()` et `getCollection()`](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation). +Ou, si vous utilisez des collections de contenu, interrogez vos fichiers Markdown et MDX dans `src/content/` en utilisant [`getEntry()` et `getCollection()`](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation). Ces demandes de données sont réalisées dans le frontmatter du composant Astro utilisant ces données. diff --git a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx index 04a36b3eaa2e5..76cda06d22087 100644 --- a/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx +++ b/src/content/docs/fr/guides/migrate-to-astro/from-nextjs.mdx @@ -405,7 +405,7 @@ const randomUser = data.results[0]; --- ``` -En savoir plus sur les [importations de fichiers locaux avec `import.meta.glob()`](/fr/guides/imports/#importmetaglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) ou la [récupération de données distantes](/fr/guides/data-fetching/). +En savoir plus sur les [importations de fichiers locaux avec `import.meta.glob()`](/fr/guides/imports/#importmetaglob), l'[interrogation à l'aide de l'API Collections](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) ou la [récupération de données distantes](/fr/guides/data-fetching/). ### Les styles : de Next vers Astro diff --git a/src/content/docs/fr/reference/content-loader-reference.mdx b/src/content/docs/fr/reference/content-loader-reference.mdx index a6d08619d2402..374376bf7ad72 100644 --- a/src/content/docs/fr/reference/content-loader-reference.mdx +++ b/src/content/docs/fr/reference/content-loader-reference.mdx @@ -14,7 +14,7 @@ L'API des chargeurs de contenu d'Astro (Content Loader) vous permet de charger v Cette API inclut deux chargeurs prêts à l'emploi pour le contenu stocké localement. Elle fournit également des outils permettant de créer vos propres objets personnalisés capables de charger des données depuis n'importe quelle source dans des collections de contenu. -Apprenez-en davantage sur [l'interrogation des données chargées au moment de la compilation à l'aide de chargeurs](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) ou [l'accès aux données en direct à partir des chargeurs en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation dans le guide des collections de contenu. +Apprenez-en davantage sur [l'interrogation des données chargées au moment de la compilation à l'aide de chargeurs](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) ou [l'accès aux données en direct à partir des chargeurs en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation dans le guide des collections de contenu. ## Chargeurs utilisés lors de la compilation diff --git a/src/content/docs/fr/reference/integrations-reference.mdx b/src/content/docs/fr/reference/integrations-reference.mdx index 16411404d716c..7a50f74bc67bd 100644 --- a/src/content/docs/fr/reference/integrations-reference.mdx +++ b/src/content/docs/fr/reference/integrations-reference.mdx @@ -850,7 +850,7 @@ Vous pouvez également transmettre un objet `context` aux chargeurs. Il peut êt } ``` -Le chargeur peut ensuite accéder à la propriété `refreshContextData` pour obtenir le corps du webhook. Consultez la propriété [`refreshContextData`](/fr/reference/content-loader-reference/#refreshcontextdata) pour plus d'informations. +Le chargeur peut ensuite accéder à la propriété `refreshContextData` pour obtenir le corps du webhook. Consultez la propriété [`refreshContextData`](/fr/reference/content-loader-reference/#loadercontextrefreshcontextdata) pour plus d'informations. ### `astro:server:start` diff --git a/src/content/docs/fr/reference/modules/astro-content.mdx b/src/content/docs/fr/reference/modules/astro-content.mdx index 28ac2ac90093d..4d0c8c84f5d5a 100644 --- a/src/content/docs/fr/reference/modules/astro-content.mdx +++ b/src/content/docs/fr/reference/modules/astro-content.mdx @@ -76,7 +76,7 @@ Cette fonction accepte les propriétés suivantes : Un objet ou une fonction permettant de charger des données depuis n'importe quelle source, locale ou distante, dans une collection de contenu générée lors de la compilation. (Pour les collections en direct, consultez la propriété [`loader` pour les chargeurs en direct](#loader-1).) -Découvrez les [chargeurs de collections au moment de la compilation](/fr/guides/content-collections/#chargeurs-de-collections-utilisés-au-moment-de-la-compilation) avec des explications guidées et des exemples d'utilisation. +Découvrez les [chargeurs de collections au moment de la compilation](/fr/guides/content-collections/#chargeurs-de-collections-appelés-lors-de-la-compilation) avec des explications guidées et des exemples d'utilisation. #### `schema` @@ -214,7 +214,7 @@ const draftBlogPosts = await getCollection('blog', ({ data }) => { --- ``` -Apprenez à [interroger les collections générées au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) avec des explications guidées et des exemples d'utilisation. +Apprenez à [interroger les collections générées au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) avec des explications guidées et des exemples d'utilisation. ### `getLiveCollection()` diff --git a/src/content/docs/fr/tutorial/6-islands/4.mdx b/src/content/docs/fr/tutorial/6-islands/4.mdx index 939db5b7c5307..d75fb6f9a092d 100644 --- a/src/content/docs/fr/tutorial/6-islands/4.mdx +++ b/src/content/docs/fr/tutorial/6-islands/4.mdx @@ -149,7 +149,7 @@ Effectuez une mise à niveau vers la dernière version d'Astro et mettez à nive 1. Créez un fichier de page appelé `src/pages/posts/[...slug].astro`. Vos fichiers Markdown et MDX ne deviennent plus automatiquement des pages utilisant le routage basé sur les fichiers d'Astro lorsqu'ils se trouvent dans une collection. Vous devez donc créer une page chargée de générer chaque article de blog individuel. -2. Ajoutez le code suivant pour [interroger votre collection](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) afin de rendre le slug et le contenu de chaque page d'article de blog disponibles pour chaque page qu'elle générera : +2. Ajoutez le code suivant pour [interroger votre collection](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) afin de rendre le slug et le contenu de chaque page d'article de blog disponibles pour chaque page qu'elle générera : ```astro title="src/pages/posts/[...slug].astro" --- From 15821758cfcdd3bada74a34f15ba3c6f412700d3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 14 Mar 2026 19:14:41 +0100 Subject: [PATCH 09/11] review/reword other pages --- .../fr/reference/content-loader-reference.mdx | 51 +++++++++---------- .../fr/reference/modules/astro-content.mdx | 16 +++--- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/src/content/docs/fr/reference/content-loader-reference.mdx b/src/content/docs/fr/reference/content-loader-reference.mdx index 374376bf7ad72..777e903d215d2 100644 --- a/src/content/docs/fr/reference/content-loader-reference.mdx +++ b/src/content/docs/fr/reference/content-loader-reference.mdx @@ -16,11 +16,11 @@ Cette API inclut deux chargeurs prêts à l'emploi pour le contenu stocké local Apprenez-en davantage sur [l'interrogation des données chargées au moment de la compilation à l'aide de chargeurs](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) ou [l'accès aux données en direct à partir des chargeurs en direct](/fr/guides/content-collections/#accès-aux-données-en-direct) grâce à des explications guidées et des exemples d'utilisation dans le guide des collections de contenu. -## Chargeurs utilisés lors de la compilation +## Chargeurs appelés lors de la compilation -Les chargeurs utilisés lors de la compilation sont des objets dotés d'une [méthode `load()`](#loaderload) appelée lors de la compilation pour récupérer les données et mettre à jour le magasin de données. Cet objet peut également définir un schéma pour les entrées, qui peut être utilisé pour valider les données et générer des types statiques. +Les chargeurs utilisés lors de la compilation sont des objets dotés d'une [méthode `load()`](#loaderload) appelée au moment de la compilation pour récupérer les données et mettre à jour le magasin de données. Cet objet peut également définir un schéma pour les entrées, qui peut être utilisé pour valider les données et générer des types statiques. -Les chargeurs [`glob()`](#le-chargeur-glob) et [`file()`](#le-chargeur-file) d'Astro sont des exemples de chargeurs d'objets fournis prêts à l'emploi pour une utilisation avec du contenu local. Pour le contenu distant, aucun chargeur prédéfini n'est fourni. Vous devrez créer un chargeur d'objets ou utiliser un [chargeur publié par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) pour récupérer le contenu distant et interagir avec le magasin de données. +Les chargeurs [`glob()`](#le-chargeur-glob) et [`file()`](#le-chargeur-file) d'Astro sont des exemples de chargeurs sous forme d'objet fournis prêts à l'emploi pour une utilisation avec du contenu local. Pour le contenu distant, aucun chargeur prédéfini n'est fourni. Vous devrez créer un chargeur sous forme d'objet ou utiliser un [chargeur publié par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) pour récupérer le contenu distant et interagir avec le magasin de données. Pour une simple récupération de données, vous pouvez également [définir un chargeur en tant qu'une fonction asynchrone](#définir-un-chargeur-sous-forme-de-fonction) qui renvoie un tableau ou un objet contenant des entrées. @@ -32,7 +32,7 @@ Pour une simple récupération de données, vous pouvez également [définir un

-Le chargeur `glob()` crée des entrées à partir de répertoires de fichiers situés n'importe où sur le système de fichiers. Les types de fichiers supportés sont les fichiers Markdown, MDX, Markdoc, JSON, YAML et TOML. +Le chargeur `glob()` crée des entrées à partir de répertoires de fichiers situés n'importe où sur le système de fichiers. Les types de fichiers pris en charge sont les fichiers Markdown, MDX, Markdoc, JSON, YAML et TOML. Ce chargeur accepte un objet avec les propriétés suivantes : `pattern`, `base` (optionnel), `generateId` (optionnel) et `retainBody` (optionnel). @@ -56,14 +56,13 @@ const notes = defineCollection({ base: './src/data/notes', retainBody: false }), - schema: /* ... */ }); const authors = defineCollection({ /* Récupère tous les fichiers JSON dans votre * répertoire d'auteurs en conservant les lettres majuscules dans l'ID. */ loader: glob({ pattern: '**/*.json', - base: "./src/data/authors", + base: "./src/data/auteurs", generateId: ({ entry }) => entry.replace(/\.json$/, ''), }), }); @@ -104,7 +103,7 @@ Une fonction de rappel qui renvoie une chaîne de caractères unique pour chaque * `base` - l'[URL](https://developer.mozilla.org/fr/docs/Web/API/URL) du répertoire de base * `data` - les données analysées et non validées de l'entrée -Par défaut, il utilise [`github-slugger`](https://github.com/Flet/github-slugger) pour générer un slug avec des mots au format [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case). +Par défaut, elle utilise [`github-slugger`](https://github.com/Flet/github-slugger) pour générer un slug avec des mots au format [kebab-case](https://developer.mozilla.org/en-US/docs/Glossary/Kebab_case). #### `retainBody` @@ -135,7 +134,7 @@ Pour les collections MDX, cela réduira considérablement leur taille, puisqu'au Le chargeur `file()` crée des entrées à partir d'un seul fichier contenant un tableau d'objets avec un champ `id` unique, ou un objet avec des identifiants comme noms de propriété et des entrées comme valeurs. -Il prend en charge les fichiers JSON, YAML ou TOML et vous pouvez fournir un `parser` personnalisé pour les fichiers de données qu'il ne peut pas analyser par défaut, ou pour analyser les données de manière asynchrone. +Il prend en charge les fichiers JSON, YAML ou TOML et vous pouvez fournir une fonction d'analyse (`parser`) personnalisée pour les fichiers de données qu'il ne peut pas analyser par défaut, ou pour analyser les données de manière asynchrone. Ce chargeur accepte une propriété `fileName` et un objet optionnel comme second argument : @@ -145,11 +144,11 @@ import { file } from 'astro/loaders'; const authors = defineCollection({ /* Récupère toutes les entrées d'un fichier JSON. */ - loader: file("src/data/authors.json"), + loader: file("src/data/auteurs.json"), }); const products = defineCollection({ /* Récupère toutes les entrées d'un fichier CSV à l'aide d'un analyseur personnalisé. */ - loader: file("src/data/products.csv", { + loader: file("src/data/produits.csv", { parser: (fileContent) => { /* la logique de votre analyseur */ }, }), }); @@ -188,11 +187,11 @@ Une fonction de rappel pour créer une collection à partir du contenu d'un fich L'API des chargeurs de contenu est flexible et complète, offrant diverses options de récupération de données. Il est possible de créer des chargeurs simples ou complexes. Votre chargeur personnalisé dépendra à la fois de la source et de la structure de vos données, ainsi que de la manière dont vous choisissez de gérer la couche de stockage persistant des données. -La plupart des chargeurs exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur](#lobjet-loader) comprenant un nom (`name`) pour votre chargeur, une méthode `load()` et un `schema` définissant vos entrées. +La plupart des chargeurs exporteront une fonction qui accepte des options de configuration et renvoie un [objet décrivant un chargeur](#lobjet-loader) comprenant un nom (`name`) pour votre chargeur, une méthode `load()` et un `schema` définissant vos entrées. #### Charger les collections dans le magasin de données -La fonction [`load()`](#loaderload) renvoyée dans l'objet loader définit comment votre contenu est récupéré, analysé, validé et mis à jour. Il accepte un objet `context` qui vous permet de personnaliser la gestion de vos données de diverses manières et d'interagir avec le magasin de données. Une fonction `load()` typique va : +La fonction [`load()`](#loaderload) renvoyée dans l'objet du chargeur définit comment votre contenu est récupéré, analysé, validé et mis à jour. Il accepte un objet `context` qui vous permet de personnaliser la gestion de vos données de diverses manières et d'interagir avec le magasin de données. Une fonction `load()` typique va : - Récupérer vos données à partir d'une source. - Effacer le magasin de données existant. @@ -206,7 +205,7 @@ et même à la configuration complète d'Astro, et bien plus encore. #### Fournir un schéma -Fournir un [`schema`](#loaderschema) Zod dans votre chargeur vous permet de valider les entrées de contenu récupérées avec [`parseData()`](#loadercontextparsedata) avant de les ajouter au [magasin](#loadercontextstore) de données. Ce schéma sera également utilisé comme schéma par défaut de la collection si aucun schéma n'est défini dans `src/content.config.ts`, afin de garantir la sûreté du typage et l'accès aux outils de l'éditeur. Vous n'avez pas non plus besoin de définir un schéma dans la collection de contenu si le chargeur fournit cette propriété. +La fourniture d'un [`schema`](#loaderschema) Zod dans votre chargeur vous permet de valider les entrées de contenu récupérées avec [`parseData()`](#loadercontextparsedata) avant de les ajouter au [magasin](#loadercontextstore) de données. Ce schéma sera également utilisé comme schéma par défaut de la collection si aucun schéma n'est défini dans `src/content.config.ts`, afin de garantir la sûreté du typage et l'accès aux outils de l'éditeur. Vous n'avez pas non plus besoin de définir un schéma dans la collection de contenu si le chargeur fournit cette propriété. Toutefois, si la collection de contenu [définit également un schéma](/fr/guides/content-collections/#définition-dun-schéma-de-collection), ce schéma sera utilisé à la place de celui de votre chargeur. Ceci permet aux utilisateurs de votre chargeur d'étendre son schéma ou de transformer des données pour leurs projets. Si vous [publiez et distribuez un chargeur](#distribuer-votre-chargeur), vous souhaiterez peut-être documenter ce comportement et inciter les utilisateurs à ne pas définir eux-mêmes de schéma de collection, ou leur indiquer comment le faire en toute sécurité s'ils ont besoin de données renvoyées dans un format différent. @@ -255,7 +254,7 @@ export function myLoader(options: { url: string, apiKey: string }) { #### Définir votre collection avec votre chargeur -Utilisez votre chargeur personnalisé comme valeur de la propriété `loader` lorsque vous définissez votre collection dans `src/content.config.ts`. Les options de configuration peuvent être transmises à votre chargeur en tant qu'arguments : +Utilisez votre chargeur personnalisé comme valeur pour la propriété `loader` lorsque vous définissez votre collection dans `src/content.config.ts`. Les options de configuration peuvent être transmises à votre chargeur en tant qu'arguments : ```ts title="src/content.config.ts" import { defineCollection } from 'astro:content'; @@ -273,7 +272,7 @@ export const collections = { blog }; ### Définir un chargeur sous forme de fonction -Pour les extractions de données simples qui ne nécessitent pas de gestion personnalisée du magasin de données, de validation, de journalisation ou d'autres aides fournies par l'[objet de chargement utilisé au moment de la compilation](#lobjet-loader), vous pouvez définir votre chargeur sous forme de fonction. +Pour les extractions de données simples qui ne nécessitent pas de gestion personnalisée du magasin de données, de validation, de journalisation ou d'autres aides fournies par l'[objet de chargeur utilisé lors de la compilation](#lobjet-loader), vous pouvez définir votre chargeur sous forme de fonction. La fonction peut être asynchrone et doit renvoyer soit un tableau d'entrées contenant chacune un champ `id` unique, soit un objet où chaque nom de propriété est un identifiant unique et chaque valeur représente l'entrée. @@ -302,11 +301,11 @@ export const collections = { countries }; ## Chargeurs en direct -L'API des chargeurs en direct est conçue pour interroger n'importe quelle donnée en temps réel. Les chargeurs en direct peuvent filtrer les données entrantes et vérifier leur contenu en garantissant la sûreté du typage. Étant donné que les chargeurs en direct récupèrent les données à jour à chaque requête, il n'y a pas de magasin de données à mettre à jour. Ces chargeurs sont conçus pour renvoyer soit des données, soit un objet `Error` afin de vous permettre de gérer les erreurs en douceur. +L'API des chargeurs en direct est conçue pour interroger n'importe quelle donnée en temps réel. Les chargeurs en direct peuvent filtrer les données entrantes et vérifier leur contenu en garantissant la sûreté du typage. Étant donné que les chargeurs en direct récupèrent des données à jour à chaque requête, il n'y a pas de magasin de données à mettre à jour. Ces chargeurs sont conçus pour renvoyer soit des données, soit un objet `Error` afin de vous permettre de gérer les erreurs en douceur. ### Création d'un chargeur en direct -La plupart des chargeurs en direct exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur en direct]lobjet-liveloader) comprenant un `nom` pour votre chargeur et deux méthodes pour définir comment charger votre collection d'entrées et comment charger une seule entrée : `loadCollection()` et `loadEntry()`. +La plupart des chargeurs en direct exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur en direct](#lobjet-liveloader) comprenant un `nom` pour votre chargeur et deux méthodes pour définir comment charger votre collection d'entrées et comment charger une seule entrée : `loadCollection()` et `loadEntry()`. #### Chargement des données en direct @@ -320,7 +319,7 @@ La récupération des données pour ces deux fonctions est généralement effect #### Fourniture d'un schéma pour les chargeurs en direct -Les chargeurs en direct ne comportent pas de propriété de schéma. Vous pouvez toutefois garantir la sûreté du typage en [définissant un schéma Zod pour votre collection](/fr/guides/content-collections/#utilisation-des-schémas-zod-avec-des-collections-en-direct) dans `src/live.config.ts`, ou en passant des types génériques à l'interface `LiveLoader` pour les données qu'ils renvoient. +Les chargeurs en direct ne comportent pas de propriété de schéma. Vous pouvez toutefois garantir la sûreté du typage en [définissant un schéma Zod pour votre collection](/fr/guides/content-collections/#utilisation-des-schémas-zod-avec-des-collections-en-direct) dans `src/live.config.ts`, ou en transmettant des types génériques à l'interface `LiveLoader` pour les données qu'ils renvoient. #### Exemple de chargeur en direct @@ -612,7 +611,7 @@ export function myLoader(config): LiveLoader

-Cette section présente l'API permettant de définir un [chargeur sous forme d'objet utilisé au moment de la compilation](#création-dun-chargeur). +Cette section présente l'API permettant de définir un [chargeur sous forme d'objet appelé lors de la compilation](#création-dun-chargeur). ### L'objet `Loader` @@ -1199,7 +1198,7 @@ Il s'agit du type d'objet stocké dans le magasin de données. Il possède les p

-Un identifiant pour l'entrée, qui doit être unique dans la collection. Il est utilisé pour rechercher l'entrée dans le magasin et constitue la clé utilisée avec `getEntry` pour cette collection. +Un identifiant pour l'entrée, qui doit être unique dans la collection. Il est utilisé pour rechercher l'entrée dans le magasin et constitue la clé utilisée avec [`getEntry()`](/fr/reference/modules/astro-content/#getentry) pour cette collection. #### `DataEntry.data` @@ -1211,7 +1210,7 @@ Un identifiant pour l'entrée, qui doit être unique dans la collection. Il est Les données réelles de l'entrée. Lorsqu'un utilisateur accède à la collection, des types TypeScript seront générés selon le schéma de la collection. -Il est de la responsabilité du chargeur d'utiliser [`parseData`](#loadercontextparsedata) pour valider et analyser les données avant de les stocker dans le magasin de données : aucune validation n'est effectuée lors de l'obtention ou de la définition des données. +Il est de la responsabilité du chargeur d'utiliser [`parseData()`](#loadercontextparsedata) pour valider et analyser les données avant de les stocker dans le magasin de données : aucune validation n'est effectuée lors de l'obtention ou de la définition des données. #### `DataEntry.filePath` @@ -1322,7 +1321,7 @@ Cette section présente l'API permettant de définir un [chargeur en direct](#ch

-Une fonction de chargement en direct renvoie un objet comportant trois propriétés obligatoires. En plus de fournir un nom pour le chargeur, cet objet décrit comment récupérer des entrées individuelles et une collection entière à partir de votre source de données en direct. +Une fonction de chargeur en direct renvoie un objet comportant trois propriétés obligatoires. En plus de fournir un nom pour le chargeur, cet objet décrit comment récupérer des entrées individuelles et une collection entière à partir de votre source de données en direct. Utilisez le type générique `LiveLoader` pour garantir la sûreté du typage dans votre chargeur. Ce type accepte les paramètres de type suivants, dans cet ordre : diff --git a/src/content/docs/fr/reference/modules/astro-content.mdx b/src/content/docs/fr/reference/modules/astro-content.mdx index 4d0c8c84f5d5a..f6d1b706e92ae 100644 --- a/src/content/docs/fr/reference/modules/astro-content.mdx +++ b/src/content/docs/fr/reference/modules/astro-content.mdx @@ -5,14 +5,14 @@ sidebar: i18nReady: true tableOfContents: minHeadingLevel: 2 - maxHeadingLevel: 6 + maxHeadingLevel: 3 --- import Since from '~/components/Since.astro'; import ReadMore from '~/components/ReadMore.astro';

-Les collections de contenu générées au moment de la compilation offrent des API permettant de configurer, d'interroger et d'effectuer le rendu de vos fichiers Markdown, MDX, Markdoc, YAML, TOML ou JSON locaux, ainsi que du contenu distant. +Les collections de contenu consommées lors de la compilation offrent des API permettant de configurer, d'interroger et d'effectuer le rendu de vos fichiers Markdown, MDX, Markdoc, YAML, TOML ou JSON locaux, ainsi que du contenu distant.

@@ -74,9 +74,9 @@ Cette fonction accepte les propriétés suivantes :

-Un objet ou une fonction permettant de charger des données depuis n'importe quelle source, locale ou distante, dans une collection de contenu générée lors de la compilation. (Pour les collections en direct, consultez la propriété [`loader` pour les chargeurs en direct](#loader-1).) +Un objet ou une fonction permettant de charger des données depuis n'importe quelle source, locale ou distante, dans une collection de contenu consommée lors de la compilation. (Pour les collections en direct, consultez la propriété [`loader` pour les chargeurs en direct](#loader-1).) -Découvrez les [chargeurs de collections au moment de la compilation](/fr/guides/content-collections/#chargeurs-de-collections-appelés-lors-de-la-compilation) avec des explications guidées et des exemples d'utilisation. +Découvrez les [chargeurs de collections appelés lors de la compilation](/fr/guides/content-collections/#chargeurs-de-collections-appelés-lors-de-la-compilation) avec des explications guidées et des exemples d'utilisation. #### `schema` @@ -126,7 +126,7 @@ Cette fonction accepte les propriétés suivantes :

-Un objet permettant de charger des données à l'exécution depuis une source distante dans une collection de contenu en direct. (Pour les collections générées lors de la compilation, voir la propriété [`loader` pour les chargeurs au moment de la compilation](#loader).) +Un objet permettant de charger des données à l'exécution depuis une source distante dans une collection de contenu en direct. (Pour les collections consommées lors de la compilation, voir la propriété [`loader` utilisée au moment de la compilation](#loader).) Apprenez comment [créer un chargeur en direct](/fr/guides/content-collections/#création-dun-chargeur-en-direct) avec des explications guidées et des exemples d'utilisation. @@ -138,7 +138,7 @@ Un objet permettant de charger des données à l'exécution depuis une source di

-Un objet Zod optionnel permet de configurer le type et la structure de vos données pour une collection en direct. Chaque valeur doit utiliser un validateur Zod. (Pour les collections générées au moment de la compilation, consultez la propriété [`schema` des collections générées au moment de la compilation](#schema).) +Un objet Zod optionnel permet de configurer le type et la structure de vos données pour une collection en direct. Chaque valeur doit utiliser [un validateur Zod](https://github.com/colinhacks/zod). (Pour les collections consommées lors de la compilation, consultez la propriété [`schema` utilisée au moment de la compilation](#schema).) Lorsque vous définissez un schéma, celui-ci aura la priorité sur les [types du chargeur en direct](/fr/reference/content-loader-reference/#api-des-chargeurs-en-direct) lorsque vous interrogez la collection. @@ -214,7 +214,7 @@ const draftBlogPosts = await getCollection('blog', ({ data }) => { --- ``` -Apprenez à [interroger les collections générées au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) avec des explications guidées et des exemples d'utilisation. +Apprenez à [interroger les collections consommées lors de la compilation](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) avec des explications guidées et des exemples d'utilisation. ### `getLiveCollection()` @@ -269,7 +269,7 @@ const enterpriseCaptainProfile = await getEntry(enterprisePost.data.captain); --- ``` -Apprenez-en davantage sur [l'interrogation des collections au moment de la compilation](/fr/guides/content-collections/#interroger-les-collections-créées-au-moment-de-la-compilation) grâce à des explications guidées et des exemples d'utilisation. +Apprenez-en davantage sur [l'interrogation des collections consommée lors de la compilation](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) grâce à des explications guidées et des exemples d'utilisation. ### `getLiveEntry()` From 0dd2d00c10849d885fe1efcd64cf8e026555b557 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 17 Mar 2026 14:40:05 +0100 Subject: [PATCH 10/11] amazing, thanks a lot Co-authored-by: ld-web <46715342+ld-web@users.noreply.github.com> Co-authored-by: Armand Philippot --- .../docs/fr/guides/content-collections.mdx | 30 +++++++++---------- .../fr/reference/content-loader-reference.mdx | 18 +++++------ .../fr/reference/modules/astro-content.mdx | 8 ++--- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index 7e9d8ae94056c..e0d24bec9e751 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -15,7 +15,7 @@ import ReadMore from "~/components/ReadMore.astro"

-Les **collections de contenu** sont la meilleure façon de gérer des ensembles de contenu dans n'importe quel projet Astro : articles de blog, descriptions de produits, pages de profil, recettes ou tout autre contenu structuré. Les collections permettent d'organiser et d'interroger vos documents, activent l'IntelliSense et la vérification des types dans votre éditeur, et fournit automatiquement la sûreté du typage TypeScript pour l'ensemble de votre contenu. +Les **collections de contenu** sont la meilleure façon de gérer des ensembles de contenu dans n'importe quel projet Astro : articles de blog, descriptions de produits, pages de profil, recettes ou tout autre contenu structuré. Les collections permettent d'organiser et d'interroger vos documents, activent l'IntelliSense et la vérification des types dans votre éditeur, et fournissent automatiquement la sûreté du typage TypeScript pour l'ensemble de votre contenu. Astro fournit des API performantes et évolutives pour charger, interroger et restituer du contenu provenant de n'importe quelle source : stocké localement dans votre projet, hébergé à distance ou récupéré en direct à partir de sources fréquemment mises à jour. @@ -53,7 +53,7 @@ Pour obtenir les meilleures performances et la meilleure évolutivité, utilisez - **Les performances sont essentielles** et vous souhaitez effectuer le pré-rendu des données lors de la compilation. - **Vos données sont relativement statiques** (par exemple, articles de blog, documentation, descriptions de produits). - **Vous souhaitez bénéficier de l'optimisation au moment de la compilation** et de la mise en cache. -- **Vous devez traiter les fichiers MDX** ou **effectuer des optimisations pour les images**. +- **Vous devez traiter les fichiers MDX** ou **effectuer des optimisations d'images**. - **Vos données peuvent être récupérées une seule fois et réutilisées** pour plusieurs compilations. :::tip[Démarrage rapide] @@ -86,29 +86,29 @@ Nous vous recommandons d'utiliser les collections de contenu consommées lors de Définissez vos données comme une collection lorsque : - Vous avez plusieurs fichiers ou données à organiser qui partagent la même structure globale (par exemple, un répertoire d'articles de blog écrits en Markdown qui possèdent tous les mêmes propriétés de frontmatter). -- Vous disposez de contenus existants stockés à distance, par exemple dans un CMS, et vous souhaitez tirer parti des fonctions d'assistance des collections au lieu d'utiliser `fetch()` ou des SDK. +- Vous disposez de contenus existants stockés à distance, par exemple dans un CMS, et vous souhaitez tirer parti des fonctions utilitaires des collections au lieu d'utiliser `fetch()` ou des SDK. - Vous devez récupérer des (dizaines de) milliers de données connexes au moment de la compilation, et vous avez besoin d'une méthode de requête et de mise en cache qui peut s'appliquer à grande échelle. La plupart des avantages provenant de l'utilisation des collections viennent : - De la définition d'une structure de données commune pour valider qu'une entrée individuelle est « correcte » ou « complète », évitant ainsi les erreurs en production. -- Des API axées sur le contenu, conçues pour rendre les requêtes intuitives (par exemple `getCollection()` au lieu de `import.meta.glob()`) lors de l'importation et de la restitution des contenus sur vos pages. +- Des API axées sur le contenu, conçues pour rendre les requêtes intuitives (par exemple `getCollection()` au lieu de `import.meta.glob()`) lors de l'importation et du rendu des contenus sur vos pages. - De l'accès aux chargeurs intégrés et à l'[API des chargeurs de contenu](/fr/reference/content-loader-reference/) de bas niveau pour récupérer votre contenu. Il existe en outre plusieurs chargeurs tiers et développés par la communauté, et vous pouvez créer votre propre chargeur personnalisé pour récupérer des données depuis n'importe où. - Des performances et de l'évolutivité. Les données des collections de contenu consommées lors de la compilation peuvent être mises en cache entre les compilations et conviennent à des dizaines de milliers d'entrées de contenu. ### Quand ne pas créer de collection -Les collections offrent une excellente structure, sécurité et organisation lorsque vous avez plusieurs morceaux de contenu qui doivent partager les mêmes propriétés. +Les collections offrent une excellente structure, sécurité et organisation lorsque vous avez plusieurs entrées de contenu qui doivent partager les mêmes propriétés. Les collections ne sont peut-être pas la solution idéale si : - Vous n'avez qu'une seule ou un petit nombre de pages de contenu. Envisagez plutôt de créer des [composants de page individuels](/fr/basics/astro-pages/), comme `src/pages/about.astro`, contenant directement votre contenu. - Vous affichez des fichiers qui ne sont pas traités par Astro, tels que des PDF. Placez plutôt ces ressources statiques dans le [dossier `public/`](/fr/basics/project-structure/#public) de votre projet. -- Votre source de données possède sa propre bibliothèque SDK/client pour les importations, qui est incompatible avec ou ne propose pas de chargeur de contenu, et vous préférez l'utiliser directement. +- Votre source de données possède sa propre bibliothèque SDK/client pour les importations, qui est incompatible ou ne propose pas de chargeur de contenu, et vous préférez l'utiliser directement. ## Configuration de TypeScript pour les collections -Les collections de contenu s'appuient sur TypeScript pour fournir la validation avec Zod, l'Intellisense et la vérification des types dans votre éditeur. Par défaut, Astro configure un [modèle `strict` pour TypeScript](/fr/guides/typescript/#modèles-tsconfig) lorsque vous créez un nouveau projet à l'aide de la commande `create astro` de la CLI. Les modèles `strict` et `strictest` d'Astro incluent tous deux les paramètres TypeScript dont votre projet a besoin pour les collections de contenu. +Les collections de contenu s'appuient sur TypeScript pour fournir la validation avec Zod, l'Intellisense et la vérification des types dans votre éditeur. Par défaut, Astro configure un [modèle `strict` pour TypeScript](/fr/guides/typescript/#modèles-tsconfig) lorsque vous créez un nouveau projet à l'aide de la commande `create astro`. Les modèles `strict` et `strictest` d'Astro incluent tous deux les paramètres TypeScript dont votre projet a besoin pour les collections de contenu. Si vous avez remplacé ce paramètre par `base` parce que vous n'écrivez pas de TypeScript dans votre projet ou que vous n'utilisez aucun des modèles intégrés d'Astro, vous devrez également ajouter les options de compilation (`compilerOptions`) suivantes dans votre fichier `tsconfig.json` pour utiliser les collections de contenu : @@ -205,7 +205,7 @@ Le contenu de votre article de blog ici. } ``` -Vous pouvez également transmettre des options à la [fonction d'assistance `generateID()`](/fr/reference/content-loader-reference/#generateid) du chargeur `glob()` lors de la définition de votre collection consommée lors de la compilation, afin d'ajuster la façon dont les `id` sont générés. Par exemple, vous pouvez souhaiter annuler le comportement par défaut qui consiste à convertir les majuscules en minuscules pour chaque entrée de la collection : +Vous pouvez également transmettre des options à la [fonction utilitaire `generateID()`](/fr/reference/content-loader-reference/#generateid) du chargeur `glob()` lors de la définition de votre collection consommée lors de la compilation, afin d'ajuster la façon dont les `id` sont générés. Par exemple, vous pouvez souhaiter annuler le comportement par défaut qui consiste à convertir les majuscules en minuscules pour chaque entrée de la collection : ```js title="src/content.config.ts" const auteurs = defineCollection({ @@ -316,7 +316,7 @@ const blog = defineCollection({ Trouvez des chargeurs créés par la communauté et des chargeurs tiers dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). ::: -L'utilisation d'un chargeur personnalisé pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections locales, y compris l'accès aux fonctions d'assistance spécifiques à l'API des collections telles que `getCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-consommées-lors-de-la-compilation), ainsi que de la validation du schéma. +L'utilisation d'un chargeur personnalisé pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections locales, y compris l'accès aux fonctions utilitaires spécifiques à l'API des collections telles que `getCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-consommées-lors-de-la-compilation), ainsi que de la validation du schéma. De la même manière que pour la création d'une intégration Astro ou d'un module d'extension pour Vite, vous pouvez [distribuer votre chargeur en tant que paquet npm](/fr/reference/publish-to-npm/) que d'autres peuvent utiliser dans leurs projets. @@ -423,7 +423,7 @@ Ces références seront transformées en objets contenant les noms de propriét ## Interroger les collections consommées lors de la compilation -Astro fournit des fonctions d'assistance pour interroger une collection consommée au moment de la compilation et renvoyer une ou plusieurs entrées de contenu. +Astro fournit des fonctions utilitaires pour interroger une collection consommée au moment de la compilation et renvoyer une ou plusieurs entrées de contenu. - [`getCollection()`](/fr/reference/modules/astro-content/#getcollection) récupère une collection entière et renvoie un tableau d'entrées. - [`getEntry()`](/fr/reference/modules/astro-content/#getentry) récupère une seule entrée d'une collection. @@ -630,7 +630,7 @@ Si vos slugs personnalisés contiennent le caractère `/` pour produire des URL ### Création de routes à la demande au moment de la requête -Avec un adaptateur installé pour le [rendu à la demande](/fr/guides/on-demand-rendering/), vous pouvez générer vos routes de page dynamiques au moment de la requête. Commencez par examiner la requête (à l'aide de `Astro.request` ou `Astro.params`) pour trouver le slug demandé, puis récupérez-le à l'aide d'une des fonctions d'assistance des collections de contenu d'Astro : +Avec un adaptateur installé pour le [rendu à la demande](/fr/guides/on-demand-rendering/), vous pouvez générer vos routes de page dynamiques au moment de la requête. Commencez par examiner la requête (à l'aide de `Astro.request` ou `Astro.params`) pour trouver le slug demandé, puis récupérez-le à l'aide d'une des fonctions utilitaires des collections de contenu d'Astro : - [`getEntry()`](/fr/reference/modules/astro-content/#getentry) pour les pages de collection consommées au moment de la compilation, qui sont générées une seule fois, lors de la première requête. - [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) pour les pages de collection en direct où les données sont récupérées (à nouveau) à chaque requête. @@ -669,11 +669,11 @@ Explorez le dossier `src/pages/` du [code de démonstration du tutoriel de blog ## Collections de contenu en direct -Les collections en direct utilisent une API différente de celle des collections de contenu consommées lors de la compilation, même si les fonctions de configuration et d'assistance sont conçues pour être familières. +Les collections en direct utilisent une API différente de celle des collections de contenu consommées lors de la compilation, même si les fonctions de configuration et utilitaires sont conçues pour être familières. Les principales différences sont les suivantes : -1. **Moment d'exécution** : Exécuté à la demande et non au moment de la compilation +1. **Moment d'exécution** : Exécuté au moment de la requête et non au moment de la compilation 2. **Fichier de configuration** : Utilise `src/live.config.ts` au lieu de `src/content.config.ts` 3. **Définition de collections** : Utilise `defineLiveCollection()` au lieu de `defineCollection()` 4. **API du chargeur** : Implémente les méthodes `loadCollection` et `loadEntry` au lieu de la méthode `load` @@ -716,7 +716,7 @@ Vous pouvez [générer des routes de page](#générer-des-routes-à-partir-du-co Vous pouvez créer un [chargeur en direct](/fr/reference/content-loader-reference/#chargeurs-en-direct) personnalisé en utilisant l'API des chargeurs en direct pour récupérer du contenu distant à la demande à partir de n'importe quelle source de données, telle qu'un CMS, une base de données ou un point de terminaison d'API. Vous devrez indiquer à votre chargeur en direct comment récupérer et renvoyer les entrées de contenu à partir de votre source de données souhaitée, ainsi que prévoir la gestion des erreurs pour les requêtes de données infructueuses. -L'utilisation d'un chargeur en direct pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections de contenu d'Astro, notamment des fonctions d'assistance spécifiques à l'API des collections telles que `getLiveCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-consommées-lors-de-la-compilation), ainsi que d'une gestion utile des erreurs. +L'utilisation d'un chargeur en direct pour récupérer vos données créera automatiquement une collection à partir de vos données distantes. Vous bénéficierez ainsi de tous les avantages des collections de contenu d'Astro, notamment des fonctions utilitaires spécifiques à l'API des collections telles que `getLiveCollection()` et `render()` pour [interroger et afficher vos données](#interroger-les-collections-consommées-lors-de-la-compilation), ainsi que d'une gestion utile des erreurs. :::tip Trouvez des chargeurs en direct créés par la communauté et par des tiers dans le [répertoire des intégrations d'Astro](https://astro.build/integrations/?search=&categories%5B%5D=loaders). @@ -784,7 +784,7 @@ console.log(entry?.data.displayPrice); // p. ex., "29.99 €" ### Accès aux données en direct -Astro fournit des fonctions d'assistance pour les collections en direct permettant d'accéder aux données en temps réel à chaque requête et de renvoyer une ou plusieurs entrées de contenu. Celles-ci peuvent être utilisées de la même manière que leurs [homologues des collections consommées lors de la compilation](#interroger-les-collections-consommées-lors-de-la-compilation). +Astro fournit des fonctions utilitaires pour les collections en direct permettant d'accéder aux données en temps réel à chaque requête et de renvoyer une ou plusieurs entrées de contenu. Celles-ci peuvent être utilisées de la même manière que leurs [homologues des collections consommées lors de la compilation](#interroger-les-collections-consommées-lors-de-la-compilation). - [`getLiveCollection()`](/fr/reference/modules/astro-content/#getlivecollection) récupère une collection entière et renvoie un tableau d'entrées. - [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) récupère une seule entrée d'une collection. diff --git a/src/content/docs/fr/reference/content-loader-reference.mdx b/src/content/docs/fr/reference/content-loader-reference.mdx index 777e903d215d2..7eb70b99da4d4 100644 --- a/src/content/docs/fr/reference/content-loader-reference.mdx +++ b/src/content/docs/fr/reference/content-loader-reference.mdx @@ -20,7 +20,7 @@ Cette API inclut deux chargeurs prêts à l'emploi pour le contenu stocké local Les chargeurs utilisés lors de la compilation sont des objets dotés d'une [méthode `load()`](#loaderload) appelée au moment de la compilation pour récupérer les données et mettre à jour le magasin de données. Cet objet peut également définir un schéma pour les entrées, qui peut être utilisé pour valider les données et générer des types statiques. -Les chargeurs [`glob()`](#le-chargeur-glob) et [`file()`](#le-chargeur-file) d'Astro sont des exemples de chargeurs sous forme d'objet fournis prêts à l'emploi pour une utilisation avec du contenu local. Pour le contenu distant, aucun chargeur prédéfini n'est fourni. Vous devrez créer un chargeur sous forme d'objet ou utiliser un [chargeur publié par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) pour récupérer le contenu distant et interagir avec le magasin de données. +Les chargeurs [`glob()`](#le-chargeur-glob) et [`file()`](#le-chargeur-file) d'Astro sont des exemples de chargeurs sous forme d'objet fournis et prêts à l'emploi pour une utilisation avec du contenu local. Pour le contenu distant, aucun chargeur prédéfini n'est fourni. Vous devrez créer un chargeur sous forme d'objet ou utiliser un [chargeur publié par la communauté](https://astro.build/integrations/?search=&categories%5B%5D=loaders) pour récupérer le contenu distant et interagir avec le magasin de données. Pour une simple récupération de données, vous pouvez également [définir un chargeur en tant qu'une fonction asynchrone](#définir-un-chargeur-sous-forme-de-fonction) qui renvoie un tableau ou un objet contenant des entrées. @@ -198,7 +198,7 @@ La fonction [`load()`](#loaderload) renvoyée dans l'objet du chargeur définit - Analyser et valider vos données selon un schéma fourni. - Mettre à jour le magasin de données avec les nouvelles entrées. -La méthode `load()` fournit également des fonctions d'assistance pour enregistrer des messages dans la console, générer du contenu en HTML, surveiller les modifications en mode développement et recharger les données, donner accès aux métadonnées +La méthode `load()` fournit également des fonctions utilitaires pour enregistrer des messages dans la console, générer du contenu en HTML, surveiller les modifications en mode développement et recharger les données, donner accès aux métadonnées et même à la configuration complète d'Astro, et bien plus encore. Consultez la liste complète des propriétés de [`LoaderContext`](#loadercontext) pour connaître toutes les options disponibles pour la fonction `load()`. @@ -276,7 +276,7 @@ Pour les extractions de données simples qui ne nécessitent pas de gestion pers La fonction peut être asynchrone et doit renvoyer soit un tableau d'entrées contenant chacune un champ `id` unique, soit un objet où chaque nom de propriété est un identifiant unique et chaque valeur représente l'entrée. -Ce modèle fournit un raccourci pratique pour accomplir les tâches de base normalement effectuées par la fonction `load()` pour [charger les collections dans le magasin de données](#charger-les-collections-dans-le-magasin-de-données). Lors de la compilation, le chargeur effacera automatiquement le magasin de données et rechargera toutes les entrées. Aucune autre option de personnalisation ni fonction d'assistance pour la gestion des données n'est fournie. +Ce modèle fournit un raccourci pratique pour accomplir les tâches de base normalement effectuées par la fonction `load()` pour [charger les collections dans le magasin de données](#charger-les-collections-dans-le-magasin-de-données). Lors de la compilation, le chargeur effacera automatiquement le magasin de données et rechargera toutes les entrées. Aucune autre option de personnalisation ni fonction utilitaire pour la gestion des données n'est fournie. Ces chargeurs sont souvent suffisamment simples pour que vous puissiez choisir de les définir directement dans le fichier `src/content.config.ts` : @@ -305,7 +305,7 @@ L'API des chargeurs en direct est conçue pour interroger n'importe quelle donn ### Création d'un chargeur en direct -La plupart des chargeurs en direct exporteront une fonction qui accepte les options de configuration et renvoie un [objet décrivant un chargeur en direct](#lobjet-liveloader) comprenant un `nom` pour votre chargeur et deux méthodes pour définir comment charger votre collection d'entrées et comment charger une seule entrée : `loadCollection()` et `loadEntry()`. +La plupart des chargeurs en direct exporteront une fonction qui accepte des options de configuration et renvoie un [objet décrivant un chargeur en direct](#lobjet-liveloader) comprenant un `nom` pour votre chargeur et deux méthodes pour définir comment charger votre collection d'entrées et comment charger une seule entrée : `loadCollection()` et `loadEntry()`. #### Chargement des données en direct @@ -721,7 +721,7 @@ Un [schéma Zod](/fr/guides/content-collections/#définition-des-types-de-donné Lorsque vous devez générer dynamiquement le schéma au moment de la compilation en fonction des options de configuration ou en introspectant une API, utilisez plutôt [`createSchema()`](#loadercreateschema). -Si la propriété est présente, elle sera remplacée par tout schéma Zod défini pour la collection dans le fichier `src/content.config.ts`.n fonction des options de configuration ou en introspectant une API. +Si la propriété est présente, elle sera remplacée par tout schéma Zod défini pour la collection dans le fichier `src/content.config.ts`. #### `Loader.createSchema()` @@ -953,7 +953,7 @@ export function myLoader(settings) { } ``` -##### `LoaderContext.fileURL` +##### `fileURL`

@@ -961,7 +961,7 @@ export function myLoader(settings) {

-Spécifie le chemin d'accès au fichier à utiliser pour résoudre les chemins d'image relatifs dans le contenu Markdown. +Spécifie le chemin d'accès vers le fichier à utiliser pour résoudre les chemins d'image relatifs dans le contenu Markdown. L'exemple suivant utilise le [répertoire racine configuré](/fr/reference/configuration-reference/#root) pour résoudre les chemins d'accès aux images : @@ -1325,7 +1325,7 @@ Une fonction de chargeur en direct renvoie un objet comportant trois propriété Utilisez le type générique `LiveLoader` pour garantir la sûreté du typage dans votre chargeur. Ce type accepte les paramètres de type suivants, dans cet ordre : -- **`TData`** (par défaut `Record`) : La structure de données de chaque entrée renvoyée par le chargeur. +- **`TData`** (par défaut `Record`) : La structure de données de chaque entrée renvoyée par le chargeur. - **`TEntryFilter`** (par défaut : `never`) : Type d’objet filtre accepté par [`getLiveEntry()`](/fr/reference/modules/astro-content/#getliveentry) et accessible dans [`loadEntry()`](#liveloaderloadentry). Utilisez `never` si vous ne prenez pas en charge le filtrage des entrées individuelles. - **`TCollectionFilter`** (par défaut : `never`) : Type d’objet filtre accepté par [`getLiveCollection()`](/fr/reference/modules/astro-content/#getlivecollection) et accessible dans [`loadCollection()`](#liveloaderloadcollection). Utilisez `never` lorsque vous ne prenez pas en charge le filtrage des collections. - **`TError`** (par défaut `Error`) : Une [classe `Error` personnalisée](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Error#types_derreur_personnalisés) qui peut être renvoyée par le chargeur pour une gestion des erreurs plus granulaire. @@ -1492,7 +1492,7 @@ Un objet optionnel fournissant des indications sur la manière de mettre en cach ### `CacheHint` -Un objet que les chargeurs peuvent renvoyer via la propriété `cacheHint` dans [`LiveDataCollection`](#livedatacollection) ou [`LiveDataEntry`](#livedataentry) pour fournir des indications pour aider à la mise en cache de la réponse. Cet objet contient les propriétés suivantes : +Un objet que les chargeurs peuvent renvoyer via la propriété `cacheHint` dans [`LiveDataCollection`](#livedatacollection) ou [`LiveDataEntry`](#livedataentry) pour fournir des indications aidant à la mise en cache de la réponse. Cet objet contient les propriétés suivantes : #### `CacheHint.tags` diff --git a/src/content/docs/fr/reference/modules/astro-content.mdx b/src/content/docs/fr/reference/modules/astro-content.mdx index f6d1b706e92ae..127e8fd3f9500 100644 --- a/src/content/docs/fr/reference/modules/astro-content.mdx +++ b/src/content/docs/fr/reference/modules/astro-content.mdx @@ -86,7 +86,7 @@ Un objet ou une fonction permettant de charger des données depuis n'importe que

-Un objet, ou une fonction Zod, optionnel qui renvoie un objet Zod pour configurer le type et la structure des métadonnées d'un document pour une collection. Chaque valeur doit utiliser un validateur Zod. (Pour les collections en direct, consultez la propriété `schema` des collections en direct.) +Un objet ou une fonction Zod, optionnel, qui renvoie un objet Zod pour configurer le type et la structure des métadonnées d'un document pour une collection. Chaque valeur doit utiliser [un validateur Zod](/fr/reference/modules/astro-zod/#validateurs-de-types-de-données-courants). (Pour les collections en direct, consultez la propriété [`schema` des collections en direct](/fr/reference/modules/astro-content/#schema-1).) Découvrez la [définition d'un schéma de collection](/fr/guides/content-collections/#définition-dun-schéma-de-collection) à l'aide de Zod avec des explications guidées, des exemples d'utilisation et des types de données courants. @@ -269,7 +269,7 @@ const enterpriseCaptainProfile = await getEntry(enterprisePost.data.captain); --- ``` -Apprenez-en davantage sur [l'interrogation des collections consommée lors de la compilation](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) grâce à des explications guidées et des exemples d'utilisation. +Apprenez-en davantage sur [l'interrogation des collections consommées lors de la compilation](/fr/guides/content-collections/#interroger-les-collections-consommées-lors-de-la-compilation) grâce à des explications guidées et des exemples d'utilisation. ### `getLiveEntry()` @@ -422,7 +422,7 @@ Le contenu rendu d'une entrée tel qu'[enregistré par votre chargeur](/fr/refer **Type :** `string | undefined`

-Le chemin d'accès à une entrée relative à votre répertoire de projet. Cette valeur n'est disponible que pour les entrées locales. +Le chemin d'accès à une entrée, relatif à votre répertoire de projet. Cette valeur n'est disponible que pour les entrées locales. ### `CollectionKey` @@ -616,7 +616,7 @@ const { entry } = await getLiveEntry('produits', Astro.params.id); Une erreur renvoyée lorsque le chargeur n'a pas pu charger l'entrée. Il peut s'agir d'une erreur personnalisée définie par le chargeur ou d'une erreur intégrée. -L'exemple suivant accède à l'entrée demandée dans une collection en direct nommée `produits` et à toute erreur, et redirige vers la page 404 si une erreur existe : +L'exemple suivant récupère l'entrée demandée et toute erreur possible depuis une collection en direct nommée `produits`, puis redirige vers la page 404 si une erreur existe : ```astro title="src/pages/boutique/[id].astro" --- From 28c05b1db998ebab2265dff64e9bf61f04f4556b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 17 Mar 2026 16:23:07 +0100 Subject: [PATCH 11/11] second batch Co-authored-by: ld-web <46715342+ld-web@users.noreply.github.com> Co-authored-by: Armand Philippot --- src/content/docs/fr/guides/content-collections.mdx | 4 ++-- src/content/docs/fr/reference/content-loader-reference.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/docs/fr/guides/content-collections.mdx b/src/content/docs/fr/guides/content-collections.mdx index e0d24bec9e751..ce6c1ec9d2c66 100644 --- a/src/content/docs/fr/guides/content-collections.mdx +++ b/src/content/docs/fr/guides/content-collections.mdx @@ -158,7 +158,7 @@ export const collections = { blog }; Vous pouvez ensuite utiliser les fonctions dédiées `getCollection()` et `getEntry()` pour [interroger les données de vos collections de contenu](#interroger-les-collections-consommées-lors-de-la-compilation) et afficher votre contenu. -Vous pouvez choisir de [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection au moment de la compilation pour un site entièrement statique et pré-rendu. Vous pouvez également générer vos collections lors de la compilation, à la demande, en choisissant de retarder la compilation de votre page jusqu'à sa première requête. Cette option est utile lorsque vous avez un grand nombre de pages (par exemple, des milliers ou des dizaines de milliers) et que vous souhaitez différer la génération d'une page statique jusqu'à ce qu'elle soit nécessaire. +Vous pouvez choisir de [générer des routes de page](#générer-des-routes-à-partir-du-contenu) à partir des entrées de votre collection au moment de la compilation pour un site entièrement statique et pré-rendu. Vous pouvez également générer vos collections déclarées pour la compilation, mais à la demande, en choisissant de retarder la compilation de votre page jusqu'à sa première requête. Cette option est utile lorsque vous avez un grand nombre de pages (par exemple, des milliers ou des dizaines de milliers) et que vous souhaitez différer la génération d'une page statique jusqu'à ce qu'elle soit nécessaire. ## Chargeurs de collections appelés lors de la compilation @@ -187,7 +187,7 @@ export const collections = { blog }; Lors de l'utilisation du [chargeur `glob()`](#le-chargeur-glob) avec des fichiers Markdown, MDX, Markdoc, JSON ou TOML, l'[`id`](/fr/reference/modules/astro-content/#collectionentryid) de chaque entrée de contenu est automatiquement généré dans un format compatible avec les URL à partir du nom du fichier. Cet identifiant unique (`id`) est utilisé pour interroger directement l'entrée dans votre collection. Il est également utile lors de la [création de nouvelles pages et d'URL à partir de votre contenu](#générer-des-routes-à-partir-du-contenu). -Vous pouvez remplacer l'identifiant généré d'une entrée en ajoutant votre propre propriété `slug` dans le frontmatter du fichier ou dans l'objet de données pour les fichiers JSON. Cela est similaire à la fonctionnalité « lien permanent » d'autres frameworks web. +Vous pouvez remplacer l'identifiant généré d'une entrée en ajoutant votre propre propriété `slug` dans le frontmatter du fichier ou dans l'objet contenant vos données pour les fichiers JSON. Cela est similaire à la fonctionnalité « lien permanent » d'autres frameworks web. ```md title="src/blog/1.md" {3} --- diff --git a/src/content/docs/fr/reference/content-loader-reference.mdx b/src/content/docs/fr/reference/content-loader-reference.mdx index 7eb70b99da4d4..491a0d77e00af 100644 --- a/src/content/docs/fr/reference/content-loader-reference.mdx +++ b/src/content/docs/fr/reference/content-loader-reference.mdx @@ -185,7 +185,7 @@ Une fonction de rappel pour créer une collection à partir du contenu d'un fich ### Création d'un chargeur -L'API des chargeurs de contenu est flexible et complète, offrant diverses options de récupération de données. Il est possible de créer des chargeurs simples ou complexes. Votre chargeur personnalisé dépendra à la fois de la source et de la structure de vos données, ainsi que de la manière dont vous choisissez de gérer la couche de stockage persistant des données. +L'API des chargeurs de contenu est flexible et complète, offrant diverses options de récupération de données. Il est possible de créer des chargeurs simples ou complexes. Votre chargeur personnalisé dépendra à la fois de la source et de la structure de vos données, ainsi que de la manière dont vous choisissez de gérer la couche de persistance des données. La plupart des chargeurs exporteront une fonction qui accepte des options de configuration et renvoie un [objet décrivant un chargeur](#lobjet-loader) comprenant un nom (`name`) pour votre chargeur, une méthode `load()` et un `schema` définissant vos entrées.