Astro
Integra i1n con Astro per siti multilingue statici e renderizzati lato server.
Configurazione
Esegui i1n init nel tuo progetto Astro. La CLI configura il formato JSON nidificato nella directory locales/. I progetti Astro utilizzano tipicamente l'SDK i1n in modalità standalone.
Crea un modulo di utilità (es. src/i18n/index.ts) che inizializzi i1n ed esporti una funzione useTranslations(). Questa funzione carica le risorse della locale appropriata e restituisce la funzione t() type-safe.
Utilizzo
Nelle tue pagine .astro, chiama useTranslations(locale) nel frontmatter per ottenere la funzione t(). Usala per renderizzare stringhe tradotte nei tuoi template. Poiché i componenti Astro vengono eseguiti al momento della compilazione, le traduzioni vengono incorporate staticamente nell'HTML generato.
Organizza le traduzioni per namespace (es. common.json, home.json, docs.json) per mantenere i file gestibili. Usa getLocalePath(locale, path) per generare URL con prefisso locale per la navigazione interna.
Generazione Statica
Usa getStaticPaths() per generare pagine per tutte le localizzazioni supportate. Ogni variante di localizzazione viene creata come una pagina HTML separata, garantendo un caricamento rapido e un SEO ottimale con i tag hreflang appropriati.
Aggiungi i1n pull al tuo passaggio di build per garantire che i file di traduzione siano sincronizzati prima della generazione statica. Il processo di build di Astro genererà quindi automaticamente tutte le varianti locali.
Modalità Bridge
I progetti Astro utilizzano tipicamente l'SDK i1n direttamente anziché una libreria i18n esterna. Tuttavia, se si utilizza un'integrazione di framework (ad esempio, componenti React all'interno di Astro), è possibile utilizzare la modalità Bridge all'interno di quelle isole di framework.
Per le isole React: registerI1n((key, params) => i18next.t(key, params)). Per le isole Vue: registerI1n((key, params) => i18n.global.t(key, params)). La shell Astro e le isole dei framework possono utilizzare ciascuna il proprio approccio preferito.
import { init, t as i1nT } from 'i1n'
export function useTranslations(locale: string) {
init({
locale,
resources: loadResources(locale)
})
return i1nT
}