#Internationalization

#Internationalization Files

In plugins, multi-language files for both frontend and backend are stored in the src/locale folder.

|- /plugin-i18n
  |- /src
    |- /locale      # Multi-language folder
      |- en-US.ts   # English language
      |- zh-CN.ts   # Chinese language

Add translation entries in the corresponding multi-language files (/src/locale/${lang}.ts). If it's the first time adding a multi-language file, you need to restart the application for it to take effect. You can check the app:getLang API to verify if translation entries have been added successfully.

Default URL: http://localhost:13000/api/app:getLang?locale=zh-CN

#i18n Related APIs

• server
  • app.i18n
  • app.t(text, options)
  • ctx.i18n
  • ctx.t(text, options)
  • plugin.t()
• client
  • ctx.i18n
  • ctx.t(text, options)
  • plugin.t()
  • useT()
• utils
  • tExpr(text, options)
• react-i18next
  • useTranslation(ns)
  • withTranslation(ns)

#Server

#app.i18n server

app.i18n is the global i18n instance, generally used in CLI. For example, combined with inquirer for implementing command-line interactions.

import select from '@inquirer/select';
import input from '@inquirer/input';

export class PluginSampleI18nServer extends Plugin {
  load() {
    this.app.command('test-i18n').action(async () => {
      const answer1 = await select({
        message: 'Select a language',
        choices: [
          {
            name: '中文',
            value: 'zh-CN',
          },
          {
            name: 'English',
            value: 'en-US',
          },
        ],
      });
      await this.app.changeLanguage(answer1);
      const answer2 = await input({
        message: app.i18n.t('Enter your name'),
      });
      console.log(app.i18n.t(`Your name is {{name}}`, { name: answer2 }));
    });
  }
}

#app.t(text, options) server

#ctx.i18n server

ctx.i18n is a cloneInstance of the global app.i18n, each request's ctx is completely independent and responds with multilingual information based on the client's language.

Client request parameters can be placed in the query string

GET /?locale=en-US HTTP/1.1
Host: localhost:13000

Or in request headers (recommended)

GET / HTTP/1.1
Host: localhost:13000
X-Locale: en-US

Example

export class PluginSampleI18nServer extends Plugin {
  load() {
    this.app.use(async (ctx, next) => {
      if (ctx.path === '/api/test-i18n') {
        ctx.body = `${ctx.i18n.t('Hello')} ${ctx.i18n.t('World')}`;
      }
      await next();
    });
  }
}

View http://localhost:13000/api/test-i18n?locale=zh-CN

#ctx.t(text, options) server

#plugin.t() server

#Client

#ctx.i18n client

#ctx.t(text, options) client

#plugin.t()

#useT()

#Utility Functions

#tExpr(text) server client

#react-i18next

#useTranslation(ns) client

#withTranslation(ns) client