实战CloudIDE插件开发-国际化
插件框架提供了丰富的国际化API,本文将分别对纯后端插件(backend类型插件)以及带界面的通用插件(generic类型插件)的国际化方式进行详细介绍。
纯后端插件(backend类型插件)
纯后端插件在创建完之后在插件根目录下默认生成了package.nls.json和package.nls.zh-cn.json文件,package.nls.json文件用来记录默认情况下的翻译词条,比如没有找到对应语言的翻译文件插件框架将默认采用该文件中的词条。package.nls.zh-cn.json则是中文简体的翻译词条文件,如果插件需要支持其他语言也可以自行添加翻译文件。另外该类型插件在src目录下只有一个plugin.ts文件,该文件默认已经为开发者提供了国际化样例,插件的本地化翻译只需要使用头部引入的localize方法。
localize方法需要提供了一个key参数来指定使用国际化文件中的词条索引键值,后续的不定参数用来对翻译词条中的占位符进行替换,词条中支持使用"{0} {1} {2}"这样的格式进行占位,localize方法的第二个参数开始会被依次替换到占位符中。
localize(key: string, ...args: any[]): string;
比如我们在packe.nls.json中定义了如下的翻译词条:
{
"plugin.hello": "Hello {0}!"
}
那么我们使用如下代码就可以将词条填充为: Hello World!
localize('plugin.hello', 'World');
后端插件的国际化统一使用localize方法,开发者在添加了自己的源文件之后只需要使用如下语句将localize方法导入便可使用,非常方便。
import { localize } from '@cloudide/nls';
通用插件(generic类型的插件)
通用插件本质上是后端插件的一种特殊扩展类型,阅读过实战CloudIDE插件开发相关文章的开发者一定对其中的前后端概念有比较深入的了解,这里就不再进行赘述,有疑问的开发者可以通过阅读系列文章进行了解。通用插件在创建之后默认的src目录下面也会生成一个plugin.ts文件,该文件中的国际化和后端插件一样,可以直接使用localize函数。
前端类和后端类中的国际化方法
除此之外通用插件还有自己的前端和后端类,在后端类中,我们依然可以通过导入localize函数的方式来进行本地化翻译,但是为了保持插件前后端API的一致性,我们还在前后端内置的plugin成员变量中实现了localize方法,在继承了AbstractFrontend的前端类(默认会生成一个src/browser/fronted.ts)和继承了AbstractBackend的后端类(默认会生成一个src/browser/backend.ts)中可以使用this.plugin.localize方法进行本地化翻译。
this.plugin.localize('plugin.hello', 'world');
页面文件中的国际化方法
通用插件可以使用ejs和pug引擎来渲染界面,无论是ejs还是pug引擎插件框架都为开发者提供了一个l10n内置对象,里面存储了当前所选语言的翻译词条列表。
对于选择ejs引擎来做界面渲染的开发者可以在ejs文件中使用如下方式来对需要本地化的文案进行翻译:
<%= l10n['plugin.hello'] %>
对于使用pug引擎的开发者可以使用如下方式:
#{l10n['plugin.index.title']}
通过上面介绍的方式我们可以轻松实现插件的国际化能力,有兴趣的开发者可以尝试创建插件并测试。
- 点赞
- 收藏
- 关注作者
评论(0)