i18n Internasionalisasi

Plugin NocoBase mendukung internasionalisasi multibahasa frontend-backend (i18n), Anda dapat mengimplementasikan konten multibahasa di plugin melalui mekanisme terpadu.

Manajemen File Multibahasa

File multibahasa plugin disimpan secara terpadu di direktori src/locale, dinamai berdasarkan bahasa, misalnya:

|- /plugin-hello
  |- /src
    |- /locale
      |- en-US.json   # Bahasa Inggris
      |- zh-CN.json   # Bahasa Tionghoa

Setiap file bahasa mengekspor sebuah object JSON yang berisi semua entri terjemahan untuk bahasa tersebut, misalnya:

// 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}}"
}
Tips

Pertama kali menambahkan file bahasa perlu restart aplikasi agar berlaku. Anda dapat memvalidasi apakah entri terjemahan berlaku melalui interface: http://localhost:13000/api/app:getLang?locale=zh-CN

Instance i18n Global

app.i18n adalah instance i18n global, cocok untuk skenario CLI atau plugin global. Anda dapat menggabungkannya dengan inquirer untuk mengimplementasikan interaksi command line:

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) digunakan untuk menerjemahkan teks dan mendukung variabel template.

i18n Context Request

ctx.i18n setiap request adalah instance clone dari i18n global, merespons informasi multibahasa secara independen berdasarkan bahasa client.

Mengatur Bahasa Client

  • Query String:
GET /?locale=en-US HTTP/1.1
Host: localhost:13000
  • Request Header (direkomendasikan):
GET / HTTP/1.1
Host: localhost:13000
X-Locale: en-US

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

Mengakses http://localhost:13000/api/test-i18n?locale=zh-CN akan mengembalikan 你好.

i18n Internal Plugin

Di dalam plugin, Anda dapat menggunakan plugin.t(key, options) secara langsung untuk mendapatkan terjemahan:

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) setara dengan ctx.t(text, { ns })

Tautan Terkait