#I18n (Quốc tế hóa)

Trong các plugin của NocoBase, chúng tôi hỗ trợ quốc tế hóa đa ngôn ngữ (i18n) cho cả frontend và backend. Với một cơ chế thống nhất, bạn có thể dễ dàng triển khai nội dung đa ngôn ngữ trong các plugin.

#Quản lý tệp đa ngôn ngữ

Các tệp đa ngôn ngữ của plugin được lưu trữ thống nhất trong thư mục src/locale. Chúng tôi khuyến nghị đặt tên tệp theo ngôn ngữ, ví dụ:

|- /plugin-hello
  |- /src
    |- /locale
      |- en-US.json   # Ngôn ngữ tiếng Anh
      |- zh-CN.json   # Ngôn ngữ tiếng Trung

Mỗi tệp ngôn ngữ xuất một đối tượng JSON chứa tất cả các mục dịch cho ngôn ngữ đó, ví dụ:

// zh-CN.json
{
  "Hello": "你好",
  "World": "世界",
  "Enter your name": "请输入你的名字",
  "Your name is {{name}}": "你的名字是 {{name}}"
}

// en-US.json
{
  "Hello": "Hello",
  "World": "World",
  "Enter your name": "Enter your name",
  "Your name is {{name}}": "Your name is {{name}}"
}

Khi thêm tệp ngôn ngữ lần đầu, bạn cần khởi động lại ứng dụng để chúng có hiệu lực. Bạn có thể kiểm tra các mục dịch thông qua API:
http://localhost:13000/api/app:getLang?locale=zh-CN

#Thể hiện i18n toàn cục

app.i18n là thể hiện i18n toàn cục, phù hợp cho các tình huống toàn cục của CLI hoặc plugin. Bạn có thể kết hợp nó với inquirer để triển khai 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: '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.i18n.t(text, options) được dùng để dịch văn bản và hỗ trợ các biến mẫu.

#i18n ngữ cảnh yêu cầu

ctx.i18n của mỗi yêu cầu là một thể hiện sao chép của i18n toàn cục, phản hồi độc lập thông tin đa ngôn ngữ dựa trên ngôn ngữ của client.

Thiết lập ngôn ngữ client

• Chuỗi truy vấn (Query String):

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

• Header yêu cầu (Khuyến nghị):

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

Sử dụng trong Middleware

export class PluginSampleI18nServer extends Plugin {
  load() {
    this.app.use(async (ctx, next) => {
      if (ctx.path === '/api/test-i18n') {
        ctx.body = ctx.t('Hello', { ns: '@my-project/plugin-hello' });
      }
      await next();
    });
  }
}

Truy cập http://localhost:13000/api/test-i18n?locale=zh-CN sẽ trả về 你好.

#i18n nội bộ plugin

Các plugin có thể trực tiếp sử dụng plugin.t(key, options) để lấy bản dịch:

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

plugin.t(text) tương đương với ctx.t(text, { ns })

#Các API liên quan

• app.i18n
• app.t(text, options)
• ctx.i18n
• ctx.t(text, options)
• plugin.t()
• tExpr(text, options)