跳至主要内容

Docusaurus 雙語設定說明

✅ 已完成的設定​

  1. 已更新 docusaurus.config.js

    • 加入英文 (en) 和繁體中文 (zh-TW) 支援
    • 設定預設語言為繁體中文

  2. 已建立翻譯檔案

    • 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. 文檔翻譯方式​

方式 A：分開的檔案（推薦）

在 docs/ 資料夾中，中文版文件直接放在 docs/ 下，英文版放在 i18n/en/docusaurus-theme-classic/ 下：

docs/
  intro.md                    # 中文版
  Website/
    TailorMed/
      2025/
        About us/
          about.md            # 中文版

i18n/
  en/
    docusaurus-theme-classic/
      intro.md                # 英文版
      Website/
        TailorMed/
          2025/
            About us/
              about.md        # 英文版

方式 B：使用 frontmatter 標記語言

在同一個檔案中使用 frontmatter：

---
title: 標題
locale: zh-TW
---

內容...

2. 建立英文版文檔​

  1. 複製中文文檔到英文資料夾

    # 例如：複製 about.md
    # 從：docs/Website/TailorMed/2025/About us/about.md
    # 到：i18n/en/docusaurus-theme-classic/Website/TailorMed/2025/About us/about.md

  2. 翻譯內容

    • 將 Markdown 內容翻譯成英文
    • 保持相同的檔案結構和 frontmatter

3. 語言切換器​

設定完成後，Navbar 會自動顯示語言切換器，讓用戶可以在繁體中文和英文之間切換。

4. URL 結構​

  • 繁體中文（預設）：/docs/intro
  • 英文：/en/docs/intro

🔧 產生完整翻譯模板（可選）​

如果需要產生完整的翻譯模板，可以執行：

npm run write-translations -- --locale en

這會自動掃描所有需要翻譯的文字並產生模板檔案。

📌 注意事項​

  1. 檔案結構必須一致

    • 英文版的檔案路徑必須與中文版對應
    • 例如：docs/Website/.../about.md 對應 i18n/en/docusaurus-theme-classic/Website/.../about.md

  2. 如果某個語言版本缺少文件

    • 會自動顯示為預設語言（繁體中文）

  3. 搜尋功能

    • 搜尋會根據當前語言過濾結果
    • 已設定支援中英文搜尋

🚀 測試雙語功能​

  1. 重新啟動開發伺服器：

    npm start

  2. 在瀏覽器中查看：

    • 應該會在 Navbar 右側看到語言切換器
    • 點擊可以切換語言

  3. 建立一個測試的英文文檔：

    • 在 i18n/en/docusaurus-theme-classic/ 下建立對應的英文版文件
    • 切換到英文後應該能看到英文內容