Integración de Frameworks
Configuración paso a paso para i18n-rosetta con frameworks populares.
- Hugo
- Next.js (next-intl)
- React (react-i18next)
Hugo (TOML / YAML / Markdown)
Estructura del proyecto
Hugo utiliza i18n/ para las traducciones de cadenas y content/ para el contenido de las páginas:
my-hugo-site/
├── i18n/
│ ├── en.toml ← source of truth
│ ├── fr.toml
│ └── ja.toml
├── content/
│ ├── posts/
│ │ ├── hello.md ← source (English)
│ │ ├── hello.fr.md
│ │ └── hello.ja.md
│ └── about.md
└── .env.local
Configuración
npm install --save-dev i18n-rosetta
{
"version": 3,
"inputLocale": "en",
"localesDir": "./i18n",
"contentDir": "./content",
"format": "auto",
"languages": ["fr", "de", "ja", "es", "ko", "zh"]
}
i18n-rosetta sync # sync i18n string files + content files
i18n-rosetta sync --dry # preview changes without writing
Detalles de la traducción de contenido
Front matter: Admite los delimitadores de YAML (---) y TOML (+++). Traduce title, description, summary, subtitle, caption y linkTitle por defecto. Todos los demás campos (date, draft, tags, weight, slug, etc.) se conservan. Personalice esto con translatableFields en su configuración.
Protección de bloques: Los bloques de código, los shortcodes de Hugo, el código en línea y el HTML sin formato se protegen automáticamente utilizando marcadores de posición centinela Unicode. Pasan a través del proceso sin modificaciones.
Convención de nombres de archivo: Sigue el patrón de traducción por nombre de archivo de Hugo:
my-post.md→my-post.fr.mdmy-post.en.md→my-post.fr.md(elimina el sufijo de origen)
Omitir existentes: Los archivos traducidos existentes nunca se sobrescriben. Elimine un archivo de destino para forzar una nueva traducción.
Formas plurales
Las configuraciones regionales de TOML y YAML admiten las formas plurales de CLDR:
[items]
one = "{{ .Count }} item"
other = "{{ .Count }} items"
Representado internamente como items.one y items.other para la comparación (diffing), y luego reserializado al formato seccionado correcto al escribir.
next-intl (JSON)
Estructura del proyecto
my-app/
├── messages/
│ └── en.json ← source of truth
├── src/
│ ├── i18n/
│ │ ├── routing.ts
│ │ └── request.ts
│ └── middleware.ts
└── .env.local
Configuración
npm install --save-dev i18n-rosetta
{
"version": 3,
"inputLocale": "en",
"localesDir": "./messages",
"languages": ["fr", "de", "ja", "es", "ko", "zh", "pt", "ar"]
}
npx i18n-rosetta sync
Crea messages/fr.json, messages/ja.json, etc. — completamente traducidos, conservando su estructura de claves anidadas. next-intl los detecta automáticamente.
Flujo de trabajo de desarrollo
{
"scripts": {
"dev": "i18n-rosetta watch & next dev",
"i18n:sync": "i18n-rosetta sync",
"i18n:audit": "i18n-rosetta audit"
}
}
react-i18next (JSON)
Estructura de archivos plana (recomendado)
locales/
├── en.json
├── fr.json
└── ja.json
{
"version": 3,
"inputLocale": "en",
"localesDir": "./locales",
"languages": ["fr", "de", "ja"]
}
npx i18n-rosetta sync
Estructura de directorios anidada
Si utiliza la estructura {locale}/{namespace}.json, cree un script de sincronización para aplanar → traducir → desaplanar. Consulte la documentación de react-i18next para obtener más detalles.