#국제화

#국제화 파일

플러그인에서 프런트엔드와 백엔드의 다국어 파일은 모두 src/locale 폴더에 저장됩니다.

|- /plugin-i18n
  |- /src
    |- /locale      # 다국어 폴더
      |- en-US.ts   # 영어
      |- zh-CN.ts   # 중국어

해당 다국어 파일(/src/locale/${lang}.ts)에 번역 항목을 추가하시면 됩니다. 다국어 파일을 처음 추가하는 경우, 변경 사항을 적용하려면 애플리케이션을 재시작해야 합니다. app:getLang API를 통해 번역 항목이 성공적으로 추가되었는지 확인할 수 있습니다.

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

#i18n 관련 API

• 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)

#서버

#app.i18n server

app.i18n은 전역 i18n 인스턴스이며, 주로 CLI에서 사용됩니다. 예를 들어, inquirer와 함께 사용하여 명령줄 상호작용을 구현할 수 있습니다.

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은 전역 app.i18n의 cloneInstance입니다. 각 요청의 ctx는 완전히 독립적이며, 클라이언트 언어에 따라 다국어 정보를 응답합니다.

클라이언트 요청 파라미터는 쿼리 스트링에 포함될 수 있습니다.

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

또는 요청 헤더에 포함될 수도 있습니다(권장).

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

예시

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();
    });
  }
}

http://localhost:13000/api/test-i18n?locale=zh-CN에서 확인해 보세요.

#ctx.t(text, options) server

#plugin.t() server

#클라이언트

#ctx.i18n client

#ctx.t(text, options) client

#plugin.t()

#useT()

#유틸리티 함수

#tExpr(text) server client

#react-i18next

#useTranslation(ns) client

#withTranslation(ns) client