国际化

国际化文件

在插件里,前后端的多语言文件都存放在 src/locale 文件夹里

1|- /plugin-sample-i18n
2  |- /src
3    |- /locale      # 多语言文件夹
4      |- en_US.ts   # 英文语言
5      |- zh_CN.ts   # 中文语言

在对应的多语言文件(/src/locale/${lang}.ts)里添加翻译词条就可以了,如果是初次添加的多语言文件,需要重启应用才能生效,可以查看 app:getLang 接口来校验翻译词条是否已添加成功。

http://localhost:3000/api/app:getLang?locale=zh-CN

如何支持国际化

服务端有两个 i18n 实例 app.i18n 和 ctx.i18n

app.i18n

app.i18n 为全局 i18n 实例,一般用于 CLI 中。例如结合 inquirer 用于实现命令行的交互。

1import select from '@inquirer/select';
2import input from '@inquirer/input';
3
4export class PluginSampleI18nServer extends Plugin {
5  load() {
6    this.app.command('test-i18n').action(async () => {
7      const answer1 = await select({
8        message: 'Select a language',
9        choices: [
10          {
11            name: '中文',
12            value: 'zh-CN',
13          },
14          {
15            name: 'English',
16            value: 'en-US',
17          },
18        ],
19      });
20      await this.app.changeLanguage(answer1);
21      const answer2 = await input({
22        message: app.i18n.t('Enter your name'),
23      });
24      console.log(app.i18n.t(`Your name is {{name}}`, { name: answer2 }));
25    });
26  }
27}

ctx.i18n

全局 app.i18n 的 cloneInstance,每个请求的 ctx 完全独立,根据客户端语言响应多语言信息。

客户端请求参数可以放在 query string 里

1GET /?locale=en-US HTTP/1.1
2Host: localhost:3000

也可以放在 request headers 里(推荐)

1GET / HTTP/1.1
2Host: localhost:3000
3X-Locale: en-US

示例

1export class PluginSampleI18nServer extends Plugin {
2  load() {
3    this.app.use(async (ctx, next) => {
4      if (ctx.path === '/api/test-i18n') {
5        ctx.body = `${ctx.i18n.t('Hello')} ${ctx.i18n.t('World')}`;
6      }
7      await next();
8    });
9  }
10}

查看 http://localhost:3000/api/test-i18n?locale=zh-CN

API

TachybaseBase 的 i18n 基于 i18next 实现,详细使用说明参考 I18next API 文档,以下只列举重要的几个示例

i18n.t()

每个插件的 locale 通过 ns 区分,ns 为插件名,如:

1t('Hello', { ns: '@tachybase/plugin-sample-i18n' });

i18n.changeLanguage()

更改当前语言

1await i18n.changeLanguage('en-US');

完整插件示例