ข้ามไปยังเนื้อหาหลัก

การผสานการทำงานกับ Framework

การตั้งค่า i18n-rosetta ทีละขั้นตอนสำหรับ framework ยอดนิยม

Hugo (TOML / YAML / Markdown)​

โครงสร้างโปรเจกต์​

Hugo ใช้ i18n/ สำหรับการแปลสตริง และ 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

การตั้งค่า​

npm install --save-dev i18n-rosetta
i18n-rosetta.config.json
{
  "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

รายละเอียดการแปลเนื้อหา​

Front matter: รองรับตัวคั่นทั้งแบบ YAML (---) และ TOML (+++) โดยจะแปล title, description, summary, subtitle, caption และ linkTitle เป็นค่าเริ่มต้น ฟิลด์อื่นๆ ทั้งหมด (date, draft, tags, weight, slug ฯลฯ) จะถูกเก็บไว้ตามเดิม คุณสามารถปรับแต่งได้ด้วย translatableFields ใน config ของคุณ

Block protection: Code blocks, Hugo shortcodes, inline code และ raw HTML จะถูกป้องกันโดยอัตโนมัติโดยใช้ Unicode sentinel placeholders ซึ่งจะถูกส่งผ่านโดยไม่มีการเปลี่ยนแปลงใดๆ

Filename convention: เป็นไปตามรูปแบบการแปลด้วยชื่อไฟล์ของ Hugo:

  • my-post.md → my-post.fr.md
  • my-post.en.md → my-post.fr.md (ตัดคำต่อท้ายของต้นฉบับออก)

Skip existing: ไฟล์ที่แปลแล้วจะไม่มีการเขียนทับ หากต้องการบังคับให้แปลใหม่ ให้ลบไฟล์ปลายทางทิ้ง

รูปพหูพจน์ (Plural Forms)​

Locale แบบ TOML และ YAML รองรับรูปพหูพจน์แบบ CLDR:

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

ในระบบภายในจะแสดงเป็น items.one และ items.other สำหรับการเปรียบเทียบความแตกต่าง (diffing) จากนั้นจะถูกแปลงกลับ (re-serialized) ให้อยู่ในรูปแบบส่วนที่ถูกต้องเมื่อทำการเขียนไฟล์