Un sistema de internacionalización completo para sitios web estáticos construidos con Astro, que soporta múltiples idiomas con un enfoque estructurado y fácil de mantener.
- ✅ Soporte multi-idioma (español, inglés, extensible a más)
- 🗂️ Sistema de traducción centralizado
- 🧱 Layout común con selector de idioma
- 🔍 Rutas optimizadas para SEO
- 🔐 Tipado seguro con TypeScript
- 🔄 Fallback automático al idioma por defecto
src/
├── i18n/
│ ├── ui.ts # Todas las traducciones
│ └── util.ts # Lógica de traducción
│
├── layouts/
│ └── Layout.astro # Layout base
│
└── pages/
├── en/ # Versión en inglés
│ ├── index.astro
│ └── about/
│ └── index.astro
└── es/ # Versión en español
├── index.astro
└── about/
└── index.astro
npm install
npm run dev// astro.config.mjs
locales: ['es', 'en', 'fr'] // Agregar nuevo código// ui.ts
export const languageList = {
fr: "Français" // Nuevo idioma
};
export const labels = {
fr: {
'nav.home': 'Accueil',
// ...
}
};src/pages/fr/[páginas].astro
- Centraliza todas las traducciones
- Estructura jerárquica: idioma > clave > texto
- Fácil de mantener y actualizar
- Sistema de fallback automático
- Función factory para crear traductores
- Tipado seguro para prevenir errores
- Selector de idioma automático
- Navegación traducida
- Estilos base consistentes
- 📦 Carga diferida de traducciones para mejor performance
- 🔌 Sistema de plugins para extensiones
↔️ Soporte RTL (derecha a izquierda)- 🧩 Interpolación de variables en traducciones
- 📖 Documentación interactiva con ejemplos
- 🌐 Idiomas soportados: 2 (extensible)
- 💬 Traducciones implementadas: 4 por idioma
- ⚙️ Líneas de configuración: 15
- ♻️ Componentes reutilizables: 3
---
import { useTranslations } from "../i18n/util";
const t = useTranslations(Astro.currentLocale);
---
<h1>{t('home.title')}</h1>Para crear una nueva página traducida:
- Agrega las claves en
ui.ts - Crea el archivo en ambas carpetas de idioma
- Usa el sistema de traducción
// ui.ts
'en': {
'contact.title': 'Contact Us'
},
'es': {
'contact.title': 'Contáctenos'
}