#التدويل

#ملفات التدويل

في الإضافات (Plugins)، تُخزّن ملفات اللغات المتعددة لكل من الواجهة الأمامية والخلفية في مجلد src/locale.

|- /plugin-i18n
  |- /src
    |- /locale      # مجلد اللغات المتعددة
      |- en-US.ts   # اللغة الإنجليزية
      |- zh-CN.ts   # اللغة الصينية

ما عليك سوى إضافة إدخالات الترجمة في ملفات اللغات المتعددة المقابلة (/src/locale/${lang}.ts). إذا كانت هذه هي المرة الأولى التي تضيف فيها ملف لغة متعددة، فستحتاج إلى إعادة تشغيل التطبيق لتصبح التغييرات سارية المفعول. يمكنك التحقق من واجهة برمجة التطبيقات app:getLang للتحقق مما إذا كانت إدخالات الترجمة قد أضيفت بنجاح.

الرابط الافتراضي: http://localhost:13000/api/app:getLang?locale=zh-CN

#واجهات برمجة التطبيقات المتعلقة بالتدويل (i18n)

• الخادم
  • app.i18n
  • app.t(text, options)
  • ctx.i18n
  • ctx.t(text, options)
  • plugin.t()
• العميل
  • ctx.i18n
  • ctx.t(text, options)
  • plugin.t()
  • useT()
• الأدوات المساعدة
  • tExpr(text, options)
• react-i18next
  • useTranslation(ns)
  • withTranslation(ns)

#الخادم

#app.i18n server

app.i18n هو مثيل التدويل (i18n) العام، ويُستخدم عادةً في واجهة سطر الأوامر (CLI). على سبيل المثال، يمكن دمجه مع inquirer لتنفيذ التفاعلات عبر سطر الأوامر.

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

#ctx.i18n server

ctx.i18n هو نسخة مستقلة (cloneInstance) من app.i18n العام، حيث يكون ctx لكل طلب مستقلًا تمامًا ويستجيب بمعلومات متعددة اللغات بناءً على لغة العميل.

يمكن وضع معلمات طلب العميل في سلسلة الاستعلام (query string)

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

أو في ترويسات الطلب (request headers) (مُوصى به)

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

مثال

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

لعرض http://localhost:13000/api/test-i18n?locale=zh-CN

#ctx.t(text, options) server

#plugin.t() server

#العميل

#ctx.i18n client

#ctx.t(text, options) client

#plugin.t()

#useT()

#دوال مساعدة

#tExpr(text) server client

#react-i18next

#useTranslation(ns) client

#withTranslation(ns) client