菜单

国际化

相关源文件

目的与范围

本文档介绍了 GitHub Readme Stats 中使用的国际化(i18n)系统。该系统能够以多种语言显示卡片内容,提供全球化的用户体验。本文涵盖了翻译数据结构、I18n 类实现、支持的区域设置以及翻译如何集成到卡片渲染过程中。

本页仅关注语言翻译机制。有关卡片自定义选项的信息,请参阅 布局和显示选项

架构概述

GitHub Readme Stats 中的 i18n 系统遵循简单的架构。翻译字符串存储在结构化的 JavaScript 对象中,I18n 类根据用户的区域设置偏好处理查找和应用翻译。

图示:国际化请求流程

来源:src/translations.js1-731 src/cards/stats-card.js260-263

翻译数据结构

翻译按卡片类型和消息键在 translations.js 文件中组织。每种卡片类型都有自己的翻译对象,其中包含不同文本元素的键。

图示:翻译数据组织

每个消息对象结构如下

  • 主键是消息标识符(例如,“statcard.title”)
  • 每个消息标识符包含一个以区域设置代码作为键的对象
  • 区域设置代码键映射到翻译的字符串

例如,对于 stats card 标题

来源:src/translations.js15-388

支持的语言环境

GitHub Readme Stats 支持多种语言。下表显示了可用的区域设置代码

区域码语言
en英语
cn中文
zh-tw中文(台湾)
ar阿拉伯语
cs捷克语
de德语
bn孟加拉语
es西班牙语
fr法语
hu匈牙利语
it意大利语
ja日语
kr韩语
nl荷兰语
pt-pt葡萄牙语(葡萄牙)
pt-br葡萄牙语(巴西)
np尼泊尔语
el希腊语
ru俄语
uk-ua乌克兰语
id印度尼西亚语
ml马拉雅拉姆语
my缅甸语
sk斯洛伐克语
tr土耳其语
pl波兰语
uz乌兹别克语
vi越南语
se瑞典语

要将特定区域设置应用于卡片,请将 locale 参数添加到 API URL

https://github-readme-stats.vercel.app/api?username=anuraghazra&locale=fr

来源:src/translations.js712-731 readme.md313-363

I18n 类

I18n 类管理翻译查找。它使用用户的区域设置偏好和相关的翻译数据进行初始化。该类提供了一个 t() 方法,用于通过键查找翻译的字符串。

图示:翻译查找过程

如果找不到特定键/区域设置组合的翻译,I18n 类将回退到英语。

来源:src/cards/stats-card.js260-263

与卡片渲染器的集成

每个卡片渲染器都通过以下方式与 i18n 系统集成:

  1. 使用用户的区域设置偏好创建 I18n 实例
  2. 使用 t() 方法检索翻译的字符串
  3. 将翻译应用于卡片元素

stats card 广泛使用了国际化,翻译了以下内容:

  • 卡片标题
  • 统计标签(star、commit、PR、issue 等)
  • 排名标题

来自 Stats Card 渲染器的示例

来源:src/cards/stats-card.js260-346

长区域设置的特殊处理

某些语言的翻译需要更多的水平空间。系统包含逻辑来检测这些“长区域设置”并相应地调整布局

这可确保翻译不会与其他卡片元素重叠。

来源:src/cards/stats-card.js348-383

翻译示例

下表显示了相同文本在不同语言中的翻译示例

英语西班牙语日语俄语
statcard.totalstars获得的总 starsEstrellas totalesスターされた数Всего звезд
statcard.commits总提交次数Commits totales合計コミット数Всего коммитов
statcard.prs总 PR 数量PRs totales合計 PRВсего pull request`ов
langcard.title最常用的语言Lenguajes más usados最もよく使っている言語Наиболее часто используемые языки

来源:src/translations.js79-172 src/translations.js457-487

新增翻译

该系统设计为易于扩展以支持新翻译。要添加新语言:

  1. 将区域设置代码添加到 translations.js 中的翻译对象
  2. 为所有消息键提供翻译
  3. 如果语言需要额外的水平空间,请将其添加到 longLocales 数组中

isLocaleAvailable() 函数用于确定请求的区域设置是否受支持

来源:src/translations.js713-722 readme.md365

测试翻译

存储库包含用于验证翻译是否正确应用的测试。这确保了 i18n 系统的更改不会破坏现有功能。

测试验证:

  • 翻译键是否正确映射到字符串
  • 区域设置参数是否正确更改了语言
  • 特殊字符是否正确显示
  • 长区域设置是否得到妥善处理

来源:tests/renderStatsCard.test.js376-407

带翻译的渲染过程

当带翻译的卡片被渲染时,该过程通常遵循以下步骤:

图示:翻译渲染过程

来源:src/cards/stats-card.js202-542

性能考量

该翻译系统设计得轻巧且高效

  1. 翻译仅在需要时加载到内存中
  2. 对于 stats card,函数 statCardLocales() 会使用用户的名字动态生成翻译,以避免存储所有可能的组合
  3. 所有翻译都存储在一个 JavaScript 文件中,以简化代码

来源:src/translations.js15-389