Framework-Integration
Schrittweise Einrichtung von champollion mit gängigen Frameworks.
- Hugo
- Next.js (next-intl)
- React (react-i18next)
Hugo (TOML / YAML / Markdown)
Projektstruktur
Hugo verwendet i18n/ für String-Übersetzungen und content/ für Seiteninhalte:
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
Einrichtung
npm install --save-dev champollion
{
"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
Details zur Inhaltsübersetzung
Front Matter: Unterstützt sowohl YAML- (---) als auch TOML-Trennzeichen (+++). Übersetzt standardmäßig title, description, summary, subtitle, caption und linkTitle. Alle anderen Felder (date, draft, tags, weight, slug usw.) bleiben erhalten. Anpassbar über translatableFields in Ihrer Konfiguration.
Blockschutz: Codeblöcke, Hugo-Shortcodes, Inline-Code und rohes HTML werden automatisch mithilfe von Unicode-Sentinel-Platzhaltern geschützt. Sie werden unverändert durchgereicht.
Dateinamenskonvention: Folgt Hugos Muster der Übersetzung anhand des Dateinamens:
my-post.md→my-post.fr.mdmy-post.en.md→my-post.fr.md(entfernt das Quell-Suffix)
Vorhandene überspringen: Bereits übersetzte Dateien werden niemals überschrieben. Löschen Sie eine Zieldatei, um eine erneute Übersetzung zu erzwingen.
Pluralformen
TOML- und YAML-Locales unterstützen CLDR-Pluralformen:
[items]
one = "{{ .Count }} item"
other = "{{ .Count }} items"
Intern werden sie zum Vergleichen als items.one und items.other dargestellt und beim Schreiben wieder in das korrekte abschnittsweise Format serialisiert.
next-intl (JSON)
Projektstruktur
my-app/
├── messages/
│ └── en.json ← source of truth
├── src/
│ ├── i18n/
│ │ ├── routing.ts
│ │ └── request.ts
│ └── middleware.ts
└── .env.local
Einrichtung
npm install --save-dev champollion
{
"version": 3,
"inputLocale": "en",
"localesDir": "./messages",
"languages": ["fr", "de", "ja", "es", "ko", "zh", "pt", "ar"]
}
npx champollion sync
Erstellt messages/fr.json, messages/ja.json usw. — vollständig übersetzt und unter Beibehaltung Ihrer verschachtelten Schlüsselstruktur. next-intl erkennt sie automatisch.
Entwicklungs-Workflow
{
"scripts": {
"dev": "champollion watch & next dev",
"i18n:sync": "champollion sync",
"i18n:audit": "champollion audit"
}
}
react-i18next (JSON)
Flache Dateistruktur (empfohlen)
locales/
├── en.json
├── fr.json
└── ja.json
{
"version": 3,
"inputLocale": "en",
"localesDir": "./locales",
"languages": ["fr", "de", "ja"]
}
npx champollion sync
Verschachtelte Verzeichnisstruktur
Wenn Sie die {locale}/{namespace}.json-Struktur verwenden, erstellen Sie ein Synchronisierungsskript zum Abflachen → Übersetzen → Wiederherstellen der Verschachtelung. Weitere Informationen finden Sie in der react-i18next-Dokumentation.