Framework Integration
Step-by-step setup para sa i18n-rosetta kasama ang mga popular na frameworks.
- Hugo
- Next.js (next-intl)
- React (react-i18next)
Hugo (TOML / YAML / Markdown)
Project Structure
Gumagamit ang Hugo ng i18n/ para sa string translations at content/ para sa page content:
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
Setup
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
Content Translation Details
Front matter: Sinusuportahan ang parehong YAML (---) at TOML (+++) delimiters. Tina-translate ang title, description, summary, subtitle, caption, at linkTitle by default. Ang lahat ng iba pang fields (date, draft, tags, weight, slug, etc.) ay naka-preserve. I-customize gamit ang translatableFields sa iyong config.
Block protection: Ang mga code blocks, Hugo shortcodes, inline code, at raw HTML ay automatically shielded gamit ang Unicode sentinel placeholders. Ipapasa lang ang mga ito nang untouched.
Filename convention: Sinusundan ang translation-by-filename pattern ng Hugo:
my-post.md→my-post.fr.mdmy-post.en.md→my-post.fr.md(tinatanggal ang source suffix)
Skip existing: Ang mga existing translated files ay hindi kailanman ino-overwrite. I-delete ang isang target file para i-force ang re-translation.
Plural Forms
Sinusuportahan ng TOML at YAML locales ang CLDR plural forms:
[items]
one = "{{ .Count }} item"
other = "{{ .Count }} items"
Internally represented ito bilang items.one at items.other para sa diffing, tapos ire-re-serialize sa tamang sectioned format kapag nag-write.
next-intl (JSON)
Project Structure
my-app/
├── messages/
│ └── en.json ← source of truth
├── src/
│ ├── i18n/
│ │ ├── routing.ts
│ │ └── request.ts
│ └── middleware.ts
└── .env.local
Setup
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
Gagawa ito ng messages/fr.json, messages/ja.json, etc. — fully translated, habang pini-preserve ang iyong nested key structure. Automatically itong ide-detect ng next-intl.
Development Workflow
{
"scripts": {
"dev": "i18n-rosetta watch & next dev",
"i18n:sync": "i18n-rosetta sync",
"i18n:audit": "i18n-rosetta audit"
}
}
react-i18next (JSON)
Flat File Structure (recommended)
locales/
├── en.json
├── fr.json
└── ja.json
{
"version": 3,
"inputLocale": "en",
"localesDir": "./locales",
"languages": ["fr", "de", "ja"]
}
npx i18n-rosetta sync
Nested Directory Structure
Kung ginagamit mo ang {locale}/{namespace}.json structure, gumawa ng sync script para mag-flatten → translate → unflatten. Tingnan ang react-i18next docs para sa details.