forked from withastro/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
…astro#10338 withastro#9240 ... (withastro#10463) * i18n(fr): Update `guides/authentification.mdx` from withastro#10275 Signed-off-by: Thomas Bonnet <[email protected]> * i18n(fr): Update `guides/cms/cloudcannon.mdx` from withastro#10335 Signed-off-by: Thomas Bonnet <[email protected]> * i18n(fr): Update `guides/configuring-astro.mdx` from withastro#9240 (v5) Signed-off-by: Thomas Bonnet <[email protected]> * i18n(fr): Update `guides/data-fetching.mdx` from withastro#9240 (v5) Signed-off-by: Thomas Bonnet <[email protected]> * i18n(fr): Update `guides/deploy/google-cloud.mdx` from withastro#10338 Signed-off-by: Thomas Bonnet <[email protected]> * i18n(fr): Update `guides/deploy/vercel.mdx` from withastro#10330 Signed-off-by: Thomas Bonnet <[email protected]> * i18n(fr): Update `reference/configuring-astro.mdx` about "Le fichier de configuration d'Astro" Signed-off-by: Thomas Bonnet <[email protected]> * Update src/content/docs/fr/guides/configuring-astro.mdx Co-authored-by: Armand Philippot <[email protected]> * Update src/content/docs/fr/guides/configuring-astro.mdx Co-authored-by: Armand Philippot <[email protected]> * Update src/content/docs/fr/guides/configuring-astro.mdx Co-authored-by: Armand Philippot <[email protected]> * Update src/content/docs/fr/guides/configuring-astro.mdx Co-authored-by: Armand Philippot <[email protected]> * Update src/content/docs/fr/guides/configuring-astro.mdx Co-authored-by: Armand Philippot <[email protected]> * Update src/content/docs/fr/guides/configuring-astro.mdx Co-authored-by: Armand Philippot <[email protected]> --------- Signed-off-by: Thomas Bonnet <[email protected]> Co-authored-by: Armand Philippot <[email protected]>
- Loading branch information
1 parent
7c40bf9
commit a550125
Showing
6 changed files
with
129 additions
and
132 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,169 +1,119 @@ | ||
| --- | ||
| title: Configurer Astro | ||
| title: Aperçu de la configuration | ||
| description: Découvrez les différentes façons de configurer et de personnaliser votre nouveau projet et votre expérience de développement. | ||
| i18nReady: true | ||
| --- | ||
| import ReadMore from '~/components/ReadMore.astro' | ||
|
|
||
| Personnalisez le fonctionnement d'Astro en ajoutant un fichier `astro.config.mjs` dans votre projet. C'est un fichier commun dans les projets Astro, et tous les exemples officiels de modèles et de thèmes sont livrés avec un fichier par défaut. | ||
| Astro est flexible et sans contrainte au niveau du choix du framework, ce qui vous permet de configurer votre projet de nombreuses façons différentes. Cela signifie que le démarrage d'un nouveau projet peut sembler difficile : il n'y a pas de « meilleure façon » de configurer votre projet Astro ! | ||
|
|
||
| <ReadMore>Lisez la [doc de référence de l'API d'Astro](/fr/reference/configuration-reference/) pour une vue d'ensemble de toutes les options de configuration supportées.</ReadMore> | ||
| Les guides de cette section « Configuration » vous aideront à vous familiariser avec les différents fichiers qui vous permettent de configurer et de personnaliser certains aspects de votre projet et de votre environnement de développement. | ||
|
|
||
| ## Le Fichier de Configuration d'Astro | ||
| S'il s'agit de votre premier projet Astro, ou si cela fait un moment que vous n'avez pas configuré un nouveau projet, utilisez les guides suivants et les références de la documentation pour obtenir de l'aide. | ||
|
|
||
| Un fichier de configuration Astro valide exporte sa configuration en utilisant l'export `default`, en utilisant l'aide `defineConfig` recommandée : | ||
| ## Le fichier de configuration d'Astro | ||
|
|
||
| Le [fichier de configuration Astro](/fr/reference/configuration-reference/) est un fichier JavaScript inclus à la racine de chaque projet de démarrage : | ||
|
|
||
| ```js | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config' | ||
|
|
||
| export default defineConfig({ | ||
| // vos options de configuration ici... | ||
| // https://docs.astro.build/fr/reference/configuration-reference/ | ||
| }) | ||
| ``` | ||
|
|
||
| L'utilisation de `defineConfig()` est recommandé pour obtenir l'aide sur les types utilisés dans votre éditeur de code (IDE), mais elle est aussi optionnelle. Un fichier de configuration minimal valide pourrait ressembler à ça : | ||
| Il n'est nécessaire que si vous avez quelque chose à configurer, mais la plupart des projets utiliseront ce fichier. L'aide `defineConfig()` fournit une IntelliSense automatique dans votre IDE et est l'endroit où vous ajouterez toutes vos options de configuration pour dire à Astro comment construire et rendre votre projet en HTML. | ||
|
|
||
| ```js | ||
| // Exemple : Fichier de configuration minimal, vide | ||
| export default {} | ||
| ``` | ||
| Nous recommandons d'utiliser le format de fichier par défaut `.mjs` dans la plupart des cas, ou `.ts` si vous voulez écrire du TypeScript dans votre fichier de configuration. Cependant, `astro.config.js` et `astro.config.cjs` sont également supportés. | ||
|
|
||
| ## Types de Fichier de Configuration Supportés | ||
| <ReadMore>Lisez la [référence de configuration](/fr/reference/configuration-reference/) d'Astro pour un aperçu complet de toutes les options de configuration prises en charge.</ReadMore> | ||
|
|
||
| Astro supporte plusieurs formats de fichiers pour son fichier de configuration JavaScript : `astro.config.js`, `astro.config.mjs`, `astro.config.cjs` et `astro.config.ts`. Nous recommandons d'utiliser `.mjs` dans la plupart des cas où `.ts` si vous voulez écrire du TypeScript dans votre fichier de configuration. | ||
| ## Le fichier de configuration TypeScript | ||
|
|
||
| Le chargement du fichier de configuration TypeScript est géré par [`tsm`](https://github.com/lukeed/tsm) respectera les options tsconfig de votre projet. | ||
| ## Résolution du fichier de configuration | ||
| Chaque projet de démarrage Astro inclut un fichier `tsconfig.json` dans votre projet. Le [script du composant](/fr/basics/astro-components/#le-script-du-composant) d'Astro est Typescript, qui fournit l'outil d'édition d'Astro et vous permet d'ajouter optionnellement une syntaxe à votre JavaScript pour la vérification du type du code de votre propre projet. | ||
|
|
||
| Astro va automatiquement essayer de résoudre un fichier de configuration nommé `astro.config.mjs` à la racine du projet. Si aucun fichier de configuration n'est trouvé à la racine de votre projet, les options par défaut d'Astro seront utilisées. | ||
| Utilisez le fichier `tsconfig.json` pour configurer le modèle TypeScript qui effectuera les vérifications de type sur votre code, configurer les plugins TypeScript, définir les alias d'importation, et plus encore. | ||
|
|
||
| ```bash | ||
| # Exemple : Lit votre configuration à partir de ./astro.config.mjs | ||
| astro build | ||
| ``` | ||
| <ReadMore>Veuillez lire le [Guide TypeScript](/fr/guides/typescript/) d'Astro pour une présentation complète des options TypeScript et des types d'utilitaires intégrés à Astro.</ReadMore> | ||
|
|
||
| Vous pouvez explicitement définir un fichier de configuration à utiliser avec l'option `--config` depuis l'interface de commande en ligne CLI. Cette option est toujours relative au répertoire de travail actuel dans lequel vous avez lancé la commande `astro`. | ||
| ## Expérience de développement | ||
|
|
||
| ```bash | ||
| # Exemple : Lit votre configuration à partir de ce fichier | ||
| astro build --config mon-fichier-config.js | ||
| ``` | ||
| ## Expérience de développement | ||
|
|
||
| ## Autocomplétion de configuration | ||
| Lorsque vous travaillez en mode développement, vous pouvez tirer parti de votre éditeur de code et d'autres outils pour améliorer l'expérience du développeur Astro. | ||
|
|
||
| Astro recommande d'utiliser l'aide `defineConfig()` dans votre fichier de configuration. `defineConfig()` fournit une autocomplétion automatique dans votre IDE. Les éditeurs comme VSCode sont capables de lire les définitions de type TypeScript d'Astro et de fournir des indications de type JSDoc automatiques, même si votre fichier de configuration n'est pas écrit en TypeScript. | ||
| Astro fournit sa propre extension officielle VS Code et est compatible avec plusieurs autres outils d'édition populaires. Astro fournit également une barre d'outils personnalisable qui s'affiche dans l'aperçu de votre navigateur lorsque le serveur de développement est en cours d'exécution. Vous pouvez installer et même créer vos propres applications de barre d'outils pour des fonctionnalités supplémentaires. | ||
|
|
||
| ```js | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config' | ||
| <ReadMore>Lisez les guides Astro sur les [options de configuration de l'éditeur](/fr/editor-setup/) et [l'utilisation de la barre d'outils de développement](/fr/guides/dev-toolbar/) pour apprendre à personnaliser votre expérience de développement.</ReadMore> | ||
|
|
||
| export default defineConfig({ | ||
| // vos options de configuration ici... | ||
| // https://docs.astro.build/fr/reference/configuration-reference/ | ||
| }) | ||
| ``` | ||
| ## Tâches courantes d'un nouveau projet | ||
|
|
||
| Vous pouvez également fournir des définitions de type manuellement à VSCode, en utilisant cette notation JSDoc : | ||
| Voici quelques premières étapes que vous pourriez choisir de suivre avec un nouveau projet Astro. | ||
|
|
||
| ```js | ||
| // astro.config.mjs | ||
| export default /** @type {import('astro').AstroUserConfig} */ ({ | ||
| // vos options de configuration ici... | ||
| // https://docs.astro.build/fr/reference/configuration-reference/ | ||
| } | ||
| ``` | ||
| ## Référencement des fichiers relatifs | ||
| Si vous fournissez un chemin relatif à `root` ou à l'option `--root`, Astro résoudera ce chemin par rapport au répertoire de travail actuel où vous avez lancé la commande `astro`. | ||
| ```js | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config' | ||
| ### Ajouter votre domaine de déploiement | ||
|
|
||
| export default defineConfig({ | ||
| // Cherches vers le répertoire "./foo" dans le répertoire de travail actuel | ||
| root: 'foo' | ||
| }) | ||
| ``` | ||
| Pour générer votre sitemap et créer des URL canoniques, configurez votre URL de déploiement dans l'option [`site`](/fr/reference/configuration-reference/#site). Si vous déployez vers un chemin (par exemple `www.example/docs`), vous pouvez également configurer une [`base`](/fr/reference/configuration-reference/#base) pour la racine de votre projet. | ||
|
|
||
| Astro va chercher toutes les autres chaînes relatives de fichiers et de répertoires par rapport à la racine du projet : | ||
| De plus, les différents hôtes de déploiement peuvent avoir un comportement différent en ce qui concerne les barres obliques à la fin de vos URLs. (par exemple, `example.com/about` vs `example.com/about/`). Une fois que votre site est déployé, vous pouvez avoir besoin de configurer votre préférence [`trailingSlash`](/fr/reference/configuration-reference/#trailingslash). | ||
|
|
||
| ```js | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config' | ||
|
|
||
| export default defineConfig({ | ||
| // Se dirige vers le répertoire "./foo" dans le répertoire de travail actuel | ||
| root: 'foo', | ||
| // Se dirige vers le répertoire "./foo/public" dans le répertoire de travail actuel | ||
| publicDir: 'public', | ||
| }) | ||
| ``` | ||
| Pour référencer un fichier ou un répertoire relatif au fichier de configuration, utilisez `import.meta.url` (sauf si vous écrivez un fichier common.js `astro.config.cjs`). | ||
| ```js "import.meta.url" | ||
| // astro.config.mjs | ||
| ```js title="astro.config.mjs" | ||
| import { defineConfig } from 'astro/config' | ||
|
|
||
| export default defineConfig({ | ||
| // Se dirige vers le répertoire "./foo", relatif à ce fichier de configuration | ||
| root: new URL("./foo", import.meta.url).toString(), | ||
| // Se dirige vers le répertoire "./public", relatif à ce fichier de configuration | ||
| publicDir: new URL("./public", import.meta.url).toString(), | ||
| site: 'https://www.example.com', | ||
| base: '/docs', | ||
| trailingSlash: 'always', | ||
| }) | ||
| ``` | ||
| ### Ajouter les métadonnées du site | ||
|
|
||
| :::note | ||
| Les propriétés `import.meta` spécifiques à Vite, comme `import.meta.env` ou `import.meta.glob`, ne sont _pas_ accessibles depuis votre fichier de configuration. Nous recommandons des alternatives comme [dotenv](https://github.com/motdotla/dotenv) ou [fast-glob](https://github.com/mrmlnc/fast-glob) pour ces cas d'utilisation respectifs. En outre, [les alias de chemin tsconfig](https://www.typescriptlang.org/tsconfig#paths) ne seront pas résolus. Utilisez des chemins relatifs pour les importations de modules dans ce fichier. | ||
| ::: | ||
| ## Personnalisation des noms de fichiers de sortie | ||
| Astro n'utilise pas son fichier de configuration pour les données de référencement ou les métadonnées, mais seulement pour les informations nécessaires à la construction du code de votre projet et à son rendu en HTML. | ||
|
|
||
| Pour le code qu'Astro traite, comme les fichiers JavaScript ou CSS importés, vous pouvez personnaliser les noms de fichiers de sortie en utilisant [`entryFileNames` (EN)](https://rollupjs.org/configuration-options/#output-entryfilenames), [`chunkFileNames` (EN)](https://rollupjs.org/configuration-options/#output-chunkfilenames), et [`assetFileNames` (EN)](https://rollupjs.org/configuration-options/#output-assetfilenames) dans une entrée `vite.build.rollupOptions` de votre fichier `astro.config.*`. | ||
| Au lieu de cela, ces informations sont ajoutées au `<head>` de votre page dans les balises HTML `<link>` et `<meta>`, comme si vous écriviez des pages HTML simples. | ||
|
|
||
| ```js ins={9-11} | ||
| // astro.config.mjs | ||
| import { defineConfig } from 'astro/config' | ||
| Un modèle courant pour les sites Astro est de créer un [composant `.astro`](/fr/basics/astro-components/) qui peut être ajouté à un [composant de mise en page](/fr/basics/layouts/) commun afin qu'il puisse s'appliquer à toutes vos pages. | ||
|
|
||
| export default defineConfig({ | ||
| vite: { | ||
| build: { | ||
| rollupOptions: { | ||
| output: { | ||
| entryFileNames: 'entry.[hash].mjs', | ||
| chunkFileNames: 'chunks/chunk.[hash].mjs', | ||
| assetFileNames: 'assets/asset.[hash][extname]', | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| }) | ||
| ```astro title="src/components/MainLayout.astro" | ||
| --- | ||
| import Head from './Head.astro'; | ||
| const { ...props } = Astro.props; | ||
| --- | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <Head /> | ||
| <!-- --> | ||
| </head> | ||
| <body><!-- --></body> | ||
| </html> | ||
| ``` | ||
|
|
||
| Cela peut être utile si vous avez des scripts dont les noms peuvent être affectés par des bloqueurs de publicité (par exemple `ads.js` ou `google-tag-manager.js`). | ||
| Comme `Head.astro` est un composant Astro ordinaire, vous pouvez importer des fichiers et recevoir des éléments transmis par d'autres composants, tels qu'un titre de page spécifique. | ||
|
|
||
| ## Variables d'Environment | ||
| Astro évalue les fichiers de configuration avant de charger vos autres fichiers. Ainsi, vous ne pouvez pas utiliser `import.meta.env` pour accéder aux variables d'environnement qui ont été définies dans les fichiers `.env`. | ||
| ```astro title="src/components/Head.astro" | ||
| --- | ||
| import Favicon from '../assets/Favicon.astro'; | ||
| import SomeOtherTags from './SomeOtherTags.astro'; | ||
| const { title = 'Mon site Astro', ...props } = Astro.props; | ||
| --- | ||
| <link rel="sitemap" href="/sitemap-index.xml"> | ||
| <title>{title}</title> | ||
| <meta name="description" content="Bienvenue sur mon nouveau site Astro !"> | ||
| Vous pouvez utiliser `process.env` dans un fichier de configuration pour accéder à d'autres variables d'environnement, comme celles [définies par le CLI](/fr/guides/environment-variables/#utilisation-en-cli). | ||
| <!-- Web analytics --> | ||
| <script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> | ||
| Vous pouvez également utiliser l'[aide `loadEnv` de Vite (EN)](https://main.vite.dev/config/#using-environment-variables-in-config) pour charger manuellement les fichiers `.env`. | ||
| <!-- Balises Open Graph --> | ||
| <meta property="og:title" content="Mon nouveau site Astro" /> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:url" content="http://www.example.com/" /> | ||
| <meta property="og:description" content="Bienvenue sur mon nouveau site Astro !" /> | ||
| <meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp"> | ||
| <meta property="og:image:alt" content=""> | ||
| :::note | ||
| `pnpm` ne vous permet pas d'importer des modules qui ne sont pas directement installés dans votre projet. Si vous utilisez `pnpm`, vous devrez installer `vite` pour utiliser l'aide `loadEnv`. | ||
| ```sh | ||
| pnpm add vite --save-dev | ||
| ``` | ||
| ::: | ||
| <SomeOtherTags /> | ||
| ```js title="astro.config.mjs" | ||
| import { loadEnv } from "vite"; | ||
| const { SECRET_PASSWORD } = loadEnv(process.env.NODE_ENV, process.cwd(), ""); | ||
| <Favicon /> | ||
| ``` | ||
| ## Référence de configuration | ||
| <ReadMore>Lisez la documentation de référence [sur la configuration de l'API d'Astro](/fr/reference/configuration-reference/) pour une vue d'ensemble des options de configuration supportées.</ReadMore> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters