# Локализация i18n

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

Локализация в $mol настроина по умолчанию из коробки. Небольшое введение по локализации есть в этой [статье](https://page.hyoo.ru/#!=jfketb_3qo2ad/View%22jfketb_3qo2ad%22.Details=%D0%9B%D0%BE%D0%BA%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F%20%D0%B2%D0%BE%20view.tree) .

<img src="https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2FAFgDQnW8Gv3psDZFupDs%2Fimage.png?alt=media&#x26;token=fa08d96f-a8aa-4b9e-8c45-e00f31d0fdbe" alt="" data-size="original">![](https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2Fp8fMqfxeG4KlfXB8EmpJ%2Fimage.png?alt=media\&token=0c65950a-a024-4bb4-8988-c599447224f4)![](https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2FHnrDKN9AIorXTXA1c5J2%2Fimage.png?alt=media\&token=bb20419a-a3fa-4fc8-8e33-c6732537dff1)![](https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2FVliCjsDY6brCOwZX9IZj%2Fimage.png?alt=media\&token=f39ec04c-a61f-48f3-9e4c-edeaafdb341e)

Рассмотрим локализацию на примере приложения 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

```

2. Создать в папке компонента файл с переводами под каждую локаль. Файл будет называться также, как и compnonent с приставкой compnen&#x74;**.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 - приложение, выводящее собственные исходные коды"
}
```

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

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>  .<img src="https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2FAFgDQnW8Gv3psDZFupDs%2Fimage.png?alt=media&#x26;token=fa08d96f-a8aa-4b9e-8c45-e00f31d0fdbe" alt="" data-size="original">![](https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2Fp8fMqfxeG4KlfXB8EmpJ%2Fimage.png?alt=media\&token=0c65950a-a024-4bb4-8988-c599447224f4)
3. Текущая локаль хранится в localStorage сайта, поэтому при перезапуске браузера у пользователя сохранится выбранный им язык. <img src="https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2FUTXWwnrjRjzIMPv7CBTb%2Fimage.png?alt=media&#x26;token=4dd27643-62bc-4931-92a7-e778dd66eda1" alt="" data-size="original">
4. Если нужно получить переводы для всех ключей на сайте по выбранной локали, то нужно выполнить команду `$mol_locale.texts('ru')` и получите все ключи. Даже те, которые используются в других компонентах. Их можно будет отследить по названию ключа, т.к. оно указывает на путь до компонента + свойство. Исходник команды лежит тут: <https://github.com/hyoo-ru/mam_mol/blob/master/locale/locale.ts#L39-L50>

<figure><img src="https://2423068839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPeQCEDjTcBt8BDKqrc9q%2Fuploads%2FVliCjsDY6brCOwZX9IZj%2Fimage.png?alt=media&#x26;token=f39ec04c-a61f-48f3-9e4c-edeaafdb341e" alt=""><figcaption></figcaption></figure>

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