#Internacionalización

#Archivos de Internacionalización

En los plugins, los archivos multilingües tanto para el frontend como para el backend se almacenan en la carpeta src/locale.

|- /plugin-i18n
  |- /src
    |- /locale      # Carpeta multilingüe
      |- en-US.ts   # Idioma inglés
      |- zh-CN.ts   # Idioma chino

Solo necesita añadir las entradas de traducción en los archivos multilingües correspondientes (/src/locale/${lang}.ts). Si es la primera vez que añade un archivo multilingüe, deberá reiniciar la aplicación para que los cambios surtan efecto. Puede verificar si las entradas de traducción se han añadido correctamente consultando la API app:getLang.

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

#APIs relacionadas con i18n

• Servidor
  • app.i18n
  • app.t(text, options)
  • ctx.i18n
  • ctx.t(text, options)
  • plugin.t()
• Cliente
  • ctx.i18n
  • ctx.t(text, options)
  • plugin.t()
  • useT()
• Utilidades
  • tExpr(text, options)
• react-i18next
  • useTranslation(ns)
  • withTranslation(ns)

#Servidor

#app.i18n servidor

app.i18n es la instancia global de i18n, utilizada generalmente en la CLI. Por ejemplo, se combina con inquirer para implementar interacciones en la línea de comandos.

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

#ctx.i18n servidor

ctx.i18n es una cloneInstance de la instancia global app.i18n. El ctx de cada solicitud es completamente independiente y responde con información multilingüe según el idioma del cliente.

Los parámetros de la solicitud del cliente se pueden incluir en la cadena de consulta (query string):

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

O en los encabezados de la solicitud (headers) (recomendado):

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

Ejemplo:

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

Consulte http://localhost:13000/api/test-i18n?locale=zh-CN

#ctx.t(text, options) servidor

#plugin.t() servidor

#Cliente

#ctx.i18n cliente

#ctx.t(text, options) cliente

#plugin.t()

#useT()

#Funciones de utilidad

#tExpr(text) servidor cliente

#react-i18next

#useTranslation(ns) cliente

#withTranslation(ns) cliente