Internationalisierung

Internationalisierungsdateien

In Plugins werden die mehrsprachigen Dateien für Frontend und Backend im Ordner src/locale abgelegt.

|- /plugin-i18n
  |- /src
    |- /locale      # Mehrsprachiger Ordner
      |- en-US.ts   # Englische Sprache
      |- zh-CN.ts   # Chinesische Sprache

Fügen Sie einfach die Übersetzungs-Einträge in den entsprechenden mehrsprachigen Dateien (/src/locale/${lang}.ts) hinzu. Wenn Sie eine mehrsprachige Datei zum ersten Mal hinzufügen, müssen Sie die Anwendung neu starten, damit die Änderungen wirksam werden. Sie können die app:getLang API überprüfen, um zu bestätigen, ob die Übersetzungs-Einträge erfolgreich hinzugefügt wurden.

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

i18n-bezogene 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 ist die globale i18n-Instanz, die typischerweise in der CLI verwendet wird. Zum Beispiel in Kombination mit inquirer, um Kommandozeilen-Interaktionen zu implementieren.

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.i18n.changeLanguage(answer1);
      const answer2 = await input({
        message: this.app.i18n.t('Enter your name'),
      });
      console.log(this.app.i18n.t(`Your name is {{name}}`, { name: answer2 }));
    });
  }
}

app.t(text, options) server

ctx.i18n server

ctx.i18n ist eine cloneInstance der globalen app.i18n. Der ctx jedes Requests ist vollständig unabhängig und liefert mehrsprachige Informationen basierend auf der Sprache des Clients.

Client-Request-Parameter können im Query-String platziert werden:

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

Oder in den Request-Headern (empfohlen):

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

Beispiel:

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

Internationalisierung