Учебники

Аурелия — Локализация

Январь 1, 2019

Aurelia предлагает плагин i18n . В этой главе вы узнаете, как локализовать ваше приложение с помощью этого плагина.

Шаг 1 — Установите плагин

Откройте окно командной строки и запустите следующий код для установки плагина i18n . 

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

Нам также нужно установить бэкэнд плагин. 

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

Шаг 2 — Создание папок и файлов

В корневой папке проекта нам нужно создать каталог локали . 

C:\Users\username\Desktop\aureliaApp>mkdir locale

В этой папке вам нужно добавить новые папки для любого языка, который вы хотите. Мы создадим en с файлом translation.js внутри. 

C:\Users\username\Desktop\aureliaApp\locale>mkdir en
C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json

Шаг 3 — Используйте плагин

Вы должны использовать ручную загрузку, чтобы иметь возможность использовать этот плагин. Обратитесь к главе Конфигурация за дополнительной информацией. Нам нужно добавить плагин i18n в файл main.js.

main.js 

import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
	
   .plugin('aurelia-i18n', (instance) => {
      // register backend plugin
      instance.i18next.use(XHR);

      // adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {                                  
            loadPath: '/locales/{{lng}}/{{ns}}.json',
         },
				
         lng : 'de',
         attributes : ['t','i18n'],
         fallbackLng : 'en',
         debug : false
      });
   });

   aurelia.start().then(a => a.setRoot());
}

Шаг 4 — Перевод файла JSON

Это файл, в котором вы можете установить значения перевода. Мы будем использовать пример из официальной документации. Папка de-DE на самом деле должна использоваться для перевода на немецкий язык, однако вместо этого мы будем использовать английские фразы для облегчения понимания.

translation.json 

{
   "score": "Score: {{score}}",
   "lives": "{{count}} life remaining",
   "lives_plural": "{{count}} lives remaining",
   "lives_indefinite": "a life remaining",
   "lives_plural_indefinite": "some lives remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

Шаг 5 — Установите локаль

Нам просто нужно импортировать плагин i18n и настроить его на использование кода JSON из папки de-DE .

app.js 

import {I18N} from 'aurelia-i18n';

export class App {
   static inject = [I18N];
	
   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale('de-DE')
		
      .then( () => {
         console.log('Locale is ready!');
      });
   }
}

Шаг 6 — Просмотр

Есть несколько способов перевести данные. Мы будем использовать пользовательский ValueConverter с именем t . В следующем примере вы можете увидеть различные способы форматирования данных. Сравните это с файлом translation.json, и вы заметите шаблоны, используемые для форматирования. 

<template>
   <p>
      Translation with Variables: <br />
      ${ 'score' | t: {'score': 13}}
   </p>

   <p>
      Translation singular: <br />
      ${ 'lives' | t: { 'count': 1 } }
   </p>

   <p>
      Translation plural: <br />
      ${ 'lives' | t: { 'count': 2 } }
   </p>

   <p>  
      Translation singular indefinite: <br />
      ${ 'lives' | t: { 'count': 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br />
      ${ 'lives' | t: { 'count': 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br />
      ${ 'friend' | t } <br />
      ${ 'friend' | t: { context: 'male' } } <br />
      ${ 'friend' | t: { context: 'female' } }
   </p>
	
</template>

Когда мы запустим приложение, мы получим следующий вывод.

41
Share: