本文档介绍了 GitHub Readme Stats 中使用的国际化(i18n)系统。该系统能够以多种语言显示卡片内容,提供全球化的用户体验。本文涵盖了翻译数据结构、I18n 类实现、支持的区域设置以及翻译如何集成到卡片渲染过程中。
本页仅关注语言翻译机制。有关卡片自定义选项的信息,请参阅 布局和显示选项。
GitHub Readme Stats 中的 i18n 系统遵循简单的架构。翻译字符串存储在结构化的 JavaScript 对象中,I18n 类根据用户的区域设置偏好处理查找和应用翻译。
图示:国际化请求流程
来源:src/translations.js1-731 src/cards/stats-card.js260-263
翻译按卡片类型和消息键在 translations.js 文件中组织。每种卡片类型都有自己的翻译对象,其中包含不同文本元素的键。
图示:翻译数据组织
每个消息对象结构如下
例如,对于 stats card 标题
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 类管理翻译查找。它使用用户的区域设置偏好和相关的翻译数据进行初始化。该类提供了一个 t() 方法,用于通过键查找翻译的字符串。
图示:翻译查找过程
如果找不到特定键/区域设置组合的翻译,I18n 类将回退到英语。
来源:src/cards/stats-card.js260-263
每个卡片渲染器都通过以下方式与 i18n 系统集成:
t() 方法检索翻译的字符串stats card 广泛使用了国际化,翻译了以下内容:
来自 Stats Card 渲染器的示例
来源:src/cards/stats-card.js260-346
某些语言的翻译需要更多的水平空间。系统包含逻辑来检测这些“长区域设置”并相应地调整布局
这可确保翻译不会与其他卡片元素重叠。
来源:src/cards/stats-card.js348-383
下表显示了相同文本在不同语言中的翻译示例
| 键 | 英语 | 西班牙语 | 日语 | 俄语 |
|---|---|---|---|---|
| statcard.totalstars | 获得的总 stars | Estrellas 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
该系统设计为易于扩展以支持新翻译。要添加新语言:
translations.js 中的翻译对象longLocales 数组中该 isLocaleAvailable() 函数用于确定请求的区域设置是否受支持
来源:src/translations.js713-722 readme.md365
存储库包含用于验证翻译是否正确应用的测试。这确保了 i18n 系统的更改不会破坏现有功能。
测试验证:
来源:tests/renderStatsCard.test.js376-407
当带翻译的卡片被渲染时,该过程通常遵循以下步骤:
图示:翻译渲染过程
来源:src/cards/stats-card.js202-542
该翻译系统设计得轻巧且高效
statCardLocales() 会使用用户的名字动态生成翻译,以避免存储所有可能的组合