Tích hợp Framework
Hướng dẫn thiết lập từng bước cho champollion với các framework phổ biến.
- Hugo
- Next.js (next-intl)
- React (react-i18next)
Hugo (TOML / YAML / Markdown)
Cấu trúc dự án
Hugo sử dụng i18n/ cho các bản dịch chuỗi và content/ cho nội dung trang:
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
Thiết lập
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
Chi tiết dịch thuật nội dung
Front matter: Hỗ trợ cả dấu phân cách YAML (---) và TOML (+++). Dịch mặc định các trường title, description, summary, subtitle, caption, và linkTitle. Tất cả các trường khác (date, draft, tags, weight, slug, v.v.) đều được giữ nguyên. Tùy chỉnh bằng translatableFields trong cấu hình của bạn.
Bảo vệ khối (Block protection): Các khối mã (code block), Hugo shortcode, mã nội dòng (inline code) và HTML thô được tự động bảo vệ bằng các trình giữ chỗ sentinel Unicode. Chúng được giữ nguyên vẹn.
Quy ước đặt tên tệp: Tuân theo quy trình dịch theo tên tệp của Hugo:
my-post.md→my-post.fr.mdmy-post.en.md→my-post.fr.md(loại bỏ hậu tố nguồn)
Bỏ qua tệp đã có: Các tệp đã dịch hiện có sẽ không bao giờ bị ghi đè. Hãy xóa tệp đích để bắt buộc dịch lại.
Dạng số nhiều
Các tệp locale TOML và YAML hỗ trợ các dạng số nhiều CLDR:
[items]
one = "{{ .Count }} item"
other = "{{ .Count }} items"
Được biểu diễn nội bộ dưới dạng items.one và items.other để so sánh sự khác biệt (diffing), sau đó được tuần tự hóa lại thành định dạng phân đoạn chính xác khi ghi.
next-intl (JSON)
Cấu trúc dự án
my-app/
├── messages/
│ └── en.json ← source of truth
├── src/
│ ├── i18n/
│ │ ├── routing.ts
│ │ └── request.ts
│ └── middleware.ts
└── .env.local
Thiết lập
npm install --save-dev champollion
{
"version": 3,
"inputLocale": "en",
"localesDir": "./messages",
"languages": ["fr", "de", "ja", "es", "ko", "zh", "pt", "ar"]
}
npx champollion sync
Tạo ra messages/fr.json, messages/ja.json, v.v. — được dịch hoàn toàn, giữ nguyên cấu trúc khóa lồng nhau của bạn. next-intl sẽ tự động nhận diện chúng.
Quy trình phát triển
{
"scripts": {
"dev": "champollion watch & next dev",
"i18n:sync": "champollion sync",
"i18n:audit": "champollion audit"
}
}
react-i18next (JSON)
Cấu trúc tệp phẳng (khuyến nghị)
locales/
├── en.json
├── fr.json
└── ja.json
{
"version": 3,
"inputLocale": "en",
"localesDir": "./locales",
"languages": ["fr", "de", "ja"]
}
npx champollion sync
Cấu trúc thư mục lồng nhau
Nếu bạn sử dụng cấu trúc {locale}/{namespace}.json, hãy tạo một script đồng bộ để làm phẳng (flatten) → dịch (translate) → khôi phục cấu trúc lồng nhau (unflatten). Xem tài liệu react-i18next để biết thêm chi tiết.