Astro
Intégrez i1n avec Astro pour des sites multilingues statiques et rendus côté serveur.
Configuration
Exécutez i1n init dans votre projet Astro. L'interface de ligne de commande configure le format JSON imbriqué dans le répertoire locales/. Les projets Astro utilisent généralement le SDK i1n en mode autonome.
Créez un module utilitaire (par exemple, src/i18n/index.ts) qui initialise i1n et exporte une fonction useTranslations(). Cette fonction charge les ressources de locale appropriées et renvoie la fonction t() typée.
Utilisation
Dans vos pages .astro, appelez useTranslations(locale) dans le frontmatter pour obtenir la fonction t(). Utilisez-la pour afficher des chaînes traduites dans vos modèles. Étant donné que les composants Astro s'exécutent au moment de la compilation, les traductions sont intégrées statiquement dans le HTML généré.
Organisez les traductions par espace de noms (par exemple, common.json, home.json, docs.json) pour que les fichiers restent gérables. Utilisez getLocalePath(locale, path) pour générer des URL préfixées par la locale pour la navigation interne.
Génération statique
Utilisez getStaticPaths() pour générer des pages pour toutes les langues prises en charge. Chaque variante de langue est créée en tant que page HTML distincte, garantissant un chargement rapide et un référencement optimal avec les balises hreflang appropriées.
Ajoutez i1n pull à votre étape de build pour vous assurer que les fichiers de traduction sont synchronisés avant la génération statique. Le processus de build d'Astro générera alors automatiquement toutes les variantes de langue.
Mode pont
Les projets Astro utilisent généralement le SDK i1n directement plutôt qu'une bibliothèque i18n externe. Cependant, si vous utilisez une intégration de framework (par exemple, des composants React dans Astro), vous pouvez utiliser le mode Bridge au sein de ces îles de framework.
Pour les îles React : registerI1n((key, params) => i18next.t(key, params)). Pour les îles Vue : registerI1n((key, params) => i18n.global.t(key, params)). Le shell Astro et les îles de framework peuvent chacun utiliser leur approche préférée.
import { init, t as i1nT } from 'i1n'
export function useTranslations(locale: string) {
init({
locale,
resources: loadResources(locale)
})
return i1nT
}