前言
在构建前端应用时,我们经常需要使用国际化(i18n)插件,让我们的客户端能够支持多种语言。而 Ember 是一款非常优秀的前端框架,对于它来说,i18n 也是一个常见的需求。这时候我们可以使用 Ember 的一个 npm 包叫做 ember-i18n-hierarchic。
简介
ember-i18n-hierarchic 是基于 Ember i18n,使它能够支持带有层次结构的语言文件(如 JSON 或 YAML)。这个插件是由来自 Polarity Technologies 的 Artemis Li 的开发的,现在已经成为了 Ember 团队的一部分。
安装
你可以通过以下命令来安装 ember-i18n-hierarchic:
$ ember install ember-i18n-hierarchic
使用
使用 ember-i18n-hierarchic 是非常简单的,你只需遵循以下几个步骤:
步骤一:创建语言文件
在 app/locales
目录下,创建一个新的语言文件,文件名应该以你想要支持的语言名字命名(例如 zh.json
或 en.yml
)。
接下来,你需要创建一个包含你的文本资源的 JSON 或 YAML 文件。以下是一个简单的例子:
-- -------------------- ---- ------- - --------- - ----------- -------- ------------- ---- -- --- -- ----------- - ---------- --- -- --------- - -
步骤二:使用语言文件
在你的应用程序中,你可以使用 t
帮助函数来访问你的文本资源。例如,在你的组件中可以这样使用:
-- -------------------- ---- ------- ------ --------- ---- ------------------- ------ - ------ -- ------- - ---- ----------------- ------ ------- ------------------ ----- ---------- ------------------ - -------------------------- --- -------------- - -------------------------------------- - ----- ------ --- ----------------------------- - ---
这将显示一个消息框,显示 "欢迎 John 加入我们的社区!"
步骤三:继承语言文件
有时候你的语言文件会很相似。例如,如果你正在为多个不同的国家/地区编写语言文件,它们的大多数文本资源将是相同的。在这种情况下,你可以使用继承来减少重复工作。
例如,让我们假设你有一个 “zh-Hans” 文件和一个 “zh-Hant” 文件,它们的大部分文本资源相同。你可以在 zh-Hant
文件中添加以下代码:
{ "extend": "zh-Hans", "messages": { "welcome": "歡迎 %@ 加入我們的社區!" } }
这将继承 zh-Hans
文件中的所有文本资源,并添加一个新的 messages.welcome
字段,其中文本内容已被翻译为繁体中文。
步骤四:启用 hierarchic
最后,你需要启用 ember-i18n-hierarchic
插件。在 config/environment.js
文件中,将以下行添加到你的 EmberENV
配置中:
if (environment === 'production') { ENV.i18n = { hierarchic: true }; }
这将启用 hierarchic
选项。现在你可以轻松地使用具有层次结构的语言文件了!
总结
使用 Ember i18n 可以轻松地支持您的应用程序的多语言。而使用 ember-i18n-hierarchic
插件可以使其更方便、更具可扩展性。希望这篇文章对你有所帮助!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecaa2