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>
Когда мы запустим приложение, мы получим следующий вывод.