🇱🇷Локализация i18n

Инструкция по локализации проекта в $mol

Процесс локализации проекта может проходить двумя разными подходами: через файлы ресурсов проекта и через запрос к веб серверу онлайн. В $mol по умолчанию используется 1 подход.

Локализация в $mol настроина по умолчанию из коробки. Небольшое введение по локализации есть в этой статье .

Рассмотрим локализацию на примере приложения Quine https://mol.js.org/app/quine/-/ , его исходники лежат здесь: https://github.com/hyoo-ru/mam_mol/tree/master/app/quine

Процесс локализации состоит из нескольких шагов:

1. Постав знак @ перед значением свойства компонента, которое нужно будет перевести на разные языки. Ключ для перевода будет автоматически сгенерирован из файла https://github.com/hyoo-ru/mam_mol/blob/master/app/quine/quine.view.tree#L2 и его можно будет посмотреть локально в папке /mam/mol/app/quine/-view.tree/quine.view.tree.locale=en.json после запуска проекта.

// title - свойство заголовка
// @ - значение для данного свойства будет автоматически переведено
// \Quine - Строка для перевода по умолчанию для en локали, её переводить на en не нужно будет.
    title @ \Quine - Application that prints self sources

1. Создать в папке компонента файл с переводами под каждую локаль. Файл будет называться также, как и compnonent с приставкой compnent.locale=ru.json , где ru - выбранная локаль. вот ссылка на файл: https://github.com/hyoo-ru/mam_mol/blob/master/app/quine/quine.locale%3Dru.json . EN локаль достаётся автоматически из компонента. "$mol_app_quine_title" - это ключ, полученный согласно fqn нотации - расположение компонента в проекте + имя свойства или компонента.

{
	"$mol_app_quine_title": "Quine - приложение, выводящее собственные исходные коды"
}

На этом основные шаги по переводу закончены. Дальше нужно обедиться, что в браузере локализация правильно отрабатывает.

1. Открываем браузер с проектом, например, https://mol.js.org/app/quine/-/ и открываем консоль разработчика.

2. В консоли вводим команду для смены локали на проекте $mol_locale.lang('en') или $mol_locale.lang('ru'). Эта команда поменяет заголовок и подсказку для кнопки копирования на сайте. Если ввести локаль, которой нет $mol_locale.lang('it') - то будет примерена локаль по умолчанию ('en'). Ознакомьтесь с неольшим исходником по локализации https://github.com/hyoo-ru/mam_mol/blob/master/locale/locale.ts .

3. Текущая локаль хранится в localStorage сайта, поэтому при перезапуске браузера у пользователя сохранится выбранный им язык.

4. Если нужно получить переводы для всех ключей на сайте по выбранной локали, то нужно выполнить команду $mol_locale.texts('ru') и получите все ключи. Даже те, которые используются в других компонентах. Их можно будет отследить по названию ключа, т.к. оно указывает на путь до компонента + свойство. Исходник команды лежит тут: https://github.com/hyoo-ru/mam_mol/blob/master/locale/locale.ts#L39-L50

Это пример позволяет начать делать быструю и удобную локализацию на проекте. Со временем, когда проект будет разрастаться и потребуется профессиональные переводы, лучше будет перейти на 1 из платных сервисов, которые будут подгружать выбранную локаль из облако прямо на сайт. Например, https://poeditor.com/ или https://locize.com/ .