i18n

i18n

熱門

結合 react-i18next 的 LobeHub 多語系(i18n)指南。適用於處理前端使用者介面字串、語系 key、命名空間(namespaces)、useTranslation、t()、變數插值(interpolation)、zh-CN/en-US 預覽、硬編碼 UI 文案,或執行 bun run i18n 時使用。

8.1萬星標
1.6萬分支
更新於 2026/8/6
SKILL.md
唯讀
名稱
i18n
描述

結合 react-i18next 的 LobeHub 多語系(i18n)指南。適用於處理前端使用者介面字串、語系 key、命名空間(namespaces)、useTranslation、t()、變數插值(interpolation)、zh-CN/en-US 預覽、硬編碼 UI 文案,或執行 bun run i18n 時使用。

LobeHub 國際化指南

  • 預設語言:英文(en-US)
  • 框架:react-i18next
  • 僅修改 packages/locales/src/default/ 目錄下的檔案 — 切勿直接修改 locales/ 中的 JSON 檔案(人工手寫的 en-US/zh-CN 預覽檔除外)
  • 預設將其他語系檔案的生成交由每日執行的 auto-i18n.yml 工作流程處理;僅在急需語系檔時,才手動執行 bun run i18n

Key 命名規範

採用點記法(dot notation)的扁平化 Key(請勿使用巢狀物件):

// ✅ 正確
export default {
  'alert.cloud.action': '立即體驗',
  'sync.actions.sync': '立即同步',
  'sync.status.ready': '已連線',
};

// ❌ 避免巢狀物件
export default {
  alert: { cloud: { action: '...' } },
};

命名模式: {feature}.{context}.{action|status}

參數使用: 使用 {{variableName}} 語法

'alert.cloud.desc': '我們提供 {{credit}} 額度點數',

避免 Key 衝突:

// ❌ 衝突範例
'clientDB.solve': '自助解決',
'clientDB.solve.backup.title': '資料備份',

// ✅ 解決方案
'clientDB.solve.action': '自助解決',
'clientDB.solve.backup.title': '資料備份',

開發流程

  1. packages/locales/src/default/{namespace}.ts 新增 Key
  2. packages/locales/src/default/index.ts 匯出新的命名空間
  3. 開發預覽:手動翻譯 locales/zh-CN/{namespace}.jsonlocales/en-US/{namespace}.json
  4. 其餘語系的翻譯交由 .github/workflows/auto-i18n.yml 處理,該工作流程每日定期運行並會自動發起翻譯 PR
  5. 僅在目前分支急需翻譯結果時,才手動執行 bun run i18n;該指令執行較慢且需要設定 OPENAI_API_KEY

使用方式

import { useTranslation } from 'react-i18next';

const { t } = useTranslation('common');

t('newFeature.title');
t('alert.cloud.desc', { credit: '1000' });

// 使用多個命名空間
const { t } = useTranslation(['common', 'chat']);
t('common:save');

常用的命名空間

最常使用: common(共用 UI)、chat(對話功能)、setting(設定)

其他:auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic