Skip to content

Commit 5e637c3

Browse files
bleucitronEnnoriel
andauthored
4.4 (#25)
* docs: 4.4 * docs: 4.5.1 * docs: 4.5.2 * docs: 4.5.3 * docs: 4.5.x * docs: 4.6.1 * docs: 4.6.2 * docs: 4.6.3 * docs: 4.6.4 * docs: 4.7 * Apply suggestions from code review Co-authored-by: Maxime Dupont <m.dupont103@gmail.com> * Update content/tutorial/04-advanced-sveltekit/04-advanced-routing/05-breaking-out-of-layouts/README.md Co-authored-by: Maxime Dupont <m.dupont103@gmail.com> * Update content/tutorial/04-advanced-sveltekit/05-advanced-loading/01-universal-load-functions/README.md * fix: replace ? by . * fix: site links --------- Co-authored-by: Maxime Dupont <m.dupont103@gmail.com>
1 parent 805b270 commit 5e637c3

File tree

57 files changed

+181
-177
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+181
-177
lines changed
Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
---
2-
title: Optional parameters
2+
title: Paramètres optionels
33
---
44

5-
In the first chapter on [routing](/tutorial/pages), we learned how to create routes with [dynamic parameters](/tutorial/params).
5+
Dans le premier chapitre sur le [routing](/tutorial/pages), nous avons vu comment créer des route avec des [paramètres dynamiques](/tutorial/params).
66

7-
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.
7+
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.
88

9-
To do that, we use double brackets. Rename the `[lang]` directory to `[[lang]]`.
9+
Pour faire cela, nous utilisons les crochets doubles. Renommez le dossier `[lang]` en `[[lang]]`.
1010

11-
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).
11+
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).
1212

13-
Lastly, edit `src/routes/[[lang]]/+page.server.js` to specify the default locale:
13+
Enfin, modifiez `src/routes/[[lang]]/+page.server.js` pour préciser la langue par défaut :
1414

1515
```js
1616
/// file: src/routes/[[lang]]/+page.server.js
1717
const greetings = {
1818
en: 'hello!',
1919
de: 'hallo!',
20-
fr: 'bonjour!'
20+
fr: 'bonjour !'
2121
};
2222

2323
export function load({ params }) {
2424
return {
25-
greeting: greetings[params.lang +++?? 'en'+++]
25+
greeting: greetings[params.lang +++?? 'fr'+++]
2626
};
2727
}
2828
```
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<nav>
2-
<a href="/">default</a>
3-
<a href="/en">english</a>
4-
<a href="/de">german</a>
5-
<a href="/fr">french</a>
2+
<a href="/">par défaut</a>
3+
<a href="/en">anglais</a>
4+
<a href="/de">allemand</a>
5+
<a href="/fr">français</a>
66
</nav>
77

88
<slot />
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<h1>hello!</h1>
1+
<h1>bonjour !</h1>

content/tutorial/04-advanced-sveltekit/04-advanced-routing/01-optional-params/app-a/src/routes/[lang]/+page.server.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const greetings = {
22
en: 'hello!',
33
de: 'hallo!',
4-
fr: 'bonjour!'
4+
fr: 'bonjour !'
55
};
66

77
export function load({ params }) {
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
const greetings = {
22
en: 'hello!',
33
de: 'hallo!',
4-
fr: 'bonjour!'
4+
fr: 'bonjour !'
55
};
66

77
export function load({ params }) {
88
return {
9-
greeting: greetings[params.lang ?? 'en']
9+
greeting: greetings[params.lang ?? 'fr']
1010
};
1111
}
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
2-
title: Rest parameters
2+
title: Paramètres du reste
33
path: /how
44
focus: /src/routes/[path]/+page.svelte
55
---
66

7-
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).
7+
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).
88

9-
Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any path.
9+
Renommez `src/routes/[path]` en `src/routes/[...path]`. La route cible maintenant n'importe quel chemin.
1010

