diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/README.md index e822b7f4f..4ab2482e1 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/README.md +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/README.md @@ -1,28 +1,28 @@ --- -title: Optional parameters +title: Paramètres optionels --- -In the first chapter on [routing](/tutorial/pages), we learned how to create routes with [dynamic parameters](/tutorial/params). +Dans le premier chapitre sur le [routing](/tutorial/pages), nous avons vu comment créer des route avec des [paramètres dynamiques](/tutorial/params). -Sometimes it's helpful to make a parameter optional. A classic example is when you use the pathname to determine the locale — `/fr/...`, `/de/...` and so on — but you also want to have a default locale. +Il est parfois utile de rendre un paramètre optionnel. Un exemple classique est lorsque vous utilisez un chemin pour déterminer la langue - `/fr/...`, `/de/...` et ainsi de suite — mais vous souhaitez également avoir une langue par défaut. -To do that, we use double brackets. Rename the `[lang]` directory to `[[lang]]`. +Pour faire cela, nous utilisons les crochets doubles. Renommez le dossier `[lang]` en `[[lang]]`. -The app now fails to build, because `src/routes/+page.svelte` and `src/routes/[[lang]]/+page.svelte` would both match `/`. Delete `src/routes/+page.svelte`. (You may need to reload the app to recover from the error page). +L'application ne parvient plus à compiler, car les routes `src/routes/+page.svelte` et `src/routes/[[lang]]/+page.svelte` satisfont toutes les deux `/`. Supprimez la route `src/routes/+page.svelte` (il est possible que vous ayez besoin de recharger l'application pour annuler la page d'erreur). -Lastly, edit `src/routes/[[lang]]/+page.server.js` to specify the default locale: +Enfin, modifiez `src/routes/[[lang]]/+page.server.js` pour préciser la langue par défaut : ```js /// file: src/routes/[[lang]]/+page.server.js const greetings = { en: 'hello!', de: 'hallo!', - fr: 'bonjour!' + fr: 'bonjour !' }; export function load({ params }) { return { - greeting: greetings[params.lang +++?? 'en'+++] + greeting: greetings[params.lang +++?? 'fr'+++] }; } ``` diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+layout.svelte b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+layout.svelte index 1b7838205..7f28645b3 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+layout.svelte +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+layout.svelte @@ -1,8 +1,8 @@ diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+page.svelte b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+page.svelte index 88e87e748..b84efdede 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+page.svelte +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/+page.svelte @@ -1 +1 @@ -

hello!

+

bonjour !

diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/[lang]/+page.server.js b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/[lang]/+page.server.js index 3318ab14e..6b8e3ee9c 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/[lang]/+page.server.js +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/[lang]/+page.server.js @@ -1,7 +1,7 @@ const greetings = { en: 'hello!', de: 'hallo!', - fr: 'bonjour!' + fr: 'bonjour !' }; export function load({ params }) { diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-b/src/routes/[[lang]]/+page.server.js b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-b/src/routes/[[lang]]/+page.server.js index ded09d03b..800e01ea0 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-b/src/routes/[[lang]]/+page.server.js +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-b/src/routes/[[lang]]/+page.server.js @@ -1,11 +1,11 @@ const greetings = { en: 'hello!', de: 'hallo!', - fr: 'bonjour!' + fr: 'bonjour !' }; export function load({ params }) { return { - greeting: greetings[params.lang ?? 'en'] + greeting: greetings[params.lang ?? 'fr'] }; } diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/README.md b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/README.md index 46de1e09f..fd316c9f5 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/README.md +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/README.md @@ -1,14 +1,14 @@ --- -title: Rest parameters +title: Paramètres du reste path: /how focus: /src/routes/[path]/+page.svelte --- -To match an unknown number of path segments, use a `[...rest]` parameter, so named for its resemblance to [rest parameters in JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters). +Pour cibler un nombre indéfini de segments, utilisez un paramètre `[...rest]`, appelé ainsi pour sa ressemblance avec les [paramètres du reste en JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/rest_parameters) (**rest parameters** en anglais). -Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any path. +Renommez `src/routes/[path]` en `src/routes/[...path]`. La route cible maintenant n'importe quel chemin. -> Other, more specific routes will be tested first, making rest parameters useful as 'catch-all' routes. For example, if you needed a custom 404 page for pages inside `/categories/...`, you could add these files: +> D'autres routes, plus spécifiques, seront d'abord testées, rendant les paramètres du reste efficaces en tant que routes "attrape-tout". Par exemple, si vous aviez besoin d'une page 404 personnalisée dans `/categories/...`, vous pourriez ajouter ces fichiers : > > ```diff > src/routes/ @@ -21,6 +21,6 @@ Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any > +│ │ └ +page.server.js > ``` > -> Inside the `+page.server.js` file, `throw error(404)` inside `load`. +> dans le fichier `+page.server.js`, ajoutez `throw error(404)` dans la fonction `load`. -Rest parameters do _not_ need to go at the end — a route like `/items/[...path]/edit` or `/items/[...path].json` is totally valid. \ No newline at end of file +Les paramètres du reste n'ont _pas_ besoin d'être définis en dernier — une route comme `/items/[...path]/edit` ou `/items/[...path].json` est totalement valide. diff --git a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-a/src/routes/[path]/+page.svelte b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-a/src/routes/[path]/+page.svelte index afa47a04e..de0e04612 100644 --- a/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-a/src/routes/[path]/+page.svelte +++ b/content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-a/src/routes/[path]/+page.svelte @@ -1,7 +1,7 @@

{data.a} + {data.b} = {data.c}

-

home

+

accueil

diff --git a/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/README.md b/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/README.md index d3078f9d8..3500ea042 100644 --- a/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/README.md +++ b/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/README.md @@ -3,13 +3,13 @@ title: Invalidation path: /Europe/London --- -When the user navigates from one page to another, SvelteKit calls your `load` functions, but only if it thinks something has changed. +Lorsque l'utilisateur ou l'utilisatrice navigue d'une page à l'autre, SvelteKit appelle vos différentes fonctions `load` uniquement s'il pense que quelque chose a changé. -In this example, navigating between timezones causes the `load` function in `src/routes/[...timezone]/+page.js` to re-run because `params.timezone` is invalid. But the `load` function in `src/routes/+layout.js` does _not_ re-run, because as far as SvelteKit is concerned it wasn't invalidated by the navigation. +Dans cet exemple, la navigation entre fuseaux horaires provoque la ré-exécution de la fonction `load` de `src/routes/[...timezone]/+page.js` parce que `params.timezone` a changé. Mais la fonction `load` dans `src/routes/+layout.js` n'est _pas_ ré-exécutée, car du point de vue de SvelteKit rien dans cette fonction `load` n'est concerné par cette navigation. -We can fix that by manually invalidating it using the [`invalidate(...)`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) function, which takes a URL and re-runs any `load` functions that depend on it. Because the `load` function in `src/routes/+layout.js` calls `fetch('/api/now')`, it depends on `/api/now`. +Nous pouvons régler cela en invalidant cette fonction manuellement grâce à la fonction [`invalidate(...)`](PUBLIC_KIT_SITE_URL/docs/modules#$app-navigation-invalidate), qui prend une URL en paramètre et ré-exécute toutes les fonctions `load` qui en dépendent. Puisque la fonction `load` de `src/routes/+layout.js` appelle `fetch('/api/now')`, elle dépend de `/api/now`. -In `src/routes/[...timezone]/+page.svelte`, add an `onMount` callback that calls `invalidate('/api/now')` once a second: +Dans `src/routes/[...timezone]/+page.svelte`, ajoutez un [callback](PUBLIC_SVELTE_SITE_URL/docs/development#callback) `onMount` qui va exécuter `invalidate('/api/now')` une fois par seconde : ```svelte /// file: src/routes/[...timezone]/+page.svelte @@ -38,4 +38,4 @@ In `src/routes/[...timezone]/+page.svelte`, add an `onMount` callback that calls ``` -> You can also pass a function to `invalidate`, in case you want to invalidate based on a pattern and not specific URLs +> Vous pouvez aussi passer une fonction à `invalidate`, dans le cas où vous souhaiteriez invalider votre page en fonction d'un motif d'URL et non d'URLs spécifiques. diff --git a/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/app-a/src/routes/+layout.svelte b/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/app-a/src/routes/+layout.svelte index 0e6e3f44b..dd174142b 100644 --- a/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/app-a/src/routes/+layout.svelte +++ b/content/tutorial/04-advanced-sveltekit/05-advanced-loading/04-invalidation/app-a/src/routes/+layout.svelte @@ -1,9 +1,9 @@