Web Analytics

astro-i18n-aut

⭐ 201 stars French by jlarmstrongiv

astro-i18n-aut L’intégration i18n pour Astro 🧑‍🚀

astro-i18n-aut

Construit avec ❤️ pour tous les membres de l’équipage Astro 🧑‍🚀

Total des téléchargements Dernière version Licence


Motivation

Fournir une intégration d’internationalisation (i18n) pour Astro qui :

Démarrage rapide

Installer

Installer via npm :

npm install astro-i18n-aut

Configurer

Dans votre fichier config Astro :

import { defineConfig } from "astro/config";
import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
import sitemap from "@astrojs/sitemap";

const defaultLocale = "en"; const locales = { en: "en-US", // the defaultLocale value must present in locales keys es: "es-ES", fr: "fr-CA", };

export default defineConfig({ site: "https://example.com/", trailingSlash: "always", build: { format: "directory", }, integrations: [ i18n({ locales, defaultLocale, }), sitemap({ i18n: { locales, defaultLocale, }, filter: filterSitemapByDefaultLocale({ defaultLocale }), }), ], });

Dans votre fichier .gitignore :

astro_tmp_pages_*

Utilisation

Maintenant que vous avez configuré le fichier, chaque page .astro aura des rendus supplémentaires avec vos autres langues. Par exemple, src/pages/about.astro sera rendu comme :

Si vous avez activé redirectDefaultLocale (true par défaut), les redirections seront :

Veuillez noter que la fonction getStaticPaths() ne s'exécutera qu'une seule fois. Cette limitation signifie que vous ne pouvez pas avoir d’URL traduites, telles que /es/acerca-de/ pour /about/. Cependant, cela garantit également la compatibilité avec @astrojs/sitemap.

Le frontmatter Astro et le contenu de la page sont réexécutés pour chaque page traduite. Par exemple, Astro.url.pathname sera :

Il vous appartient de détecter la langue qui est rendue. Vous pouvez utiliser les collections de contenu Astro ou tout framework i18n UI, comme react-i18next, pour vos traductions. Voici un exemple simple de Hello World :

---
import { getLocale } from "astro-i18n-aut";
import Layout from "../layouts/Layout.astro";

const locale = getLocale(Astro.url);

let title: string; switch (locale) { case "es": title = "¡Hola Mundo!"; break; case "fr": title = "Bonjour Monde!"; break; default: title = "Hello World!"; }


{title}

Plusieurs fonctions utilitaires sont incluses pour faciliter la gestion des paramètres régionaux.

Options de configuration Astro

Veuillez consulter la documentation officielle d'Astro pour plus de détails :

Vous devez définir soit :

site: "https://example.com/", trailingSlash: "always", build: { format: "directory", }, }

``

  • `js
{ site: "https://example.com", trailingSlash: "never", build: { format: "file", }, } `

Toutes ces options sont liées et doivent être définies ensemble. Elles affectent si vos URL sont :

  • /about/
  • /about
Si vous choisissez /about/, alors /about renverra une erreur 404 et vice versa.

Options d'intégration

  • locales : Un enregistrement de toutes les locales linguistiques.
  • defaultLocale : La locale linguistique par défaut. La valeur doit être présente dans les clés de locales.
  • redirectDefaultLocale - En supposant defaultLocale: "en", si /en/about/ redirige vers /about/ (par défaut : 308).
  • include : Motif(s) glob à inclure (par défaut : ["pages//*"]).
  • exclude : Motif(s) glob à exclure (par défaut : ["pages/api//*"]).

Compatibilité

#### Types de fichiers de page

Autres types de fichiers de page Astro :

  • .astro
  • .md
  • .mdx (avec l’intégration MDX installée)
  • .html
  • .js / .ts (en tant que points de terminaison)
ne peuvent pas être traduits. Si vous choisissez de les utiliser dans le répertoire pages, veuillez les ajouter aux motifs glob à ignorer. Par exemple : js ["pages/api//", "pages//.md"];

#### Exclusion de pages

Dans Astro, la documentation indique :

Vous pouvez exclure des pages ou des répertoires de la construction en préfixant leurs noms par un underscore (_). Les fichiers avec le préfixe _ ne seront pas reconnus par le routeur et ne seront pas placés dans le répertoire dist/.
>
Vous pouvez utiliser cela pour désactiver temporairement des pages, et aussi pour mettre des tests, utilitaires et composants dans le même dossier que leurs pages associées.

Malheureusement, cette fonctionnalité exclusion de pages n’est pas prise en charge. Veuillez ne conserver que des pages dans votre répertoire pages.

Vous pouvez toujours exclure les pages préfixées par un underscore (_) en ajoutant pages//_* aux motifs globaux d’ignorance :

js ["pages/api//", "pages//_"];

#### Markdown

Pour les fichiers .md et .mdx, utilisez les Collections Content d’Astro.

Avec cette bibliothèque et les Collections Astro Content, vous pouvez garder votre Markdown séparé et organisé dans content, tout en utilisant pages/blog/index.astro et pages/blog/[slug].astro pour afficher tout votre contenu, même avec un defaultLocale ! Voici un exemple de structure de dossier :

. └── astro-project/ └── src/ ├── pages/ │ └── blog/ │ ├── index.astro │ └── [id].astro └── content/ └── blog/ ├── en/ │ ├── post-1.md │ └── post-2.md ├── es/ │ ├── post-1.md │ └── post-2.md └── fr/ ├── post-1.md └── post-2.md
`

#### Frameworks UI

Astro ne prend pas en charge les fichiers de page .tsx ou .jsx.

Pour les frameworks UI comme React et Vue, utilisez-les comme vous le feriez normalement avec Astro en les important comme composants.

N’hésitez pas à passer le contenu traduit title={t('title')} ou la locale locale={locale} en tant que props.

#### Endpoints

Par défaut, toutes les pages dans pages/api//* sont ignorées.

Pour les endpoints .ts et .js`, la gestion des multiples locales dépend de vous. Comme les endpoints ne sont pas destinés aux utilisateurs finaux et qu’il existe de nombreuses façons de les utiliser, nous laissons l’implémentation à votre appréciation.

Licence

Licence MIT

Contribution

Les PR sont les bienvenues ! Merci pour votre aide. Lisez plus dans le guide de contribution pour signaler des bugs et faire des PR.

--- Tranlated By Open Ai Tx | Last indexed: 2026-07-24 ---