跳至主要内容

雙語功能使用指南

🎯 快速開始

1. 檢查語言切換器

重新啟動開發伺服器後,在瀏覽器中:

  • 查看 Navbar 右側應該會看到語言切換器(顯示「繁體中文」和「English」)
  • 如果沒有看到,請按 Ctrl + F5 強制重新載入

2. 建立英文版文檔

步驟 A:建立對應的資料夾結構

例如,要為 docs/Website/TailorMed/2025/About us/about.md 建立英文版:

  1. i18n/en/docusaurus-theme-classic/ 下建立相同的資料夾結構:

    i18n/en/docusaurus-theme-classic/
    Website/
    TailorMed/
    2025/
    About us/
    about.md ← 英文版檔案
  2. 複製中文版內容並翻譯:

    • docs/Website/TailorMed/2025/About us/about.md 複製內容
    • 貼到 i18n/en/docusaurus-theme-classic/Website/TailorMed/2025/About us/about.md
    • 將內容翻譯成英文

步驟 B:保持相同的檔案結構

重要:英文版的檔案路徑必須與中文版對應!

中文版:docs/Website/TailorMed/2025/About us/about.md
英文版:i18n/en/docusaurus-theme-classic/Website/TailorMed/2025/About us/about.md

📝 實際範例

範例 1:翻譯 intro.md

中文版位置:

docs/intro.md

建立英文版:

  1. 建立資料夾:i18n/en/docusaurus-theme-classic/
  2. 複製檔案:將 docs/intro.md 複製到 i18n/en/docusaurus-theme-classic/intro.md
  3. 翻譯內容:將 Markdown 內容翻譯成英文

範例 2:翻譯 About us/about.md

中文版位置:

docs/Website/TailorMed/2025/About us/about.md

建立英文版:

  1. 建立完整資料夾結構:

    i18n/en/docusaurus-theme-classic/Website/TailorMed/2025/About us/
  2. 複製並翻譯:

    • 複製 docs/Website/TailorMed/2025/About us/about.md
    • 貼到 i18n/en/docusaurus-theme-classic/Website/TailorMed/2025/About us/about.md
    • 翻譯內容

🔄 使用語言切換

  1. 在瀏覽器中:

    • 點擊 Navbar 右側的語言切換器
    • 選擇「English」切換到英文版
    • 選擇「繁體中文」切換回中文版
  2. URL 變化:

    • 中文版:http://localhost:3000/docs/intro
    • 英文版:http://localhost:3000/en/docs/intro
  3. 如果某個頁面沒有英文版:

    • 會自動顯示中文版(不會顯示 404)

⚙️ 翻譯 UI 文字

如果需要翻譯 Navbar、Footer 等 UI 文字,編輯:

  • i18n/en/docusaurus-theme-classic/navbar.json - Navbar 英文翻譯
  • i18n/en/docusaurus-theme-classic/footer.json - Footer 英文翻譯
  • i18n/zh-TW/docusaurus-theme-classic/navbar.json - Navbar 中文翻譯
  • i18n/zh-TW/docusaurus-theme-classic/footer.json - Footer 中文翻譯

🚀 快速測試

  1. 建立一個測試英文文檔:

    # 建立資料夾
    mkdir -p i18n/en/docusaurus-theme-classic

    # 複製 intro.md 並翻譯
    cp docs/intro.md i18n/en/docusaurus-theme-classic/intro.md
  2. 編輯英文版內容:

    • 打開 i18n/en/docusaurus-theme-classic/intro.md
    • 將內容翻譯成英文
  3. 測試:

    • 重新啟動開發伺服器
    • 切換到英文,應該能看到英文內容

💡 注意事項

  1. 檔案結構必須一致

    • 英文版的資料夾結構必須與中文版完全對應
  2. 檔案名稱必須相同

    • about.md 對應 about.md(不能改成 about-en.md
  3. 圖片路徑

    • 圖片路徑使用相對路徑,不需要修改
    • 例如:![圖片](image.png) 在兩個版本中都可以使用
  4. Frontmatter

    • 可以保持相同的 frontmatter,或根據語言調整

📌 建議的工作流程

  1. 先完成中文版

    • 確保所有中文文檔都已完成
  2. 批量建立英文版資料夾結構

    • 一次性建立所有需要的資料夾
  3. 逐個翻譯

    • 按照優先順序翻譯文檔
  4. 測試

    • 切換語言檢查每個頁面