#Quốc tế hóa

#Tệp quốc tế hóa

Trong các plugin, các tệp đa ngôn ngữ cho cả frontend và backend đều được lưu trữ trong thư mục src/locale.

|- /plugin-i18n
  |- /src
    |- /locale      # Thư mục đa ngôn ngữ
      |- en-US.ts   # Ngôn ngữ tiếng Anh
      |- zh-CN.ts   # Ngôn ngữ tiếng Trung

Bạn chỉ cần thêm các mục dịch vào tệp đa ngôn ngữ tương ứng (/src/locale/${lang}.ts). Nếu đây là lần đầu tiên bạn thêm một tệp đa ngôn ngữ, bạn cần khởi động lại ứng dụng để các thay đổi có hiệu lực. Bạn có thể kiểm tra API app:getLang để xác minh xem các mục dịch đã được thêm thành công hay chưa.

URL mặc định: http://localhost:13000/api/app:getLang?locale=zh-CN

#Các API liên quan đến i18n

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

#Máy chủ

#app.i18n server

app.i18n là một thể hiện (instance) i18n toàn cục, thường được sử dụng trong CLI. Ví dụ, nó có thể được kết hợp với inquirer để triển khai các tương tác dòng lệnh.

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: 'Chọn một ngôn ngữ',
        choices: [
          {
            name: 'Tiếng Trung',
            value: 'zh-CN',
          },
          {
            name: 'Tiếng Anh',
            value: 'en-US',
          },
        ],
      });
      await this.app.changeLanguage(answer1);
      const answer2 = await input({
        message: app.i18n.t('Nhập tên của bạn'),
      });
      console.log(app.i18n.t(`Tên của bạn là {{name}}`, { name: answer2 }));
    });
  }
}

#app.t(text, options) server

#ctx.i18n server

ctx.i18n là một cloneInstance của app.i18n toàn cục, trong đó mỗi ctx của yêu cầu là hoàn toàn độc lập và phản hồi thông tin đa ngôn ngữ dựa trên ngôn ngữ của client.

Các tham số yêu cầu của client có thể được đặt trong chuỗi truy vấn (query string)

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

Hoặc có thể đặt trong tiêu đề yêu cầu (request headers) (khuyến nghị)

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

Ví dụ

export class PluginSampleI18nServer extends Plugin {
  load() {
    this.app.use(async (ctx, next) => {
      if (ctx.path === '/api/test-i18n') {
        ctx.body = `${ctx.i18n.t('Xin chào')} ${ctx.i18n.t('Thế giới')}`;
      }
      await next();
    });
  }
}

Xem 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()

#Các hàm tiện ích

#tExpr(text) server client

#react-i18next

#useTranslation(ns) client

#withTranslation(ns) client