astro-i18n-aut L’intégration i18n pour Astro 🧑🚀
Construit avec ❤️ pour tous les membres de l’équipage Astro 🧑🚀
Motivation
Fournir une intégration d’internationalisation (i18n) pour Astro qui :
- Prend en charge le
defaultLocale - Évite la duplication des fichiers de template
- Est indépendante de l’adaptateur
- Est indépendante du framework UI
- Est compatible avec
@astrojs/sitemap
Démarrage rapide
Installer
Installer via npm :
npm install astro-i18n-autConfigurer
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 :
/about//es/about//fr/about/
redirectDefaultLocale (true par défaut), les redirections seront :/en/about/=>/about/
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 :
/about//es/about//fr/about/
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 :{
``
- `
js
Toutes ces options sont liées et doivent être définies ensemble. Elles affectent si vos URL sont :
/about/
/aboutSi 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"];
js ["pages/api//", "pages//_"];#### 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 ajoutantpages//_*aux motifs globaux d’ignorance :
. └── 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 `#### Markdown.mdPour les fichiers
et.mdx, utilisez les Collections Content d’Astro.contentAvec cette bibliothèque et les Collections Astro Content, vous pouvez garder votre Markdown séparé et organisé dans
, tout en utilisantpages/blog/index.astroetpages/blog/[slug].astropour afficher tout votre contenu, même avec undefaultLocale! Voici un exemple de structure de dossier :
#### 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 ---