Astro

Integre i1n con Astro para sitios multilingües estáticos y renderizados en el servidor.

Configuración

Ejecute i1n init en su proyecto de Astro. La CLI configura el formato JSON anidado en el directorio locales/. Los proyectos de Astro suelen utilizar el SDK de i1n en modo independiente.

Cree un módulo de utilidad (por ejemplo, src/i18n/index.ts) que inicialice i1n y exporte una función useTranslations(). Esta función carga los recursos de localización correspondientes y devuelve la función t() con seguridad de tipos.

Uso

En sus páginas .astro, llame a useTranslations(locale) en el frontmatter para obtener la función t(). Úsela para renderizar cadenas traducidas en sus plantillas. Dado que los componentes de Astro se ejecutan en tiempo de compilación, las traducciones se incrustan de forma estática en el HTML generado.

Organice las traducciones por espacio de nombres (por ejemplo, common.json, home.json, docs.json) para mantener los archivos manejables. Utilice getLocalePath(locale, path) para generar URLs con prefijo de idioma para la navegación interna.

Generación estática

Utilice getStaticPaths() para generar páginas para todos los idiomas admitidos. Cada variante de idioma se construye como una página HTML independiente, lo que garantiza una carga rápida y un SEO óptimo con las etiquetas hreflang adecuadas.

Agregue i1n pull a su paso de compilación para asegurar que los archivos de traducción estén sincronizados antes de la generación estática. El proceso de compilación de Astro generará automáticamente todas las variantes de idioma.

Modo puente

Los proyectos de Astro suelen utilizar el SDK de i1n directamente en lugar de una biblioteca de i18n externa. Sin embargo, si utiliza una integración de framework (por ejemplo, componentes de React dentro de Astro), puede utilizar el Modo Puente dentro de esas islas de framework.

Para islas de React: registerI1n((key, params) => i18next.t(key, params)). Para islas de Vue: registerI1n((key, params) => i18n.global.t(key, params)). El shell de Astro y las islas de framework pueden utilizar cada uno su enfoque preferido.

src/i18n/index.ts

import { init, t as i1nT } from 'i1n'

export function useTranslations(locale: string) {
  init({
    locale,
    resources: loadResources(locale)
  })
  return i1nT
}

Relacionado

Panel de control

Guía para el panel web de i1n: creación de cuentas, organizaciones, claves de API, edición de traducciones y gestión de equipos.

Modo puente

Conserve su biblioteca de i18n actual mientras añade el autocompletado con seguridad de tipos, la traducción por IA y la gestión de archivos de i1n.