\n```\n\n> Si vous souhaitez utiliser votre contenu dans un attribut de type `chaîne`, tel que `alt`, `title`, `href`, `aria-label`, etc., vous pouvez utiliser la valeur de la fonction, comme :\n\n> ```html\n> \n> \n> \n> ```\n\n> **Note sur la configuration du routage :**\n> La structure de répertoire que vous utilisez dépend du paramètre `middleware.routing` dans votre `intlayer.config.ts` :\n>\n> - **`prefix-no-default` (par défaut) :** Conserve la langue par défaut à la racine (pas de préfixe) et préfixe les autres. Utilisez `[...locale]` pour intercepter tous les cas.\n> - **`prefix-all` :** Toutes les URL ont un préfixe de langue. Vous pouvez utiliser un `[locale]` standard si vous n'avez pas besoin de gérer la racine séparément.\n> - **`search-param` ou `no-prefix` :** Pas besoin de dossier de locale. La locale est gérée via les paramètres de recherche ou les cookies.\n\n### Étape 6 : Créer l'élément personnalisé Lit\n\nCréez l'élément personnalisé Lit. Appelez `installIntlayer` dans le `connectedCallback` avec la `locale` définie par le serveur pour initialiser le singleton Intlayer sur le client.\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // Initialiser avec la locale détectée par le serveur\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> La prop `locale` est transmise de la page Astro (détection serveur) et utilisée pour initialiser `installIntlayer` dans le `connectedCallback`, ce qui en fait la locale initiale pour tous les hooks `ReactiveController` de l'élément.\n\n> `useIntlayer` est enregistré en tant que `ReactiveController`. L'élément se re-rendra automatiquement lors des changements de langue - aucun setup supplémentaire requis.\n\n### Étape 7 : Ajouter un sélecteur de langue\n\nLa fonctionnalité de changement de langue est directement intégrée dans la méthode `render()` de l'élément personnalisé Lit (voir Étape 6 ci-dessus). Elle utilise `useLocale` de `lit-intlayer` et navigue vers l'URL localisée lorsqu'un utilisateur sélectionne une nouvelle langue :\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// Au sein de la classe LitElement, après le setup de useLocale (de l'Étape 6) :\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // Naviguer vers l'URL localisée lors du changement de langue\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **Note sur la réactivité de Lit :**\n> `useLocale` retourne un `ReactiveController`. Lorsque `setLocale` est appelé, le contrôleur planifie automatiquement un re-rendu - ainsi, l'état du bouton actif est mis à jour sans manipulation manuelle du DOM.\n\n> **Note sur la persistance :**\n> L’utilisation de `onLocaleChange` pour rediriger via `window.location.href` garantit que la nouvelle URL de langue est bien visitée, permettant au middleware Intlayer de définir le cookie de langue et de mémoriser la préférence de l’utilisateur pour les visites futures.\n\n### Étape 8 : Sitemap et Robots.txt\n\nIntlayer fournit des utilitaires pour créer dynamiquement vos sitemaps localisés et fichiers robots.txt.\n\n#### Sitemap\n\nIntlayer est livré avec un générateur de sitemap intégré pour vous aider à créer facilement un sitemap pour votre application. Il gère les routes localisées et ajoute les métadonnées nécessaires pour les moteurs de recherche.\n\n> Le sitemap généré par Intlayer prend en charge l'espace de noms `xhtml:link` (Hreflang XML Extensions). Contrairement aux générateurs de sitemap par défaut qui ne répertorient que les URL brutes, Intlayer crée automatiquement les liens bidirectionnels requis entre toutes les versions linguistiques d'une page (par exemple, `/about`, `/about?lang=fr` et `/about?lang=es`). Cela garantit que les moteurs de recherche indexent et servent correctement la bonne version linguistique au bon public.\n\nCréez `src/pages/sitemap.xml.ts` pour générer un sitemap incluant toutes vos routes localisées.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nCréez `src/pages/robots.txt.ts` pour gérer le crawl des moteurs de recherche.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### Configuration TypeScript\n\nIntlayer utilise l'augmentation de module pour tirer parti de TypeScript et rendre votre codebase plus robuste. Lit nécessite l'activation des `experimentalDecorators` si vous utilisez la syntaxe de décorateurs.\n\n\n\n\n\nAssurez-vous que votre configuration TypeScript inclut les types autogénérés.\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Requis par Lit pour que les décorateurs fonctionnent\n },\n include: [\n // ... Vos configurations TypeScript existantes\n \".intlayer/**/*.ts\", // Inclure les types autogénérés\n ],\n}\n```\n\n### Configuration Git\n\nIl est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les committer dans votre dépôt Git.\n\nPour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `.gitignore` :\n\n```bash\n# Ignorer les fichiers générés par Intlayer\n.intlayer\n```\n\n### Extension VS Code\n\nPour améliorer l'expérience de développement avec Intlayer, vous pouvez installer l'**extension VS Code Intlayer officielle**.\n\n[Installer depuis le VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nCette extension fournit :\n\n- **L'autocomplétion** pour vos clés de traduction.\n- **La détection d'erreurs en temps réel** pour les traductions manquantes.\n- **Un aperçu en ligne** du contenu traduit.\n- **Des actions rapides** pour créer et mettre à jour vos traductions facilement.\n\nPour plus d'informations sur l'utilisation de l'extension, consultez la [documentation de l'extension VS Code Intlayer](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Optionnel) Étape 15 : Extraer le contenu de vos composants\n\nSi vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.\n\nPour faciliter ce processus, Intlayer propose un [compilateur](/fr/doc/compiler) / [extracteur](/fr/doc/concept/cli/extract) pour transformer vos composants et extraire le contenu.\n\nPour le configurer, vous pouvez ajouter une section `compiler` dans votre fichier `intlayer.config.ts` :\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Reste de votre configuration\n compiler: {\n /**\n * Indique si le compilateur doit être activé.\n */\n enabled: true,\n\n /**\n * Définit le chemin des fichiers de sortie\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indique si les composants doivent être sauvegardés après avoir été transformés. De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.\n */\n saveComponents: false,\n\n /**\n * Préfixe de clé de dictionnaire\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nExécutez l'extracteur pour transformer vos composants et extraire le contenu\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nMettez à jour votre fichier `vite.config.ts` pour inclure le plugin `intlayerCompiler` :\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Ajoute le plugin du compilateur\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Ou npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Ou pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Ou yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### Aller plus loin\n\nVous pouvez également implémenter l'[éditeur visuel](/fr/doc/concept/editor) ou externaliser votre contenu en utilisant un [CMS](/fr/doc/concept/cms).\n","about":"Apprenez à ajouter l'internationalisation (i18n) à votre site Astro + Lit avec Intlayer. Suivez ce guide pour rendre votre site multilingue.","url":"https://intlayer.org/fr/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"Internationalisation, Documentation, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Développeurs, Responsables de contenu"}}

Création:2026-04-24Dernière mise à jour:2026-05-06