语言切换原理#

1. 语言配置方式#

语言切换主要通过 src/config.ts 文件中的 siteConfig.lang 属性进行配置：

1
export const siteConfig: SiteConfig = {
2
  lang: "zh-CN", // 语言代码，例如 'en', 'zh_CN', 'ja' 等
3
  // ... 其他配置
4
};

2. 多语言实现原理#

1
const map: { [key: string]: Translation } = {
2
  zh_cn: zh_CN,
3
  zh_tw: zh_TW,
4
  en: en,
5
  ja: ja,
6
  // ... 其他语言映射
7
};

1
export function i18n(key: I18nKey): string {
2
  const lang = siteConfig.lang || "en"; // 从配置中获取语言设置
3
  return getTranslation(lang)[key]; // 获取对应语言的翻译文本
4
}

3. 实际使用方式#

在组件中通过 i18n() 函数调用翻译文本：

1
{i18n(I18nKey.tags)}

4. 切换语言的方法#

要切换网站显示语言，只需修改 src/config.ts 文件中的 lang 值：

1
// 显示简体中文
2
lang: "zh-CN"
3

4
// 显示繁体中文
5
lang: "zh-TW"
6

7
// 显示英文
8
lang: "en"
9

10
// 显示日文
11
lang: "ja"

5. 支持的语言列表#

目前模板支持以下语言：

• 英语 (en)
• 简体中文 (zh-CN)
• 繁体中文 (zh-TW)
• 日语 (ja)
• 韩语 (ko)
• 泰语 (th)
• 越南语 (vi)
• 印度尼西亚语 (id)
• 土耳其语 (tr)
• 西班牙语 (es)

6. 自定义语言#

如果您需要添加新的语言支持：

1. 在 src/i18n/languages/ 目录下创建新的语言文件
2. 参照现有文件格式定义所有翻译键值对
3. 在 src/i18n/translation.ts 中添加新语言的映射
4. 在 src/config.ts 中设置 lang 为新语言代码