Integración con Frameworks

Configuración paso a paso de champollion con frameworks populares.

Hugo

Hugo (TOML / YAML / Markdown)

Estructura del Proyecto

Hugo utiliza i18n/ para traducciones de cadenas de texto y content/ para contenido de 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 champollion

champollion.config.json

{
  "version": 3,
  "inputLocale": "en",
  "localesDir": "./i18n",
  "contentDir": "./content",
  "format": "auto",
  "languages": ["fr", "de", "ja", "es", "ko", "zh"]
}

champollion sync           # sync i18n string files + content files
champollion sync --dry     # preview changes without writing

Detalles de Traducción de Contenido

Front matter: Admite delimitadores tanto YAML (---) como TOML (+++). Traduce title, description, summary, subtitle, caption y linkTitle de forma predeterminada. Todos los demás campos (date, draft, tags, weight, slug, etc.) se preservan. Personaliza con translatableFields en tu configuración.

Protección de bloques: Los bloques de código, shortcodes de Hugo, código en línea y HTML sin procesar se protegen automáticamente usando marcadores centinela Unicode. Pasan 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.md
• my-post.en.md → my-post.fr.md (elimina el sufijo de origen)

Omitir existentes: Los archivos traducidos existentes nunca se sobrescriben. Elimina un archivo de destino para forzar una nueva traducción.

Formas Plurales

Las configuraciones regionales TOML y YAML admiten formas plurales CLDR:

[items]
one = "{{ .Count }} item"
other = "{{ .Count }} items"

Representadas internamente como items.one y items.other para comparación, luego se serializan nuevamente al formato seccionado correcto al escribir.

Next.js (next-intl)

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 champollion

champollion.config.json

{
  "version": 3,
  "inputLocale": "en",
  "localesDir": "./messages",
  "languages": ["fr", "de", "ja", "es", "ko", "zh", "pt", "ar"]
}

npx champollion sync

Crea messages/fr.json, messages/ja.json, etc. — completamente traducidos, preservando tu estructura de claves anidadas. next-intl los detecta automáticamente.

Flujo de Trabajo de Desarrollo

package.json

{
  "scripts": {
    "dev": "champollion watch & next dev",
    "i18n:sync": "champollion sync",
    "i18n:audit": "champollion audit"
  }
}

React (react-i18next)

react-i18next (JSON)

Estructura de Archivo Plano (recomendado)

locales/
├── en.json
├── fr.json
└── ja.json

champollion.config.json

{
  "version": 3,
  "inputLocale": "en",
  "localesDir": "./locales",
  "languages": ["fr", "de", "ja"]
}

npx champollion sync

Estructura de Directorio Anidado

Si utilizas la estructura {locale}/{namespace}.json, crea un script de sincronización para aplanar → traducir → desaplanar. Consulta la documentación de react-i18next para más detalles.