11-
> 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:
11+
> 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 :
1212
>
1313
> ```diff
1414
> src/routes/
@@ -21,6 +21,6 @@ Rename `src/routes/[path]` to `src/routes/[...path]`. The route now matches any
2121
> +│ │ └ +page.server.js
2222
> ```
2323
>
24-
> Inside the `+page.server.js` file, `throw error(404)` inside `load`.
24+
> dans le fichier `+page.server.js`, ajoutez `throw error(404)` dans la fonction `load`.
2525
26-
Rest parameters do _not_ need to go at the end — a route like `/items/[...path]/edit` or `/items/[...path].json` is totally valid.
26+
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.

content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-a/src/routes/[path]/+page.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { page } from '$app/stores';
33
4-
let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
4+
let words = ['on', 'descend', 'avec','le', 'lapin', 'blanc' ,'au', 'fond' ,'du', 'gouffre'];
55
66
$: depth = $page.params.path.split('/').filter(Boolean).length;
77
$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
@@ -12,7 +12,7 @@
1212
<p>{word}</p>
1313
{/each}
1414

15-
<p><a href={next}>{words[depth] ?? '?'}</a></p>
15+
<p><a href={next}>{words[depth] ?? '.'}</a></p>
1616
</div>
1717

1818
<style>

content/tutorial/04-advanced-sveltekit/04-advanced-routing/02-rest-params/app-b/src/routes/[...path]/+page.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { page } from '$app/stores';
33
4-
let words = ['how', 'deep', 'does', 'the', 'rabbit', 'hole', 'go'];
4+
let words = ['on', 'descend', 'avec','le', 'lapin', 'blanc' ,'au', 'fond' ,'du', 'gouffre'];
55
66
$: depth = $page.params.path.split('/').filter(Boolean).length;
77
$: next = depth === words.length ? '/' : `/${words.slice(0, depth + 1).join('/')}`;
@@ -12,7 +12,7 @@
1212
<p>{word}</p>
1313
{/each}
1414

15-
<p><a href={next}>{words[depth] ?? '?'}</a></p>
15+
<p><a href={next}>{words[depth] ?? '.'}</a></p>
1616
</div>
1717

1818
<style>
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: Param matchers
2+
title: Validateurs de paramètres
33
path: /colors/ff3e00
44
---
55

6-
To prevent the router from matching on invalid input, you can specify a _matcher_. For example, you might want a route like `/colors/[value]` to match hex values like `/colors/ff3e00` but not named colors like `/colors/octarine` or any other arbitrary input.
6+
Pour éviter que le router reconnaisse des routes avec un paramètre invalide, vous pouvez préciser un _validateur_. Par exemple, vous pourriez vouloir une route comme `/colors/[value]` pour cibler les valeurs hexadécimales comme `/colors/ff3e00` mais pas les couleurs nommées comme `/colors/octarine`, ou tout autre valeur arbitraire.
77

8-
First, create a new file called `src/params/hex.js` and export a `match` function from it:
8+
Commencez par créer un nouveau fichier appelé `src/params/hex.js` et exportez-y une fonction `match` :
99

1010
```js
1111
/// file: src/params/hex.js
@@ -14,8 +14,8 @@ export function match(value) {
1414
}
1515
```
1616

17-
Then, to use the new matcher, rename `src/routes/colors/[color]` to `src/routes/colors/[color=hex]`.
17+
Ensuite, pour utiliser le nouveau validateur, renommez `src/routes/colors/[color]` en `src/routes/colors/[color=hex]`.
1818

19-
Now, whenever someone navigates to that route, SvelteKit will verify that `color` is a valid `hex` value. If not, SvelteKit will try to match other routes, before eventually returning a 404.
19+
À partir de maintenant, lorsque quelqu'un navigue vers cette route, SvelteKit va vérifier que `color` est une valeur `hex` valide. Si ce n'est pas le cas, SvelteKit va essayer de cibler d'autres routes, avant éventuellement de renvoyer une erreur 404.
2020

21-
> Matchers run both on the server and in the browser.
21+
> Les validateurs sont exécutés à la fois sur le serveur et sur le navigateur.
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<h1>color picker</h1>
1+
<h1>palette de couleur</h1>

0 commit comments

Comments
 (0)