如何為 App 或網站加入多種語言

要為 App 加入多種語言，首先將所有用戶看到嘅介面文字放入翻譯檔案（每種語言一個），用 i18n 函式庫載入，並加入一個會記住選擇嘅語言切換器。如果公開頁面需要被搜尋到，每種語言應該有獨立網址，例如 /fr/，並用 hreflang 標籤連結各個版本。之後再處理人哋常常忘記嘅部分：日期、數字同貨幣、某些語言較長嘅文字、由右至左書寫嘅語言，以及儲存喺資料庫入面嘅內容。

你會聽到嘅詞語

• 國際化（i18n）：預備程式碼去支援任何語言，即係唔寫死字串、按地區格式化、排版靈活。「18」代表 i 同 n 之間嘅字母數目。
• 本地化（l10n）：為某一種語言或市場調整 App，主要係翻譯，有時亦包括貨幣、圖片同法律文字。
• 地區設定（Locale）：語言加上（可選）地區，例如 en-GB 或 pt-BR。

國際化只需要做一次，之後每加一種新語言，大部分工作就只剩翻譯。

方案同取捨

大部分 App 最好以標準嘅 i18n 函式庫加翻譯檔案作為基礎。如果你想，可以用機器或 AI 翻譯做草稿，然後由流利嘅母語人士審閱客戶最常見嘅內容。

多語言 App 嘅各個部分

翻譯檔案

程式碼唔會直接寫 <h1>Welcome back</h1>，而係寫 t('dashboard.welcome')，然後每種地區設定嘅檔案入面都有對應嘅文字：

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

變數請用佔位符，唔好將句子碎片串接起來，因為唔同語言嘅詞序唔同。另外要使用函式庫嘅複數規則：英文只有兩種形式（1 item、2 items），但有啲語言有三種、四種或者更多。

日期、數字同金額格式

唔好手動格式化呢啲嘢。瀏覽器內置嘅 Intl API 可以按任何地區設定格式化：英文嘅 1,234.5 喺德文係 1.234,5；日期嘅日同月次序會轉換；貨幣符號嘅位置亦會改變。日期請以 UTC 儲存，金額則以數字加貨幣代碼儲存，只喺顯示時格式化。

可伸縮嘅排版

翻譯後嘅文字通常比英文長，德文同芬蘭文特別明顯。避免固定闊度嘅按鈕同被截短嘅標籤，並用最長嘅語言測試。

由右至左嘅語言

阿拉伯文、希伯來文、波斯文同烏爾都文都係由右至左書寫。遇到呢啲地區設定，請喺頁面上設定 dir="rtl"，並使用 CSS 邏輯屬性（例如用 margin-inline-start 代替 margin-left；喺 Tailwind 就用 ms-4 代替 ml-4），咁排版就會自動鏡像。箭嘴等帶有方向性嘅圖示亦需要翻轉。

語言切換器同偵測

每一頁都要有語言切換器，並以各語言自己嘅名稱標示（例如「Deutsch」「Français」「العربية」），唔好用國旗，因為國旗代表國家，唔係語言。首次到訪時可以偵測瀏覽器偏好嘅語言，建議一個對應版本，但訪客明確作出嘅選擇要優先，並且要記住。

網址同 SEO

如果你想喺搜尋結果中出現某啲頁面，每種語言都需要獨立網址。截至 2026 年 9 月，Google 對多語言網站嘅指引如下：

• 每種語言獨立網址：用子目錄（example.com/fr/）最簡單；子網域同國家網域亦可以。不建議用 URL 參數（?lang=fr）。
• 唔好只靠 Cookie 或瀏覽器設定切換語言，Google 嘅爬蟲可能永遠見唔到其他版本。
• 唔好按語言自動轉址，應該改為喺各版本之間提供連結。
• 使用 hreflang 告訴 Google 邊啲頁面係邊啲頁面嘅翻譯。每個版本都必須列出自己同其他所有版本，否則註解可能會被忽略。另外為後備頁面加入 x-default。
• Google 係根據頁面可見嘅內容判斷語言，而唔係 lang 或 hreflang 屬性，所以要翻譯成個頁面，而唔係只翻譯選單。

每個版本仍然要設定 <html lang="fr">，因為螢幕閱讀器會用佢嚟決定讀音，呢個係無障礙嘅要求。

登入後嘅 App 畫面通常唔需要被編入索引，所以呢啲畫面將語言儲存喺用戶嘅個人檔案入面就得。如果要令公開頁面先被爬取，可以參考 為 AI 生成嘅網站做 SEO。

資料庫內嘅內容

介面文字儲存喺檔案入面，但產品名稱、Blog 文章同分類等內容則儲存於資料庫。兩種常見做法：

• 翻譯表：product_translations (product_id, locale, name, description)。結構清晰，適合多種語言。
• 每個欄位用一個 JSON 欄：name: {"en": "...", "fr": "..."}。語言數目少時較簡單。

要預先決定翻譯缺少時點算。一般而言應該退回預設語言，而唔係顯示空白。

電郵同通知

為每位用戶儲存佢嘅語言，並用於電郵、通知同 PDF。好容易將 App 翻譯咗，卻忘咗歡迎電郵仍然係英文。

有效嘅提示詞

用 react-i18next 加入國際化。將每一段用戶看到嘅字串移入 locales/en.json，並使用有命名空間嘅鍵名。用插值同複數規則代替字串串接，並用當前地區設定，以 Intl 格式化日期、數字同價錢。暫時唔好改動任何字句。

加入法文同德文。公開宣傳頁面使用 /fr/ 同 /de/ 網址前綴，英文放喺根目錄，每一頁都加入 hreflang 連結（包括自己同 x-default），並為每頁設定 html lang。加入一個語言切換器，顯示每種語言自己嘅名稱。登入後嘅頁面則將語言儲存於用戶嘅個人檔案。

加入阿拉伯文，並支援由右至左：為阿拉伯文設定 dir="rtl"，將左右邊距同內距改用邏輯屬性，鏡像有方向性嘅圖示，並確認表單同表格仍然讀得順。

逐步做法

1. 按真實需求揀第一種額外語言，例如你嘅訪客或客戶主要喺邊度。
2. 將程式碼國際化：字串移入檔案，加入複數同 Intl 格式化。先只用英文推出，並確認冇改變任何嘢。
3. 決定公開頁面嘅網址結構，並加入 hreflang。
4. 翻譯：用機器或 AI 翻譯做草稿，再由流利嘅母語人士審閱。要為譯者提供語境，例如「Book」喺一個畫面係名詞，喺另一個畫面就係動詞。
5. 翻譯資料庫內容，並設定後備方案。
6. 本地化其餘部分：電郵、錯誤訊息、法律頁面，以及圖片內嘅文字。
7. 喺手機寬度測試每種語言，如適用亦要測試由右至左嘅排版。
8. 建立流程，確保新功能推出時已附上翻譯，而唔係幾個月之後先補。

常見錯誤

• 串接句子（"You have " + n + " messages"），喺其他語言會出錯。
• 元件入面仍然有寫死嘅文字，包括錯誤訊息同驗證字串。
• 手動格式化日期同價錢。
• 用國旗代表語言，以及會令人卡喺錯誤版本嘅自動轉址。
• 希望被索引嘅頁面全部共用一個網址。
• 缺少 hreflang 嘅回傳連結，令 Google 忽略呢啲註解。
• 只翻譯介面，唔翻譯內容，或者反過來。
• 未經審閱嘅機器翻譯，用喺價錢、法律同結帳頁面。

多語言檢查清單

• 冇寫死用戶可見嘅字串；已使用複數規則同佔位符
• 日期、數字同貨幣用 Intl 格式化
• 每頁都有以各語言自己名稱顯示嘅語言切換器，並會記住選擇
• 公開頁面每種語言獨立網址；冇強制轉址
• 每個版本都有 hreflang，包括自己同 x-default
• 每頁都設定 html lang（如需要，亦設定 dir="rtl"）
• 資料庫內容已翻譯，並有合理嘅後備方案
• 電郵同通知以用戶嘅語言發送
• 面向客戶嘅文字已由流利嘅母語人士審閱

Mythex 上嘅多語言

喺 Mythex，你係喺對話中要求加入語言，並冇獨立嘅翻譯面板，所以上面嘅提示詞可以直接使用。要先完成國際化一步，並喺 Preview 中檢查，然後先加入語言；呢個係一項大型重構，而檢查點可以令你萬一出錯時回復（對話同檢查點）。如果你想 App 用 AI 或翻譯 API 自動翻譯內容，就會使用你自己嘅 API 金鑰，並儲存於專案設定入面（環境變數同機密）；如何使用 LLM API 會解釋相關費用。新語言準備好之後再發布一次。

常見問題