在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

louislam/uptime-kuma

菜单

国际化

相关源文件

本文档解释了 Uptime Kuma 如何实现国际化 (i18n)，以支持应用程序中的多种语言。它涵盖了翻译系统的技术架构、语言检测、区域设置管理以及如何在代码库中使用翻译功能。

概述

Uptime Kuma 使用 Vue-i18n 提供多语言支持，让全球用户能够以他们各自的母语使用该应用程序。该系统目前支持 50 多种语言，翻译内容存储在 JSON 文件中。

核心功能包括：

  • 根据浏览器设置自动检测语言
  • 通过 UI 手动选择语言
  • 支持从右到左 (RTL) 的语言
  • 在缺少翻译时回退到英语

来源： src/i18n.js1-99

语言文件

所有翻译都存储在 src/lang 目录下的 JSON 文件中。每种语言都有自己的文件，文件名使用相应的区域设置代码（例如，英语为 en.json，西班牙语为 es-ES.json 等）。

英语文件（en.json）是事实上的依据，所有其他语言文件都遵循相同的键值对结构。

支持的语言

Uptime Kuma 目前支持 50 多种语言，包括：

语言代码语言名称
ar-SY阿拉伯语
cs-CZ捷克语
zh-HK繁体中文 (香港)
de-DE德语 (德国)
es-ES西班牙语
pt-PT葡萄牙语 (葡萄牙)
pt-BR葡萄牙语 (巴西)
fr-FR法语 (法国)
ja日语
ru-RU俄语
zh-CN简体中文
ur乌尔都语
还有更多...

支持的语言的完整列表在 i18n.js 文件中的 languageList 对象中定义。

来源： src/i18n.js4-50

技术实现

初始化

i18n 系统在 src/i18n.js 中初始化。该过程包括：

  1. 导入 Vue-i18n 库
  2. 加载英语文件作为默认文件
  3. 创建所有支持语言的映射
  4. 定义 RTL 语言
  5. 使用检测到的区域设置、回退区域设置和翻译消息创建 i18n 实例

i18n 实例是使用以下设置创建的：

  • locale：根据浏览器偏好和存储的设置检测到的区域设置
  • fallbackLocale：“en”（英语），在缺少翻译时使用
  • silentFallbackWarn：true，用于在回退时抑制警告
  • silentTranslationWarn：true，用于抑制缺少翻译的警告

来源： src/i18n.js92-98

语言检测

使用 currentLocale() 函数来确定最匹配用户的区域设置

  1. 首先，它会检查 localStorage.locale 中用户选择的偏好设置
  2. 如果没有找到偏好设置，它会检查 navigator.language 中的浏览器主要语言
  3. 然后它会检查 navigator.languages 中的其他浏览器语言偏好
  4. 如果在支持的语言中找到匹配项，则返回该区域设置
  5. 如果找到通用匹配项（例如，“en”匹配“en-US”），则返回通用区域设置
  6. 如果未找到匹配项，则默认返回“en”（英语）

来源： src/i18n.js69-86

RTL 语言支持

Uptime Kuma 支持从右到左 (RTL) 的语言，例如阿拉伯语、希伯来语、波斯语和乌尔都语。 localeDirection() 函数用于确定当前区域设置是否应使用 RTL 文本方向。

rtlLangs 数组定义了哪些语言应使用 RTL 文本方向。

此函数在 UI 中使用，以应用适当的文本方向。

来源： src/i18n.js62 src/i18n.js88-90

组件中的用法

基本翻译

要在 Vue 组件中翻译文本，请使用 $t 函数和翻译键。

这将以用户选择的语言显示“删除”一词。

带变量的翻译

对于包含变量的翻译，将值数组作为第二个参数传递。

在语言文件中，相应的翻译使用占位符。

{0} 占位符将被 interval 的值替换。

复杂翻译

对于需要特殊格式或 HTML 标签的更复杂翻译，请使用 i18n-t 组件。

来源： src/components/settings/Security.vue96-100 src/components/Login.vue1-114

UI 中的语言选择

用户可以通过“设置”页面更改他们的语言偏好。当用户选择一种语言时，偏好设置会保存在 localStorage.locale 中，UI 会立即更新。

新增翻译

添加需要翻译的新文本

  1. 将新的键和英语翻译添加到 src/lang/en.json
  2. 在组件中使用 $t 函数来使用该键。

支持新语言

  1. 在 src/lang/ 中创建一个新的 JSON 文件，文件名使用区域设置代码。
  2. 在 src/i18n.js 中将该语言添加到 languageList 对象。
  3. 如果该语言是 RTL 语言，则将其添加到 rtlLangs 数组中。

常用翻译键

一些最常用的翻译键包括：

键目的
“设置”设置页面标题
“仪表板”仪表板页面标题
“保存”保存按钮文本
“取消”取消按钮文本
“删除”删除按钮文本
“是”确认对话框确认
“否”确认对话框拒绝
“登录”登录按钮文本
“登出”登出按钮文本

来源： src/lang/es-ES.json1-680 src/lang/hu.json1-587 src/lang/pt-BR.json1-470

语言文件结构

每个语言文件都遵循与英语文件（en.json）相同的结构。顶层键 languageName 定义了语言在其原生脚本中的显示名称。

文件的其余部分包含应用程序中所有可翻译文本的键值对。

来源： src/lang/es-ES.json1-4 src/lang/hu.json1-4 src/lang/pt-BR.json1-4

结论

Uptime Kuma 的国际化系统为在整个应用程序中支持多种语言提供了一个强大的框架。Vue-i18n、结构化的语言文件和自动语言检测的结合，为世界各地的用户创造了无缝的体验。

有关其他 UI 组件和系统的更多信息，请参阅 前端组件文档。