前端开发通常需要考虑各种语言环境的支持,因此i18n(国际化)成为了必须的一部分。metalsmith-i18next是一款可以在metalsmith中使用的i18n解决方案,支持多种语言,使用简单,本文将介绍如何使用该npm包。
安装
首先需要安装metalsmith和metalsmith-i18next依赖,可使用npm进行安装:
--- ------- ------ ---------- ------------------
初始化
在metalsmith项目中,需要通过以下代码初始化metalsmith和metalsmith-i18next:
----- -------- - ---------------------- ----- ------- - ------------------------------ ------------------------ -------- ------ ------ ---------- --------- ----
其中,locales参数用于指定支持的语言列表,directory参数用于指定存放语言翻译文件的目录。
翻译文件
metalsmith-i18next支持多种文件格式的翻译文件,包括json、yaml、ini等,本文以json为例。在locales目录下,创建与支持的语言对应的json文件,如zh.json为中文文件:
- -------- ----------- -------------- --------------- -
在其他语言JSON文件中,需要保证key值与中文JSON文件中对应,将对应的值进行改动。
使用
在HTML文件中,使用i18next的t函数来调用对应的翻译。
--------- ----- ------ ------ --------- ---------- ---------- ----- ---------------- ----- ------------------ ----------- ---------------- ---- ------- ------ ------ ---------- ------- ----- ---------------- ------ ------- -------
在以上页面中,双大括号可以调用i18next的t函数来实现翻译。{{ t('title') }}会调用locales/zh.json中key值为title的翻译,需要注意的是,页面中的所有文本都需要通过t函数翻译。
总结
使用metalsmith-i18next可以让metalsmith项目具有多语言支持,使国际化操作更加简单方便,在开发多语言的网站时是很有必要的工具。
示例代码
请参考我在Github上的一个小示例。
https://github.com/yaoluu/metalsmith-i18n-demo
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066f3f1d8e776d08040be7