4.1.10 多语言化

优质

小牛编辑

136浏览

2023-12-01

编辑器扩展系统中内置的多语言方案允许你配置多份语言的键值映射，并根据编辑器当前的语言设置在插件界面显示不同语言的文字。

要启用多语言功能（以下简称 i18n），请在扩展包的目录下新建一个名叫 i18n 的文件夹，并为每种语言添加一个相应的 JavaScript 文件，作为键值映射数据。数据文件名应该和语言的代号一致，如 en.js 对应英语映射数据。

下面是键值映射数据源的例子：

// en.js
module.exports = {
  'search': 'Search',
  'edit': 'Edit',
};

// zh.js
module.exports = {
  'search': '搜索',
  'edit': '编辑',
};

该文件将会将包含的映射注册到 i18n 的全局表里以扩展包名命名的部分里，假设包名为 foobar，则对应搜索文字的完整 key 为 foobar.search。

显示对应语言的文本

在脚本中使用

在 JavaScript 脚本中，你可以通过 Editor.T 接口获取当前语言对应的翻译后的文本：

// NOTE: my package name is "foobar"
Editor.T('foobar.search');

在编辑器面板的模板定义文件里，也可以直接使用这个接口：

// NOTE: my package name is "foobar"
Editor.Panel.extend({
  template: `
    <div class="btn">${Editor.T('foobar.edit')}</div>
  `
});

在菜单项中使用

在扩展包的 package.json 中注册菜单路径时支持 i18n 格式的路径，该类路径以 i18n:${key} 的形式表示。我们可以写 i18n:MAIN_MENU.package.title/foobar/i18n:foobar.edit，Cocos Creator 会帮助我们查找对应的 i18n 字符串并进行替换。

其中 MAIN_MENU.package.title 是 Cocos Creator 内置主菜单里的一级菜单名，为了方便大家使用插件，请尽量将扩展包的菜单注册到这个一级菜单下面，上述菜单路径变成用户实际看到的菜单路径就是 扩展/foobar/编辑。