Intégration des frameworks
Configuration étape par étape de i18n-rosetta avec les frameworks populaires.
- Hugo
- Next.js (next-intl)
- React (react-i18next)
Hugo (TOML / YAML / Markdown)
Structure du projet
Hugo utilise i18n/ pour les traductions de chaînes de caractères et content/ pour le contenu des pages :
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
Configuration
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
Détails de la traduction du contenu
Front matter : Prend en charge les délimiteurs YAML (---) et TOML (+++). Traduit title, description, summary, subtitle, caption et linkTitle par défaut. Tous les autres champs (date, draft, tags, weight, slug, etc.) sont préservés. Personnalisez avec translatableFields dans votre configuration.
Protection des blocs : Les blocs de code, les shortcodes Hugo, le code en ligne et le HTML brut sont automatiquement protégés à l'aide d'espaces réservés sentinelles Unicode. Ils sont conservés intacts.
Convention de nommage des fichiers : Suit le modèle de traduction par nom de fichier de Hugo :
my-post.md→my-post.fr.mdmy-post.en.md→my-post.fr.md(supprime le suffixe source)
Ignorer l'existant : Les fichiers traduits existants ne sont jamais écrasés. Supprimez un fichier cible pour forcer une nouvelle traduction.
Formes plurielles
Les paramètres régionaux TOML et YAML prennent en charge les formes plurielles CLDR :
[items]
one = "{{ .Count }} item"
other = "{{ .Count }} items"
Représentées en interne par items.one et items.other pour la comparaison, puis re-sérialisées dans le format sectionné correct lors de l'écriture.
next-intl (JSON)
Structure du projet
my-app/
├── messages/
│ └── en.json ← source of truth
├── src/
│ ├── i18n/
│ │ ├── routing.ts
│ │ └── request.ts
│ └── middleware.ts
└── .env.local
Configuration
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
Crée messages/fr.json, messages/ja.json, etc. — entièrement traduits, en préservant votre structure de clés imbriquées. next-intl les détecte automatiquement.
Flux de travail de développement
{
"scripts": {
"dev": "i18n-rosetta watch & next dev",
"i18n:sync": "i18n-rosetta sync",
"i18n:audit": "i18n-rosetta audit"
}
}
react-i18next (JSON)
Structure de fichiers plats (recommandée)
locales/
├── en.json
├── fr.json
└── ja.json
{
"version": 3,
"inputLocale": "en",
"localesDir": "./locales",
"languages": ["fr", "de", "ja"]
}
npx i18n-rosetta sync
Structure de répertoires imbriqués
Si vous utilisez la structure {locale}/{namespace}.json, créez un script de synchronisation pour aplatir → traduire → désaplatir. Consultez la documentation de react-i18next pour plus de détails.