diff options
author | HiDeoo | 2025-02-16 19:42:58 +0100 |
---|---|---|
committer | GitHub | 2025-02-16 19:42:58 +0100 |
commit | b21de6b429299bb8532a4e98f816a4da758ce973 (patch) | |
tree | 739884597a35989165fee4f1585cdd856ba2b1bb | |
parent | 248ef2b4b58fe4758054202e2b899177115299d1 (diff) | |
download | IT.starlight-b21de6b429299bb8532a4e98f816a4da758ce973.tar.gz IT.starlight-b21de6b429299bb8532a4e98f816a4da758ce973.tar.bz2 IT.starlight-b21de6b429299bb8532a4e98f816a4da758ce973.zip |
i18n(fr): add `guides/route-data` and `reference/route-data` (#2884)
Co-authored-by: Armand Philippot <59021693+ArmandPhilippot@users.noreply.github.com>
Co-authored-by: trueberryless <99918022+trueberryless@users.noreply.github.com>
-rw-r--r-- | docs/src/content/docs/fr/guides/route-data.mdx | 139 | ||||
-rw-r--r-- | docs/src/content/docs/fr/reference/route-data.mdx | 197 |
2 files changed, 336 insertions, 0 deletions
diff --git a/docs/src/content/docs/fr/guides/route-data.mdx b/docs/src/content/docs/fr/guides/route-data.mdx new file mode 100644 index 00000000..4bd1fd92 --- /dev/null +++ b/docs/src/content/docs/fr/guides/route-data.mdx @@ -0,0 +1,139 @@ +--- +title: DonnĂ©es de route +description: Apprenez comment le modĂšle de donnĂ©es de page de Starlight est utilisĂ© pour afficher vos pages et comment vous pouvez le personnaliser. +--- + +import { Steps } from '@astrojs/starlight/components'; + +Lorsque Starlight affiche une page dans votre documentation, un objet de donnĂ©es de route est d'abord créé pour reprĂ©senter ce qui se trouve sur cette page. +Ce guide explique comment les donnĂ©es de route sont gĂ©nĂ©rĂ©es, comment les utiliser et comment vous pouvez les personnaliser pour modifier le comportement par dĂ©faut de Starlight. + +Consultez la [« RĂ©fĂ©rence des donnĂ©es de route »](/fr/reference/route-data/) pour une liste complĂšte des propriĂ©tĂ©s disponibles. + +## Qu'est-ce que les donnĂ©es de route? + +Les donnĂ©es de route de Starlight sont un objet contenant toutes les informations nĂ©cessaires pour afficher une seule page. +Il inclut des informations pour la page courante ainsi que des donnĂ©es gĂ©nĂ©rĂ©es Ă partir de votre configuration de Starlight. + +## Utilisation des donnĂ©es de route + +Tous les composants de Starlight utilisent les donnĂ©es de route pour dĂ©cider de ce qui doit ĂȘtre affichĂ© pour chaque page. +Par exemple, la chaĂźne de caractĂšres [`siteTitle`](/fr/reference/route-data/#sitetitle) est utilisĂ©e pour afficher le titre du site et le tableau [`sidebar`](/fr/reference/route-data/#sidebar) est utilisĂ© pour afficher la barre latĂ©rale de navigation. + +Vous pouvez accĂ©der Ă ces donnĂ©es Ă partir de la variable globale `Astro.locals.starlightRoute` dans les composants Astro : + +```astro title="exemple.astro" {2} +--- +const { siteTitle } = Astro.locals.starlightRoute; +--- + +<p>Le titre de ce site est « {siteTitle} »</p> +``` + +Cela peut ĂȘtre utile, par exemple, lors de la mise en place de redĂ©finitions de composants pour personnaliser ce que vous affichez. + +## Personnalisation des donnĂ©es de route + +Les donnĂ©es de route de Starlight sont prĂȘtes Ă l'emploi et ne nĂ©cessitent aucune configuration. +Cependant, pour des cas d'utilisation avancĂ©s, vous pourriez vouloir personnaliser les donnĂ©es de route pour certaines ou toutes les pages afin de modifier le rendu de votre site. + +Il s'agit d'un concept similaire aux [redĂ©finitions de composants](/fr/guides/overriding-components/), mais au lieu de modifier la façon dont Starlight affiche vos donnĂ©es, vous modifiez les donnĂ©es que Starlight affiche. + +### Quand personnaliser les donnĂ©es de route + +Personnaliser les donnĂ©es de route peut ĂȘtre utile lorsque vous souhaitez modifier la façon dont Starlight traite vos donnĂ©es d'une maniĂšre qui n'est pas possible avec les options de configuration existantes. + +Par exemple, vous pourriez vouloir filtrer les Ă©lĂ©ments de la barre latĂ©rale de navigation ou personnaliser les titres de certaines pages. +Ce type de modification ne nĂ©cessite pas de modifier les composants par dĂ©faut de Starlight, seulement les donnĂ©es transmises Ă ces composants. + +### Comment personnaliser les donnĂ©es de route + +Vous pouvez personnaliser les donnĂ©es de route en utilisant une forme spĂ©ciale de « middleware ». +C'est une fonction qui est appelĂ©e Ă chaque fois que Starlight affiche une page et peut modifier les valeurs contenues dans l'objet de donnĂ©es de route. + +<Steps> + +1. CrĂ©ez un nouveau fichier exportant une fonction `onRequest` en utilisant l'utilitaire `defineRouteMiddleware()` de Starlight : + + ```ts + // src/routeData.ts + import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + + export const onRequest = defineRouteMiddleware(() => {}); + ``` + +2. Indiquez Ă Starlight oĂč se trouve le fichier contenant votre middleware de donnĂ©es de route dans `astro.config.mjs` : + + ```js ins={9} + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import starlight from '@astrojs/starlight'; + + export default defineConfig({ + integrations: [ + starlight({ + title: 'Mon ravissant site de documentation', + routeMiddleware: './src/routeData.ts', + }), + ], + }); + ``` + +3. Mettez Ă jour votre fonction `onRequest` pour modifier les donnĂ©es de route. + + Le premier argument que votre middleware recevra est [l'objet `context` d'Astro](https://docs.astro.build/fr/reference/api-reference/). + Celui-ci contient toutes les informations concernant le rendu de la page courante, y compris l'URL actuelle et les `locals`. + + Dans cet exemple, nous allons rendre notre documentation plus passionnante en ajoutant un point d'exclamation Ă la fin du titre de chaque page. + + ```ts + // src/routeData.ts + import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + + export const onRequest = defineRouteMiddleware((context) => { + // RĂ©cupĂ©rer l'entrĂ©e de la collection de contenus pour cette page. + const { entry } = context.locals.starlightRoute; + // Mettre Ă jour le titre pour ajouter un point d'exclamation. + entry.data.title = entry.data.title + ' !'; + }); + ``` + +</Steps> + +#### Plusieurs middleware de route + +Starlight accepte Ă©galement d'utiliser plusieurs middlewares. +DĂ©finissez `routeMiddleware` comme un tableau de chemins pour ajouter plus d'un middleware : + +```js {9} +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import starlight from '@astrojs/starlight'; + +export default defineConfig({ + integrations: [ + starlight({ + title: 'Mon site avec plusieurs middlewares', + routeMiddleware: ['./src/middleware-un.ts', './src/middleware-deux.ts'], + }), + ], +}); +``` + +#### Attendre des middlewares de route ultĂ©rieurs + +Pour attendre que des middlewares ultĂ©rieurs s'exĂ©cutent avant d'exĂ©cuter votre code, vous pouvez attendre la fin de l'appel Ă `next()` passĂ© en deuxiĂšme argument Ă votre fonction middleware. +Cela peut ĂȘtre utile pour attendre que le middleware d'un module d'extension s'exĂ©cute avant de faire des modifications par exemple. + +```ts "next" "await next();" +// src/routeData.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + +export const onRequest = defineRouteMiddleware(async (context, next) => { + // Attendre que des middlewares ultĂ©rieurs s'exĂ©cutent. + await next(); + // Modifier les donnĂ©es de route. + const { entry } = context.locals.starlightRoute; + entry.data.title = entry.data.title + ' !'; +}); +``` diff --git a/docs/src/content/docs/fr/reference/route-data.mdx b/docs/src/content/docs/fr/reference/route-data.mdx new file mode 100644 index 00000000..dc84ad8f --- /dev/null +++ b/docs/src/content/docs/fr/reference/route-data.mdx @@ -0,0 +1,197 @@ +--- +title: RĂ©fĂ©rence des donnĂ©es de route +description: La documentation de rĂ©fĂ©rence complĂšte pour l'objet de donnĂ©es de route de Starlight. +--- + +L'objet de donnĂ©es de route de Starlight contient des informations sur la page courante. +Apprenez-en plus sur le fonctionnement du modĂšle de donnĂ©es de Starlight dans le [guide « DonnĂ©es de route »](/fr/guides/route-data/). + +Dans les composants Astro, accĂ©dez aux donnĂ©es de route Ă partir de `Astro.locals.starlightRoute` : + +```astro {4} +--- +// src/components/Custom.astro + +const { hasSidebar } = Astro.locals.starlightRoute; +--- +``` + +Dans un [middleware de route](/fr/guides/route-data/#personnalisation-des-donnĂ©es-de-route), accĂ©dez aux donnĂ©es de route Ă partir de l'objet de contexte passĂ© Ă votre fonction middleware : + +```ts {5} +// src/routeData.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + +export const onRequest = defineRouteMiddleware((context) => { + const { hasSidebar } = context.locals.starlightRoute; +}); +``` + +## `starlightRoute` + +L'objet `starlightRoute` contient les propriĂ©tĂ©s suivantes : + +### `dir` + +**Type :** `'ltr' | 'rtl'` + +Le sens dâĂ©criture de la page. + +### `lang` + +**Type :** `string` + +L'Ă©tiquette d'identification BCP-47 pour la langue de la page, par exemple `en`, `zh-CN` ou `pt-BR`. + +### `locale` + +**Type :** `string | undefined` + +Le chemin de base utilisĂ© pour servir une langue. `undefined` pour les slugs de la locale racine. + +### `siteTitle` + +**Type :** `string` + +Le titre du site pour la langue de cette page. + +### `siteTitleHref` + +**Type :** `string` + +La valeur de l'attribut `href` du titre du site, renvoyant Ă la page d'accueil, par exemple `/`. +Pour les sites multilingues, cette valeur inclura la locale actuelle, par exemple `/fr/` ou `/zh-cn/`. + +### `slug` + +**Type :** `string` + +Le slug de la page gĂ©nĂ©rĂ© Ă partir du nom du fichier du contenu. + +Cette propriĂ©tĂ© est dĂ©prĂ©ciĂ©e et sera supprimĂ©e dans une version future de Starlight. +Migrez vers la nouvelle API Content Layer en utilisant le [`docsLoader` de Starlight](/fr/manual-setup/#configurer-les-collections-de-contenu) et utilisez la propriĂ©tĂ© [`id`](#id) Ă la place. + +### `id` + +**Type :** `string` + +Le slug de cette page ou l'identifiant unique de cette page basĂ© sur le nom du fichier du contenu si l'option [`legacy.collections`](https://docs.astro.build/fr/reference/legacy-flags/#collections) est utilisĂ©e. + +### `isFallback` + +**Type :** `true | undefined` + +`true` si cette page n'est pas traduite dans la langue actuelle et utilise le contenu de la langue par dĂ©faut en tant que repli. +UtilisĂ© uniquement dans les sites multilingues. + +### `entryMeta` + +**Type :** `{ dir: 'ltr' | 'rtl'; lang: string }` + +MĂ©tadonnĂ©es de la locale pour le contenu de la page. Peut ĂȘtre diffĂ©rent des valeurs de locale de premier niveau lorsque la page utilise un contenu de repli. + +### `entry` + +L'entrĂ©e de la collection de contenu Astro pour la page courante. +Inclut les valeurs du frontmatter pour la page courante dans `entry.data`. + +```ts +entry: { + data: { + title: string; + description: string | undefined; + // etc. + } +} +``` + +Pour en savoir plus sur le format de cet objet, consultez la [rĂ©fĂ©rence du type d'entrĂ©e de collection](https://docs.astro.build/fr/reference/modules/astro-content/#collectionentry). + +### `sidebar` + +**Type :** `SidebarEntry[]` + +Les entrĂ©es de la barre latĂ©rale de navigation du site pour cette page. + +### `hasSidebar` + +**Type :** `boolean` + +Indique si la barre latĂ©rale est affichĂ©e sur cette page. + +### `pagination` + +**Type :** `{ prev?: Link; next?: Link }` + +Liens vers la page prĂ©cĂ©dente et suivante dans la barre latĂ©rale si celle-ci est activĂ©e. + +### `toc` + +**Type :** `{ minHeadingLevel: number; maxHeadingLevel: number; items: TocItem[] } | undefined` + +Table des matiĂšres de la page courante si celle-ci est activĂ©e. + +### `headings` + +**Type :** `{ depth: number; slug: string; text: string }[]` + +Un tableau de toutes les en-tĂȘtes Markdown extraites de la page courante. +Utilisez [`toc`](#toc) Ă la place si vous souhaitez construire un composant de table des matiĂšres qui respecte les options de configuration de Starlight. + +### `lastUpdated` + +**Type :** `Date | undefined` + +Un objet JavaScript de type `Date` reprĂ©sentant la date de derniĂšre mise Ă jour de cette page si cette fonctionnalitĂ© est activĂ©e. + +### `editUrl` + +**Type :** `URL | undefined` + +Un objet `URL` de l'adresse oĂč cette page peut ĂȘtre modifiĂ©e si cette fonctionnalitĂ© est activĂ©e. + +## Utilitaires + +### `defineRouteMiddleware()` + +Utilisez l'utilitaire `defineRouteMiddleware()` pour vous aider Ă typer votre module de middleware de route : + +```ts "defineRouteMiddleware" +// src/routeData.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; + +export const onRequest = defineRouteMiddleware((context) => { + // ... +}); +``` + +### Type `StarlightRouteData` + +Si vous Ă©crivez du code qui utilise les donnĂ©es de route de Starlight, vous pouvez importer le type `StarlightRouteData` qui correspond au format de `Astro.locals.starlightRoute`. + +Dans l'exemple suivant, une fonction `usePageTitleInTOC()` met Ă jour les donnĂ©es de route pour utiliser le titre de la page courante comme libellĂ© du premier Ă©lĂ©ment de la table des matiĂšres, remplaçant le libellĂ© par dĂ©faut « Sur cette page ». +Le type `StarlightRouteData` vous permet de vĂ©rifier si les modifications des donnĂ©es de route sont valides. + +```ts "StarlightRouteData" +// src/route-utils.ts +import type { StarlightRouteData } from '@astrojs/starlight/route-data'; + +export function usePageTitleInTOC(starlightRoute: StarlightRouteData) { + const overviewLink = starlightRoute.toc?.items[0]; + if (overviewLink) { + overviewLink.text = starlightRoute.entry.data.title; + } +} +``` + +Cette fonction peut ensuite ĂȘtre appelĂ©e Ă partir d'un middleware de route : + +```ts {3,6} +// src/route-middleware.ts +import { defineRouteMiddleware } from '@astrojs/starlight/route-data'; +import { usePageTitleInTOC } from './route-utils'; + +export const onRequest = defineRouteMiddleware((context) => { + usePageTitleInTOC(context.locals.starlightRoute); +}); +``` |