🇱🇷Локализация i18n
Инструкция по локализации проекта в $mol
Last updated
Инструкция по локализации проекта в $mol
Last updated
Процесс локализации проекта может проходить двумя разными подходами: через файлы ресурсов проекта и через запрос к веб серверу онлайн. В $mol по умолчанию используется 1 подход.
Локализация в $mol настроина по умолчанию из коробки. Небольшое введение по локализации есть в этой статье .
Рассмотрим локализацию на примере приложения Quine https://mol.js.org/app/quine/-/ , его исходники лежат здесь: https://github.com/hyoo-ru/mam_mol/tree/master/app/quine
Процесс локализации состоит из нескольких шагов:
Постав знак @ перед значением свойства компонента, которое нужно будет перевести на разные языки. Ключ для перевода будет автоматически сгенерирован из файла 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 после запуска проекта.
Создать в папке компонента файл с переводами под каждую локаль. Файл будет называться также, как и 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 нотации - расположение компонента в проекте + имя свойства или компонента.
На этом основные шаги по переводу закончены. Дальше нужно обедиться, что в браузере локализация правильно отрабатывает.
Открываем браузер с проектом, например, https://mol.js.org/app/quine/-/ и открываем консоль разработчика.
В консоли вводим команду для смены локали на проекте $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 .
Текущая локаль хранится в localStorage сайта, поэтому при перезапуске браузера у пользователя сохранится выбранный им язык.
Если нужно получить переводы для всех ключей на сайте по выбранной локали, то нужно выполнить команду $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/ .
