From 789056896ecf35e61f0815f61d1d1f8a15b95865 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 24 Jul 2024 23:33:18 +0200 Subject: [PATCH] i18n(fr): translate api-reference.mdx from l1026 to end --- .../docs/fr/reference/api-reference.mdx | 406 +++++++++--------- 1 file changed, 203 insertions(+), 203 deletions(-) diff --git a/src/content/docs/fr/reference/api-reference.mdx b/src/content/docs/fr/reference/api-reference.mdx index 521c0d5c4ec62..d27e1e542977d 100644 --- a/src/content/docs/fr/reference/api-reference.mdx +++ b/src/content/docs/fr/reference/api-reference.mdx @@ -93,7 +93,7 @@ export interface AstroInstance { } ``` -#### Autre fichiers +#### Autres fichiers D'autres fichiers peuvent avoir des interfaces différentes, mais `Astro.glob()` accepte un générique TypeScript si vous savez exactement ce que contient un type de fichier non reconnu. @@ -534,7 +534,7 @@ import Shout from "../components/Shout.astro"; `Astro.self` permet aux composants Astro d'être appelés de manière récursive. Ce comportement vous permet d'afficher un composant Astro à partir de lui-même en utilisant `` dans le modèle du composant. Cela peut être utile pour itérer sur de grands magasins de données et des structures de données imbriquées. - ```astro +```astro --- // NestedList.astro const { items } = Astro.props; @@ -1001,7 +1001,7 @@ Récupère l'URL de la page précédente (sera `undefined` si à la page 1). Si ##### `page.url.next`

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

Récupère l'URL de la page suivante (sera `undefined` s'il n'y a plus de pages). Si une valeur est définie pour [`base`](/fr/reference/configuration-reference/#base), le chemin de la base est ajouté à l'URL. @@ -1024,9 +1024,9 @@ Récupère l'URL de la dernière page (sera `undefined` s'il n'y a plus de pages ## `import.meta` -All ESM modules include a `import.meta` property. Astro adds `import.meta.env` through [Vite](https://vitejs.dev/guide/env-and-mode.html). +Tous les modules ESM incluent une propriété `import.meta`. Astro ajoute `import.meta.env` via [Vite](https://vitejs.dev/guide/env-and-mode.html). -**`import.meta.env.SSR`** can be used to know when rendering on the server. Sometimes you might want different logic, like a component that should only be rendered in the client: +**`import.meta.env.SSR`** peut être utilisée pour identifier si le rendu se fait côté serveur. Parfois, vous souhaiterez peut-être une logique différente, comme un composant qui ne doit être restitué que dans le client : ```jsx export default function () { @@ -1039,12 +1039,12 @@ export default function () { ### `getImage()` :::caution -`getImage()` relies on server-only APIs and breaks the build when used on the client. +`getImage()` s'appuie sur des API serveur uniquement et interrompt la construction lorsqu'il est utilisé sur le client. ::: -The `getImage()` function is intended for generating images destined to be used somewhere else than directly in HTML, for example in an [API Route](/en/guides/endpoints/#server-endpoints-api-routes). It also allows you to create your own custom `` component. +La fonction `getImage()` est prévue pour générer des images destinées à être utilisées ailleurs que directement en HTML, par exemple dans une [route d'API](/fr/guides/endpoints/#points-de-terminaison-du-serveur-routes-api). Elle vous permet également de créer votre propre composant `` personnalisé. -`getImage()` takes an options object with the [same properties as the Image component](#properties) (except `alt`). +`getImage()` prend un objet d'options avec les [mêmes propriétés que le composant Image](#properties) (à l'exception de `alt`). ```astro --- @@ -1057,25 +1057,25 @@ const optimizedBackground = await getImage({src: myBackground, format: 'avif'})
``` -It returns an object with the following properties: +Il renvoie un objet avec les propriétés suivantes : ```js { - options: {...} // Original parameters passed - src: "https//..." // Path to the generated image - attributes: {...} // Additional HTML attributes needed to render the image (width, height, style, etc..) + options: {...} // Paramètres d'origine transmis + src: "https//..." // Chemin d'accès à l'image générée + attributes: {...} // Attributs HTML supplémentaires nécessaires au rendu de l'image (largeur, hauteur, style, etc.) } ``` -## Content Collections (`astro:content`) +## Collections de contenu (`astro:content`)

-Content collections offer APIs to configure and query your Markdown or MDX documents in `src/content/`. For features and usage examples, [see our content collections guide](/en/guides/content-collections/). +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/). ### `defineCollection()` -`defineCollection()` is a utility to configure a collection in a `src/content/config.*` file. +`defineCollection()` est un utilitaire pour configurer une collection dans un fichier `src/content/config.*`. ```ts // src/content/config.ts @@ -1088,44 +1088,44 @@ const blog = defineCollection({ }), }); -// Expose your defined collection to Astro -// with the `collections` export +// Exposez votre collection définie à Astro +// avec l'exportation `collections` export const collections = { blog }; ``` -This function accepts the following properties: +Cette fonction accepte les propriétés suivantes : #### `type`

-**Type:** `'content' | 'data'` -**Default:** `'content'` +**Type :** `'content' | 'data'` +**Par défaut :** `'content'` -`type` is a string that defines the type of entries stored within a collection: +`type` est une chaîne de caractères qui définit le type d'entrées stockées dans une collection : -- `'content'` - for content-authoring formats like Markdown (`.md`), MDX (`.mdx`), or Markdoc (`.mdoc`) -- `'data'` - for data-only formats like JSON (`.json`) or YAML (`.yaml`) +- `'content'` - pour les formats de création de contenu comme Markdown (`.md`), MDX (`.mdx`) ou Markdoc (`.mdoc`) +- `'data'` - pour les formats de données uniquement comme JSON (`.json`) ou YAML (`.yaml`) :::tip -This means collections **cannot** store a mix of content and data formats. You must split these entries into separate collections by type. +Cela signifie que les collections **ne peuvent pas** stocker un mélange de contenus et de formats de données. Vous devez diviser ces entrées en collections distinctes par type. ::: #### `schema` -**Type:** `TSchema extends ZodType` +**Type :** `TSchema extends ZodType` -`schema` is an optional Zod object to configure the type and shape of document frontmatter for a collection. Each value must use [a Zod validator](https://github.com/colinhacks/zod). +`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](https://github.com/colinhacks/zod). -[See the `Content Collection` guide](/en/guides/content-collections/#defining-a-collection-schema) for example usage. +[Consultez le guide Collections de contenu](/fr/guides/content-collections/#définition-dun-schéma-de-collection) pour un exemple d'utilisation. ### `reference()` -**Type:** `(collection: string) => ZodEffects` +**Type :** `(collection: string) => ZodEffects` -The `reference()` function is used in the content config to define a relationship, or "reference," from one collection to another. This accepts a collection name and validates the entry identifier(s) specified in your content frontmatter or data file. +La fonction `reference()` est utilisée dans la configuration du contenu pour définir une relation, ou une « référence », entre une collection et une autre. Elle accepte un nom de collection et valide le ou les identifiants d'entrée spécifiés dans le frontmatter de votre contenu ou dans votre fichier de données. -This example defines references from a blog author to the `authors` collection and an array of related posts to the same `blog` collection: +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, z } from 'astro:content'; @@ -1133,9 +1133,9 @@ import { defineCollection, reference, z } from 'astro:content'; const blog = defineCollection({ type: 'content', schema: z.object({ - // Reference a single author from the `authors` collection by `id` + // Référencer un seul auteur de la collection `authors` par `id` author: reference('authors'), - // Reference an array of related posts from the `blog` collection by `slug` + // Référencer un tableau d'articles connexes de la collection `blog` par `slug` relatedPosts: z.array(reference('blog')), }) }); @@ -1148,71 +1148,71 @@ const authors = defineCollection({ export const collections = { blog, authors }; ``` -[See the `Content Collection` guide](/en/guides/content-collections/#defining-collection-references) for example usage. +[Consultez le guide Collections de contenu](/fr/guides/content-collections/#définition-des-références-de-collection) pour un exemple d'utilisation. ### `getCollection()` -**Type:** `(collection: string, filter?: (entry: CollectionEntry) => boolean) => CollectionEntry[]` +**Type :** `(collection: string, filter?: (entry: CollectionEntry) => boolean) => CollectionEntry[]` -`getCollection()` is a function that retrieves a list of content collection entries by collection name. +`getCollection()` est une fonction qui récupère une liste d'entrées de collection de contenu par nom de collection. -It returns all items in the collection by default, and accepts an optional `filter` function to narrow by entry properties. This allows you to query for only some items in a collection based on `id`, `slug`, or frontmatter values via the `data` object. +Il 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`, `slug` ou des valeurs du frontmatter via l'objet `data`. ```astro --- import { getCollection } from 'astro:content'; -// Get all `src/content/blog/` entries +// Obtenez toutes les entrées dans `src/content/blog/` const allBlogPosts = await getCollection('blog'); -// Only return posts with `draft: true` in the frontmatter +// Ne renvoyez que les messages avec `draft: true` dans le frontmatter const draftBlogPosts = await getCollection('blog', ({ data }) => { return data.draft === true; }); --- ``` -[See the `Content Collection` guide](/en/guides/content-collections/#querying-collections) for example usage. +[Consultez le guide Collections de contenu](/fr/guides/content-collections/#interroger-les-collections) pour un exemple d'utilisation. ### `getEntry()`

-**Types:** +**Types :** - `(collection: string, contentSlugOrDataId: string) => CollectionEntry` - `({ collection: string, id: string }) => CollectionEntry` - `({ collection: string, slug: string }) => CollectionEntry` -`getEntry()` is a function that retrieves a single collection entry by collection name and either the entry `id` (for `type: 'data'` collections) or entry `slug` (for `type: 'content'` collections). `getEntry()` can also be used to get referenced entries to access the `data`, `body`, or `render()` properties: +`getEntry()` est une fonction qui récupère une seule entrée de collection en utilisant le nom de la collection et soit l'entrée `id` (pour les collections utilisant `type: 'data'`) soit l'entrée `slug` (pour les collections utilisant `type: 'content'`). `getEntry()` peut également être utilisée pour obtenir des entrées référencées pour accéder aux propriétés `data`, `body` ou `render()` : ```astro --- import { getEntry } from 'astro:content'; -// Get `src/content/blog/enterprise.md` +// Récupère `src/content/blog/enterprise.md` const enterprisePost = await getEntry('blog', 'enterprise'); -// Get `src/content/captains/picard.yaml` +// Récupère `src/content/captains/picard.yaml` const picardProfile = await getEntry('captains', 'picard'); -// Get the profile referenced by `data.captain` +// Récupère le profil référencé par `data.captain` const enterpriseCaptainProfile = await getEntry(enterprisePost.data.captain); --- ``` -See the `Content Collections` guide for examples of [querying collection entries](/en/guides/content-collections/#querying-collections). +Consultez le guide Collections de contenu pour des exemples d'[interrogation des entrées de collection](/fr/guides/content-collections/#interroger-les-collections). ### `getEntries()`

-**Types:** +**Types :** - `(Array<{ collection: string, id: string }>) => Array>` - `(Array<{ collection: string, slug: string }>) => Array>` -`getEntries()` is a function that retrieves multiple collection entries from the same collection. This is useful for [returning an array of referenced entries](/en/guides/content-collections/#defining-collection-references) to access their associated `data`, `body`, and `render()` properties. +`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) pour accéder à leurs propriétés `data`, `body` et `render()` associées. ```astro --- @@ -1220,20 +1220,20 @@ import { getEntries } from 'astro:content'; const enterprisePost = await getEntry('blog', 'enterprise'); -// Get related posts referenced by `data.relatedPosts` +// Obtenir les articles associés référencés par `data.relatedPosts` const enterpriseRelatedPosts = await getEntries(enterprisePost.data.relatedPosts); --- ``` ### `getEntryBySlug()` -**Type:** `(collection: string, slug: string) => CollectionEntry` +**Type :** `(collection: string, slug: string) => CollectionEntry` -:::caution[Deprecated] -Use the [`getEntry()` function](#getentry) to query content entries. This accepts the same arguments as `getEntryBySlug()`, and supports querying by `id` for JSON or YAML collections. +:::caution[Obsolète] +Utilisez la fonction [`getEntry()`](#getentry) pour interroger les entrées de contenu. Elle accepte les mêmes arguments que `getEntryBySlug()` et prend en charge les requêtes par `id` pour les collections JSON ou YAML. ::: -`getEntryBySlug()` is a function that retrieves a single collection entry by collection name and entry `slug`. +`getEntryBySlug()` est une fonction qui récupère une seule entrée de collection en utilisant le nom de la collection et le `slug` d'une entrée. ```astro @@ -1244,65 +1244,65 @@ const enterprise = await getEntryBySlug('blog', 'enterprise'); --- ``` -[See the `Content Collection` guide](/en/guides/content-collections/#querying-collections) for example usage. +[Consultez le guide Collections de contenu](/fr/guides/content-collections/#interroger-les-collections) pour un exemple d'utilisation. -### Collection Entry Type +### Type des entrées de collection -Query functions including [`getCollection()`](#getcollection), [`getEntry()`](#getentry), and [`getEntries()`](#getentries) each return entries with the `CollectionEntry` type. This type is available as a utility from `astro:content`: +Les fonctions de requête, notamment [`getCollection()`](#getcollection), [`getEntry()`](#getentry) et [`getEntries()`](#getentries) renvoient chacune des entrées avec le type `CollectionEntry`. Ce type est disponible en tant qu'utilitaire depuis `astro:content` : ```ts import type { CollectionEntry } from 'astro:content'; ``` -The `CollectionEntry` type is an object with the following values. `TCollectionName` is the name of the collection you're querying (e.g. `CollectionEntry<'blog'>`). +Le type `CollectionEntry` est un objet avec les valeurs suivantes. `TCollectionName` est le nom de la collection que vous interrogez (par exemple `CollectionEntry<'blog'>`). #### `id` -**Available for:** `type: 'content'` and `type: 'data'` collections -**Example Types:** - - content collections: `'entry-1.md' | 'entry-2.md' | ...` - - data collections: `'author-1' | 'author-2' | ...` +**Disponible pour :** les collections utilisant `type: 'content'` ou `type: 'data'` +**Exemple de types:** + - collections de contenu : `'entry-1.md' | 'entry-2.md' | ...` + - collections de données : `'author-1' | 'author-2' | ...` -A unique ID using the file path relative to `src/content/[collection]`. Enumerates all possible string values based on the collection entry file paths. Note that collections [defined as `type: 'content'`](#type) include the file extension in their ID, while collections defined as `type: 'data'` do not. +Un identifiant unique utilisant le chemin du fichier relatif à `src/content/[collection]`. Énumère toutes les valeurs de chaîne de caractères possibles en fonction des chemins d’accès au fichier d’entrée de collection. Notez que les collections [définies comme `type: 'content'`](#type) incluent l'extension de fichier dans leur ID, contrairement aux collections définies comme `type: 'data'`. #### `collection` -**Available for:** `type: 'content'` and `type: 'data'` collections -**Example Type:** `'blog' | 'authors' | ...` +**Disponible pour :** les collections utilisant `type: 'content'` ou `type: 'data'` +**Exemple de type :** `'blog' | 'authors' | ...` -The name of a top-level folder under `src/content/` in which entries are located. This is the name used to reference the collection in your schema, and in querying functions. +Le nom d'un dossier placé à la racine de `src/content/` et dans lequel 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` -**Available for:** `type: 'content'` and `type: 'data'` collections -**Type:** `CollectionSchema` +**Disponible pour :** les collections utilisant `type: 'content'` ou `type: 'data'` +**Type :** `CollectionSchema` -An object of frontmatter properties inferred from your collection schema ([see `defineCollection()` reference](#definecollection)). Defaults to `any` if no schema is configured. +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é. #### `slug` -**Available for:** `type: 'content'` collections only -**Example Type:** `'entry-1' | 'entry-2' | ...` +**Disponible pour :** les collections utilisant `type: 'content'` seulement +**Exemple de type :** `'entry-1' | 'entry-2' | ...` -A URL-ready slug for Markdown or MDX documents. Defaults to the `id` without the file extension, but can be overridden by setting [the `slug` property](/en/guides/content-collections/#defining-custom-slugs) in a file's frontmatter. +Un slug d'URL préparé pour les documents Markdown ou MDX. La valeur par défaut est `id` sans l'extension de fichier, mais peut être remplacée en définissant [la propriété `slug`](/fr/guides/content-collections/#définition-dun-slug-personnalisé) dans le frontmatter d'un fichier. #### `body` -**Available for:** `type: 'content'` collections only -**Type:** `string` +**Disponible pour :** les collections utilisant `type: 'content'` seulement +**Type :** `string` -A string containing the raw, uncompiled body of the Markdown or MDX document. +Une chaîne de caractères contenant le corps brut et non compilé du document Markdown ou MDX. #### `render()` -**Available for:** `type: 'content'` collections only -**Type:** `() => Promise` +**Disponible pour :** les collections utilisant `type: 'content'` seulement +**Type :** `() => Promise` -A function to compile a given Markdown or MDX document for rendering. This returns the following properties: +Une fonction pour compiler un document Markdown ou MDX donné à afficher. Cela renvoie les propriétés suivantes : -- `` - A component used to render the document's contents in an Astro file. -- `headings` - A generated list of headings, [mirroring Astro's `getHeadings()` utility](/en/guides/markdown-content/#exported-properties) on Markdown and MDX imports. -- `remarkPluginFrontmatter ` - The modified frontmatter object after any [remark or rehype plugins have been applied](/en/guides/markdown-content/#modifying-frontmatter-programmatically). Set to type `any`. +- `` - Un composant utilisé pour restituer le contenu du document dans un fichier Astro. +- `headings` - Une liste générée de titres, [reflétant l'utilitaire `getHeadings()` d'Astro] (/fr/guides/markdown-content/#propriétés-exportées) sur les importations Markdown et MDX. +- `remarkPluginFrontmatter` - L'objet frontmatter modifié après [l'application de plugins Remark or Rehype](/fr/guides/markdown-content/#modifier-le-frontmatter-par-un-programme). Définit sur le type `any`. ```astro --- @@ -1313,15 +1313,15 @@ const { Content, headings, remarkPluginFrontmatter } = await entry.render(); --- ``` -[See the `Content Collection` guide](/en/guides/content-collections/#rendering-content-to-html) for example usage. +[Consultez le guide Collections de contenu](/fr/guides/content-collections/#rendre-le-contenu-en-html) pour un exemple d'utilisation. -### Other Content Collection Types +### Autres types associés aux collections de contenu -The `astro:content` module also exports the following types for use in your Astro project: +Le module `astro:content` exporte également les types suivants pour les utiliser dans votre projet Astro : #### `CollectionKey` -A string union of all collection names defined in your `src/content/config.*` file. This type can be useful when defining a generic function that accepts any collection name. +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 qui accepte n'importe quel nom de collection. ```ts import type { CollectionKey, getCollection } from 'astro:content'; @@ -1333,19 +1333,19 @@ async function getCollection(collection: CollectionKey) { #### `ContentCollectionKey` -A string union of all the names of `type: 'content'` collections defined in your `src/content/config.*` file. +Une union de chaînes de caractères de tous les noms des collections `type: 'content'` définies dans votre fichier `src/content/config.*`. #### `DataCollectionKey` -A string union of all the names of `type: 'data'` collection defined in your `src/content/config.*` file. +Une union de chaînes de caractères de tous les noms de la collection `type: 'data'` définie dans votre fichier `src/content/config.*`. #### `SchemaContext` -The `context` object that `defineCollection` uses for the function shape of `schema`. This type can be useful when building reusable schemas for multiple collections. +L'objet `context` que `defineCollection` utilise pour la forme de fonction du `schema`. Ce type peut être utile lors de la création de schémas réutilisables pour plusieurs collections. -This includes the following property: +Cela inclut la propriété suivante : -- `image` - The `image()` schema helper that allows you [to use local images in Content Collections](/en/guides/images/#images-in-content-collections) +- `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-contenus) ```ts import type { SchemaContext } from 'astro:content'; @@ -1370,31 +1370,31 @@ const blog = defineCollection({

-Middleware allows you to intercept requests and responses and inject behaviors dynamically every time a page or endpoint is about to be rendered. For features and usage examples, [see our middleware guide](/en/guides/middleware/). +Le middleware vous permet d'intercepter les requêtes et les réponses et d'injecter des comportements de manière dynamique chaque fois qu'une page ou un point de terminaison est sur le point d'être rendu. Pour les fonctionnalités et les exemples d'utilisation, [consultez notre guide Middleware](/fr/guides/middleware/). ### `onRequest()` -A required exported function from `src/middleware.js` that will be called before rendering every page or API route. It accepts two optional arguments: [context](#contextlocals) and [next()](#next). `onRequest()` must return a `Response`: either directly, or by calling `next()`. +Une fonction exportée requise depuis `src/middleware.js` qui sera appelée avant le rendu de chaque page ou route API. Elle accepte deux arguments facultatifs : [context](#contextlocals) et [next()](#next). `onRequest()` doit renvoyer une une réponse (`Response`) : soit directement, soit en appelant `next()`. ```js title="src/middleware.js" export function onRequest (context, next) { - // intercept response data from a request - // optionally, transform the response - // return a Response directly, or the result of calling `next()` + // intercepte les données de réponse d'une requête + // éventuellement, transforme la réponse + // renvoie directement une réponse, ou le résultat de l'appel de `next()` return next(); }; ``` ### `next()` -A function that intercepts (reads and modifies) the `Response` of a `Request` or calls the "next" middleware in the chain and returns a `Response`. For example, this function could modify the HTML body of a response. +Une fonction qui intercepte (lit et modifie) la réponse (`Response`) d'une requête (`Request`) ou appelle le prochain middleware dans la chaîne et renvoie une Réponse (`Response`). Par exemple, cette fonction pourrait modifier le corps HTML d'une réponse. -This is an optional argument of `onRequest()`, and may provide the required `Response` returned by the middleware. +Il s'agit d'un argument facultatif de `onRequest()`, et peut fournir la réponse (`Response`) requise renvoyée par le middleware. ### `sequence()` -A function that accepts middleware functions as arguments, and will execute them in the order in which they are passed. +Une fonction qui accepte les fonctions middleware comme arguments et les exécutera dans l'ordre dans lequel elles sont transmises. ```js title="src/middleware.js" import { sequence } from "astro:middleware"; @@ -1408,58 +1408,58 @@ export const onRequest = sequence(validation, auth, greeting); ### `createContext()` -A low-level API to create an [`APIContext`](#endpoint-context)to be passed to an Astro middleware `onRequest()` function. +Une API de bas niveau pour créer un objet [`APIContext`](#endpoint-context) à transmettre à une fonction `onRequest()` du middleware Astro. -This function can be used by integrations/adapters to programmatically execute the Astro middleware. +Cette fonction peut être utilisée par les intégrations/adaptateurs pour exécuter par programmation le middleware Astro. ### `trySerializeLocals()` -A low-level API that takes in any value and tries to return a serialized version (a string) of it. If the value cannot be serialized, the function will throw a runtime error. +Une API de bas niveau qui prend n'importe quelle valeur et tente d'en renvoyer une version sérialisée (une chaîne de caractères). Si la valeur ne peut pas être sérialisée, la fonction générera une erreur d'exécution. -## Internationalization (`astro:i18n`) +## Internationalisation (`astro:i18n`)

-This module provides functions to help you create URLs using your project's configured locales. +Ce module fournit des fonctions pour vous aider à créer des URL à l'aide des paramètres régionaux configurés de votre projet. -Creating routes for your project with the i18n router will depend on certain configuration values you have set that affect your page routes. When creating routes with these functions, be sure to take into account your individual settings for: +La création de routes pour votre projet avec le routeur i18n dépendra de certaines valeurs de configuration que vous avez définies et qui affectent les routes de vos pages. Lorsque vous créez des routes avec ces fonctions, veillez à prendre en compte vos paramètres individuels pour : -- [`base`](/en/reference/configuration-reference/#base) -- [`trailingSlash`](/en/reference/configuration-reference/#trailingslash) -- [`build.format`](/en/reference/configuration-reference/#buildformat) -- [`site`](/en/reference/configuration-reference/#site) +- [`base`](/fr/reference/configuration-reference/#base) +- [`trailingSlash`](/fr/reference/configuration-reference/#trailingslash) +- [`build.format`](/fr/reference/configuration-reference/#buildformat) +- [`site`](/fr/reference/configuration-reference/#site) -Also, note that the returned URLs created by these functions for your `defaultLocale` will reflect your `i18n.routing` configuration. +Notez également que les URL renvoyées créées par ces fonctions pour votre `defaultLocale` refléteront votre configuration `i18n.routing`. -For features and usage examples, [see our i18n routing guide](/en/guides/internationalization/). +Pour les fonctionnalités et les exemples d'utilisation, [consultez notre guide de routage i18n](/fr/guides/internationalization/). ### `getRelativeLocaleUrl()` `getRelativeLocaleUrl(locale: string, path?: string, options?: GetLocaleOptions): string` -Use this function to retrieve a relative path for a locale. If the locale doesn't exist, Astro throws an error. +Utilisez cette fonction pour récupérer un chemin relatif pour des paramètres régionaux. Si les paramètres régionaux n'existent pas, Astro renvoie une erreur. ```astro --- getRelativeLocaleUrl("fr"); -// returns /fr +// renvoie /fr getRelativeLocaleUrl("fr", ""); -// returns /fr +// renvoie /fr getRelativeLocaleUrl("fr", "getting-started"); -// returns /fr/getting-started +// renvoie /fr/getting-started getRelativeLocaleUrl("fr_CA", "getting-started", { prependWith: "blog" }); -// returns /blog/fr-ca/getting-started +// renvoie /blog/fr-ca/getting-started getRelativeLocaleUrl("fr_CA", "getting-started", { prependWith: "blog", normalizeLocale: false }); -// returns /blog/fr_CA/getting-started +// renvoie /blog/fr_CA/getting-started --- ``` @@ -1467,32 +1467,32 @@ getRelativeLocaleUrl("fr_CA", "getting-started", { `getAbsoluteLocaleUrl(locale: string, path: string, options?: GetLocaleOptions): string` -Use this function to retrieve an absolute path for a locale when [`site`] has a value. If [`site`] isn't configured, the function returns a relative URL. If the locale doesn't exist, Astro throws an error. +Utilisez cette fonction pour récupérer un chemin absolu pour des paramètres régionaux lorsque [`site`] a une valeur. Si [`site`] n'est pas configuré, la fonction renvoie une URL relative. Si les paramètres régionaux n'existent pas, Astro renvoie une erreur. ```astro title="src/pages/index.astro" --- -// If `site` is set to be `https://example.com` +// Si `site` est défini sur `https://example.com` getAbsoluteLocaleUrl("fr"); -// returns https://example.com/fr +// renvoie https://example.com/fr getAbsoluteLocaleUrl("fr", ""); -// returns https://example.com/fr +// renvoie https://example.com/fr getAbsoluteLocaleUrl("fr", "getting-started"); -// returns https://example.com/fr/getting-started +// renvoie https://example.com/fr/getting-started getAbsoluteLocaleUrl("fr_CA", "getting-started", { prependWith: "blog" }); -// returns https://example.com/blog/fr-ca/getting-started +// renvoie https://example.com/blog/fr-ca/getting-started getAbsoluteLocaleUrl("fr_CA", "getting-started", { prependWith: "blog", normalizeLocale: false }); -// returns https://example.com/blog/fr_CA/getting-started +// renvoie https://example.com/blog/fr_CA/getting-started --- ``` @@ -1501,20 +1501,20 @@ getAbsoluteLocaleUrl("fr_CA", "getting-started", { `getRelativeLocaleUrlList(path?: string, options?: GetLocaleOptions): string[]` -Use this like [`getRelativeLocaleUrl`](#getrelativelocaleurl) to return a list of relative paths for all the locales. +Utilisez cette fonction de la même manière que [`getRelativeLocaleUrl`](#getrelativelocaleurl) pour renvoyer une liste de chemins relatifs pour tous les paramètres régionaux. ### `getAbsoluteLocaleUrlList()` `getAbsoluteLocaleUrlList(path?: string, options?: GetLocaleOptions): string[]` -Use this like [`getAbsoluteLocaleUrl`](/en/guides/internationalization/#custom-locale-paths) to return a list of absolute paths for all the locales. +Utilisez cette fonction de la même manière que [`getAbsoluteLocaleUrl`](/fr/guides/internationalization/#chemins-daccès-aux-paramètres-régionaux-personnalisés) pour renvoyer une liste de chemins absolus pour tous les paramètres régionaux. ### `getPathByLocale()` `getPathByLocale(locale: string): string` -A function that returns the `path` associated to one or more `codes` when [custom locale paths](/en/guides/internationalization/#custom-locale-paths) are configured. +Une fonction qui renvoie le chemin (`path`) associé à un ou plusieurs `codes` lorsque les [chemins de paramètres régionaux personnalisés](/fr/guides/internationalization/#chemins-daccès-aux-paramètres-régionaux-personnalisés) sont configurés. ```js title="astro.config.mjs" export default defineConfig({ @@ -1529,8 +1529,8 @@ export default defineConfig({ ```astro title="src/pages/index.astro" --- -getPathByLocale("fr"); // returns "french" -getPathByLocale("fr-CA"); // returns "french" +getPathByLocale("fr"); // renvoie "french" +getPathByLocale("fr-CA"); // renvoie "french" --- ``` @@ -1538,7 +1538,7 @@ getPathByLocale("fr-CA"); // returns "french" `getLocaleByPath(path: string): string` -A function that returns the `code` associated to a locale `path`. +Une fonction qui renvoie le `code` associé à un chemin (`path`) de paramètres régionaux. ```js title="astro.config.mjs" export default defineConfig({ @@ -1553,7 +1553,7 @@ export default defineConfig({ ```astro title="src/pages/index.astro" --- -getLocaleByPath("french"); // returns "fr" because that's the first code configured +getLocaleByPath("french"); // renvoie "fr" car c'est le premier code configuré --- ``` @@ -1564,10 +1564,10 @@ getLocaleByPath("french"); // returns "fr" because that's the first code configu

:::note -Available only when `i18n.routing` is set to `"manual"` +Disponible uniquement lorsque `i18n.routing` est défini sur `"manual"` ::: -A function that returns a `Response` that redirects to the `defaultLocale` configured. It accepts an optional valid redirect status code. +Une fonction qui renvoie une `Response` qui redirige vers les paramètres régionaix utilisés par défaut (`defaultLocale`). Il accepte un code d’état de redirection valide facultatif. ```js title="middleware.js" import { defineMiddleware } from "astro:middleware"; @@ -1589,10 +1589,10 @@ export const onRequest = defineMiddleware((context, next) => {

:::note -Available only when `i18n.routing` is set to `"manual"` +Disponible uniquement lorsque `i18n.routing` est défini sur `"manual"` ::: -A function that allows you to use your [`i18n.fallback` configuration](/en/reference/configuration-reference/#i18nfallback) in your own middleware. +Une fonction qui vous permet d'utiliser votre [configuration `i18n.fallback`](/fr/reference/configuration-reference/#i18nfallback) dans votre propre middleware. ```js title="middleware.js" import { defineMiddleware } from "astro:middleware"; @@ -1614,14 +1614,14 @@ export const onRequest = defineMiddleware(async (context, next) => {

:::note -Available only when `i18n.routing` is set to `"manual"` +Disponible uniquement lorsque `i18n.routing` est défini sur `"manual"` ::: -Use this function in your routing middleware to return a 404 when: -- the current path isn't a root. e.g. `/` or `/` -- the URL doesn't contain a locale +Utilisez cette fonction dans votre middleware de routage pour renvoyer une 404 lorsque : +- le chemin actuel n'est pas une racine, par exemple `/` ou `/` +- l'URL ne contient pas de paramètres régionaux -When a `Response` is passed, the new `Response` emitted by this function will contain the same headers of the original response. +Lorsqu'une `Response` est transmise, la nouvelle `Response` émise par cette fonction contiendra les mêmes en-têtes que la réponse d'origine. ```js title="middleware.js" import { defineMiddleware } from "astro:middleware"; @@ -1643,12 +1643,12 @@ export const onRequest = defineMiddleware((context, next) => {

:::note -Available only when `i18n.routing` is set to `"manual"` +Disponible uniquement lorsque `i18n.routing` est défini sur `"manual"` ::: -A function that allows you to programmatically create the Astro i18n middleware. +Une fonction qui vous permet de créer par programmation le middleware i18n d'Astro. -This is use useful when you still want to use the default i18n logic, but add only a few exceptions to your website. +Ceci est utile lorsque vous souhaitez utiliser la logique i18n par défaut tout en ajoutant quelques exceptions pour votre site. ```js title="middleware.js" import { middleware } from "astro:i18n"; @@ -1657,8 +1657,8 @@ import { sequence, defineMiddleware } from "astro:middleware"; const customLogic = defineMiddleware(async (context, next) => { const response = await next(); - // Custom logic after resolving the response. - // It's possible to catch the response coming from Astro i18n middleware. + // Logique personnalisée après résolution de la réponse. + // Il est possible de capter la réponse provenant du middleware i18n d'Astro. return response; }); @@ -1676,10 +1676,10 @@ export const onRequest = sequence(customLogic, middleware({

:::note -Available only when `i18n.routing` is set to `"manual"` +Disponible uniquement lorsque `i18n.routing` est défini sur `"manual"` ::: -Checks whether the current URL contains a configured locale. Internally, this function will use `APIContext#url.pathname`. +Vérifie si l'URL actuelle contient des paramètres régionaux configurés. En interne, cette fonction utilisera `APIContext#url.pathname`. ```js title="middleware.js" import { defineMiddleware } from "astro:middleware"; @@ -1693,9 +1693,9 @@ export const onRequest = defineMiddleware(async (context, next) => { }) ``` -## Built-in Components +## Composants intégrés -Astro includes several built-in components for you to use in your projects. All built-in components are available in `.astro` files via `import {} from 'astro:components';`. +Astro comprend plusieurs composants intégrés que vous pouvez utiliser dans vos projets. Tous les composants intégrés sont disponibles dans les fichiers `.astro` via `import {} from 'astro:components';`. ### `` @@ -1703,34 +1703,34 @@ Astro includes several built-in components for you to use in your projects. All --- import { Code } from 'astro:components'; --- - + - + - + - +

- will be rendered inline. + sera généré en ligne.

- + ``` -This component provides syntax highlighting for code blocks at build time (no client-side JavaScript included). The component is powered internally by Shiki and it supports all popular [themes](https://shiki.style/themes) and [languages](https://shiki.style/languages). Plus, you can add your custom themes, languages, [transformers](#transformers), and [default colors](https://shiki.style/guide/dual-themes#without-default-color) by passing them to the `theme`, `lang`, `transformers`, and `defaultColor` attributes respectively. +Ce composant fournit une coloration syntaxique pour les blocs de code au moment de la construction (aucun JavaScript côté client n'est inclus). Le composant est alimenté en interne par Shiki et prend en charge tous les [thèmes](https://shiki.style/themes) et [langues](https://shiki.style/languages) populaires. De plus, vous pouvez ajouter vos thèmes, langues, [transformateurs](#transformers) et [couleurs par défaut](https://shiki.style/guide/dual-themes#without-default-color) personnalisés en les transmettant respectivement aux attributs `theme`, `lang`, `transformers` et `defaultColor`. :::note -This component **does not** inherit the settings from your [Shiki configuration](/en/guides/markdown-content/#shiki-configuration). You will have to set them using the component props. +Ce composant **n'hérite** pas des paramètres de votre [configuration Shiki](/fr/guides/markdown-content/#configuration-de-shiki). Vous devrez les définir à l'aide des propriétés du composant. ::: -#### Transformers +#### Transformateurs

-[Shiki transformers](https://shiki.style/packages/transformers#shikijs-transformers) can optionally be applied to code by passing them in through the `transformers` property as an array: +[Les Transformateurs de Shiki](https://shiki.style/packages/transformers#shikijs-transformers) peuvent éventuellement être appliqués au code en les transmettant via la propriété `transformers` sous forme de tableau : -Note that `transformers` only applies classes and you must provide your own CSS rules to target the elements of your code block. +Notez que `transformers` n'applique que les classes et vous devez fournir vos propres règles CSS pour cibler les éléments de votre bloc de code. ```astro --- @@ -1755,20 +1755,20 @@ console.log(foo + bar) // [!code focus] ### `` -A component used with [`set:*` directives](/en/reference/directives-reference/#sethtml) to render HTML content without any additional wrapping elements: +Un composant utilisé avec les [directives `set:*`](/fr/reference/directives-reference/#sethtml) pour restituer le contenu HTML sans aucun élément d'habillage supplémentaire : ```astro title="src/components/SetHtml.astro" "Fragment" --- -const htmlString = '

Raw HTML content

'; +const htmlString = '

Contenu HTML brut

'; --- ``` -See more about [using fragments](/en/basics/astro-syntax/#fragments) in Astro syntax. +En savoir plus sur [l'utilisation de fragments](/fr/basics/astro-syntax/#fragments) dans la syntaxe Astro. ### `` -To use the `Prism` highlighter component, first **install** the `@astrojs/prism` package: +Pour utiliser le composant de coloration `Prism`, **installez** d'abord le package `@astrojs/prism` : @@ -1795,136 +1795,136 @@ import { Prism } from '@astrojs/prism'; ``` -This component provides language-specific syntax highlighting for code blocks by applying Prism's CSS classes. Note that **you need to provide a Prism CSS stylesheet** (or bring your own) for syntax highlighting to appear! See the [Prism configuration section](/en/guides/markdown-content/#prism-configuration) for more details. +Ce composant fournit une coloration syntaxique spécifique au langage pour les blocs de code en appliquant les classes CSS de Prism. Notez que **vous devez fournir une feuille de style CSS Prism** (ou apporter la vôtre) pour que la coloration syntaxique apparaisse ! Consultez la [section Configuration de Prism](/fr/guides/markdown-content/#configuration-de-prism) pour plus de détails. -See the [list of languages supported by Prism](https://prismjs.com/#supported-languages) where you can find a language’s corresponding alias. And, you can also display your Astro code blocks with `lang="astro"`! +Consultez la [liste des langues supportées par Prism](https://prismjs.com/#supported-languages) où vous pouvez trouver l'alias correspondant à une langue. Et vous pouvez également afficher vos blocs de code Astro avec `lang="astro"` ! ### `` ```astro title="src/components/MyComponent.astro" --- -// import the Image component and the image +// importation du composant Image et de l'image import { Image } from 'astro:assets'; -import myImage from "../assets/my_image.png"; // Image is 1600x900 +import myImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900 --- - -A description of my image. + +Une description de mon image. ``` ```html - - + + A description of my image. ``` -#### Properties +#### Propriétés -- src (required) -- alt (required) -- width and height (required for `public/` and remote images) +- src (requis) +- alt (requis) +- width et height (requis pour les images dans `public/` et celles distantes) - format - quality - densities - widths -In addition to the properties above, the `` component accepts all properties accepted by the HTML `` tag. +En plus des propriétés ci-dessus, le composant `` accepte toutes les propriétés acceptées par la balise HTML ``. -See more in the [Images Guide](/en/guides/images/#image--astroassets). +Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#image--astroassets). ### ``

-Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. +Utilisez le composant Astro intégré `` pour afficher une image réactive avec plusieurs formats et/ou tailles. ```astro title="src/pages/index.astro" --- import { Picture } from 'astro:assets'; -import myImage from "../assets/my_image.png"; // Image is 1600x900 +import monImage from "../assets/mon_image.png"; // La résolution de l'image est de 1600x900 --- - - + + ``` ```html - + - - + + A description of my image. ``` -See more in the [Images Guide](/en/guides/images/#picture-). +Pour en savoir plus, consultez le [Guide des images](/fr/guides/images/#picture-). -#### Properties +#### Propriétés -`` accepts all the properties of the `` component, plus the following: +`` accepte toutes les propriétés du composant `` en plus des suivantes : ##### `formats` -An array of image formats to use for the `` tags. By default, this is set to `['webp']`. +Un tableau de formats d'image à utiliser pour les balises ``. Par défaut, ceci est défini sur `['webp']`. ##### `fallbackFormat` -Format to use as a fallback value for the `` tag. Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files. +Format à utiliser comme valeur de repli pour la balise ``. La valeur par défaut est `.png` pour les images statiques, `.gif` pour les images animées et `.svg` pour les fichiers SVG. ##### `pictureAttributes` -An object of attributes to be added to the `` tag. Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. +Un objet d'attributs à ajouter à la balise ``. Utilisez cette propriété pour appliquer des attributs à l'élément externe `` lui-même. Les attributs appliqués directement au composant `` s'appliqueront à l'élément interne ``, à l'exception de ceux utilisés pour la transformation d'image. ### `` -A generic component used to render the content of a [content collection entry](/en/guides/content-collections/#what-are-content-collections). +Un composant générique utilisé pour restituer le contenu d'une [entrée de collection de contenu](/fr/guides/content-collections/#que-sont-les-collections-de-contenu-). -First, query one or more entries using `getCollection()` or `getEntry()`. Then, the `entry.render()` function can return the `` component for use in a `.astro` file template. +Tout d'abord, interrogez une ou plusieurs entrées en utilisant `getCollection()` ou `getEntry()`. Ensuite, la fonction `entry.render()` peut renvoyer le composant `` à utiliser dans un modèle de fichier `.astro`. ```astro title="src/pages/render-example.astro" {4, 7} --- import { getEntry } from 'astro:content'; -const entry = await getEntry('blog', 'post-1'); +const entry = await getEntry('blog', 'article-1'); const { Content } = await entry.render(); --- -

Published on: {entry.data.published.toDateString()}

+

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

``` ### `` -Opt in to using view transitions on individual pages by importing and adding the `` routing component to `` on every desired page. +Choisissez d'utiliser les transitions de vue sur des pages individuelles en important et en ajoutant le composant de routage `` à la balise `` sur chaque page souhaitée. ```astro title="src/pages/index.astro" ins={2,7} --- import { ViewTransitions } from 'astro:transitions'; --- - + - My Homepage + Ma page d'accueil -

Welcome to my website!

+

Bienvenue sur mon site web !

``` -See more about how to [control the router](/en/guides/view-transitions/#router-control) and [add transition directives](/en/guides/view-transitions/#transition-directives) to page elements and components. +Découvrez comment [contrôler le routeur](/fr/guides/view-transitions/#contrôle-du-routeur) et [ajouter des directives de transition](/fr/guides/view-transitions/#directives-de-transition) aux éléments et composants de la page. ### `` @@ -1942,7 +1942,7 @@ const serverObject = { ``` -This component provides a way to inspect values on the client-side, without any JavaScript. +Ce composant fournit un moyen d'inspecter les valeurs côté client, sans aucun JavaScript. -[canonical]: https://en.wikipedia.org/wiki/Canonical_link_element +[canonical]: https://fr.wikipedia.org/wiki/Élément_de_lien_canonique