@intlayer/docs 8.4.10 → 8.5.0

package/docs/ru/intlayer_with_vite+vanilla.md

@@ -0,0 +1,722 @@
+---
+createdAt: 2026-03-23
+updatedAt: 2026-03-23
+title: i18n Vite + Vanilla JS — Как перевести приложение на Vanilla JS в 2026 году
+description: Узнайте, как сделать ваш сайт на Vite и Vanilla JS многоязычным. Следуйте документации для интернационализации (i18n) и перевода.
+keywords:
+  - Интернационализация
+  - Документация
+  - Intlayer
+  - Vite
+  - Vanilla JS
+  - JavaScript
+  - TypeScript
+  - HTML
+slugs:
+  - doc
+  - environment
+  - vite-and-vanilla
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-vanilla-template
+history:
+  - version: 8.4.10
+    date: 2026-03-23
+    changes: "Init history"
+---
+
+# Переведите ваш сайт на Vite и Vanilla JS с помощью Intlayer | Интернационализация (i18n)
+
+## Содержание
+
+<TOC/>
+
+## Что такое Intlayer?
+
+**Intlayer** — это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, упрощающая поддержку многоязычности в современных веб-приложениях.
+
+С Intlayer вы можете:
+
+- **Легко управлять переводами**, используя декларативные словари на уровне компонентов.
+- **Динамически локализовать метаданные**, маршруты и контент.
+- **Обеспечить поддержку TypeScript** с автогенерируемыми типами, улучшая автодополнение и обнаружение ошибок.
+- **Пользоваться расширенными функциями**, такими как динамическое определение и переключение языка.
+
+---
+
+## Пошаговое руководство по настройке Intlayer в приложении на Vite и Vanilla JS
+
+### Шаг 1: Установка зависимостей
+
+Установите необходимые пакеты с помощью npm:
+
+```bash packageManager="npm"
+npm install intlayer vanilla-intlayer
+npm install vite-intlayer --save-dev
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer vanilla-intlayer
+pnpm add vite-intlayer --save-dev
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer vanilla-intlayer
+yarn add vite-intlayer --save-dev
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer vanilla-intlayer
+bun add vite-intlayer --dev
+bunx intlayer init
+```
+
+- **intlayer**
+  Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, [объявления контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md), транспиляции и [команд CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/index.md).
+
+- **vanilla-intlayer**
+  Пакет для интеграции Intlayer в приложения на чистом JavaScript / TypeScript. Он предоставляет синглтон pub/sub (`IntlayerClient`) и вспомогательные функции на основе колбэков (`useIntlayer`, `useLocale` и т. д.), чтобы любая часть вашего приложения могла реагировать на изменения языка без зависимости от UI-фреймворка.
+
+- **vite-intlayer**
+  Включает плагин Vite для интеграции Intlayer с [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также посредник (middleware) для определения предпочтительного языка пользователя, управления куки и обработки перенаправления URL.
+
+### Шаг 2: Конфигурация вашего проекта
+
+Создайте файл конфигурации для настройки языков вашего приложения:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Ваши другие языки
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Ваши другие языки
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Ваши другие языки
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> Через этот файл конфигурации вы можете настроить локализованные URL, перенаправление посредника, имена куки, местоположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
+
+### Шаг 3: Интеграция Intlayer в конфигурацию Vite
+
+Добавьте плагин intlayer в вашу конфигурацию.
+
+```typescript fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+```javascript fileName="vite.config.mjs" codeFormat="esm"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+```javascript fileName="vite.config.cjs" codeFormat="commonjs"
+const { defineConfig } = require("vite");
+const { intlayer } = require("vite-intlayer");
+
+// https://vitejs.dev/config/
+module.exports = defineConfig({
+  plugins: [intlayer()],
+});
+```
+
+> Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов объявления контента и отслеживает их изменения в режиме разработки. Он определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, он предоставляет псевдонимы (aliases) для оптимизации производительности.
+
+### Шаг 4: Инициализация Intlayer в точке входа
+
+Вызовите `installIntlayer()` **перед** рендерингом любого контента, чтобы глобальный синглтон языка был готов.
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer } from "vanilla-intlayer";
+
+// Должно быть вызвано перед рендерингом любого i18n контента.
+installIntlayer();
+
+// Импортируйте и запустите модули вашего приложения.
+import "./app.js";
+```
+
+Если вы также используете объявления контента `md()` (Markdown), установите также рендерер макрдауна:
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";
+
+installIntlayer();
+installIntlayerMarkdown();
+
+import "./app.js";
+```
+
+### Шаг 5: Объявление вашего контента
+
+Создавайте объявления контента для хранения переводов и управляйте ими:
+
+```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+import { insert, t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Нажмите на логотип Vite, чтобы узнать больше",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+```javascript fileName="src/app.content.mjs" contentDeclarationFormat="esm"
+import { insert, t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Нажмите на логотип Vite, чтобы узнать больше",
+    }),
+  },
+};
+
+export default appContent;
+```
+
+```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
+const { insert, t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const appContent = {
+  key: "app",
+  content: {
+    title: "Vite + Vanilla",
+
+    viteLogoLabel: t({
+      en: "Vite Logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+
+    count: insert(
+      t({
+        en: "count is {{count}}",
+        fr: "le compte est {{count}}",
+        es: "el recuento es {{count}}",
+      })
+    ),
+
+    readTheDocs: t({
+      en: "Click on the Vite logo to learn more",
+      fr: "Cliquez sur le logo Vite pour en savoir plus",
+      es: "Нажмите на логотип Vite, чтобы узнать больше",
+    }),
+  },
+};
+
+module.exports = appContent;
+```
+
+```json fileName="src/app.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "app",
+  "content": {
+    "title": "Vite + Vanilla",
+    "viteLogoLabel": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Vite Logo",
+        "fr": "Logo Vite",
+        "es": "Logo Vite"
+      }
+    },
+    "count": {
+      "nodeType": "insertion",
+      "insertion": {
+        "nodeType": "translation",
+        "translation": {
+          "en": "count is {{count}}",
+          "fr": "le compte est {{count}}",
+          "es": "el recuento es {{count}}"
+        }
+      }
+    },
+    "readTheDocs": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "Click on the Vite logo to learn more",
+        "fr": "Cliquez sur le logo Vite pour en savoir plus",
+        "es": "Нажмите на логотип Vite, чтобы узнать больше"
+      }
+    }
+  }
+}
+```
+
+> Ваши объявления контента могут быть определены в любом месте вашего приложения, при условии, что они включены в каталог `contentDir` (по умолчанию `./src`) и соответствуют расширению файла объявления контента (по умолчанию `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+>
+> Дополнительную информацию см. в [документации по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
+
+### Шаг 6: Использование Intlayer в вашем JavaScript
+
+`vanilla-intlayer` повторяет поверхностный API `react-intlayer`: `useIntlayer(key, locale?)` возвращает переведенный контент напрямую. Добавьте `.onChange()` к результату, чтобы подписаться на изменения языка — это явный эквивалент ререндеринга в React.
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+// Получите начальный контент для текущего языка.
+// Добавьте .onChange(), чтобы получать уведомления при смене языка.
+const content = useIntlayer("app").onChange((newContent) => {
+  // Перерисуйте или обновите только затронутые узлы DOM
+  document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(
+    newContent.title
+  );
+  document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
+    String(newContent.readTheDocs);
+});
+
+// Начальный рендеринг
+document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(
+  content.title
+);
+document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =
+  String(content.readTheDocs);
+```
+
+> Обращайтесь к значениям как к строкам, оборачивая их в `String()`, что вызывает метод `toString()` узла и возвращает переведенный текст.
+>
+> Когда вам нужно значение для стандартного HTML-атрибута (например, `alt`, `aria-label`), используйте `.value` напрямую:
+>
+> ```typescript
+> img.alt = content.viteLogoLabel.value;
+> ```
+
+### (Опционально) Шаг 7: Изменение языка вашего контента
+
+Чтобы изменить язык вашего контента, используйте функцию `setLocale`, предоставляемую `useLocale`.
+
+```typescript fileName="src/locale-switcher.ts" codeFormat="typescript"
+import { getLocaleName } from "intlayer";
+import { useLocale } from "vanilla-intlayer";
+
+export function setupLocaleSwitcher(container: HTMLElement): () => void {
+  const { locale, availableLocales, setLocale, subscribe } = useLocale();
+
+  const select = document.createElement("select");
+  select.setAttribute("aria-label", "Language");
+
+  const render = (currentLocale: string) => {
+    select.innerHTML = availableLocales
+      .map(
+        (loc) =>
+          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>
+            ${getLocaleName(loc)}
+          </option>`
+      )
+      .join("");
+  };
+
+  render(locale);
+  container.appendChild(select);
+
+  select.addEventListener("change", () => setLocale(select.value as any));
+
+  // Синхронизация выпадающего списка при изменении языка из другого места
+  return subscribe((newLocale) => render(newLocale));
+}
+```
+
+### (Опционально) Шаг 8: Рендеринг контента Markdown и HTML
+
+Intlayer поддерживает объявления контента `md()` и `html()`. В чистом JS скомпилированный результат вставляется как необработанный HTML через `innerHTML`.
+
+```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+import { md, t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    // ...
+    editNote: md(
+      t({
+        en: "Edit `src/main.ts` and save to test **HMR**",
+        fr: "Modifiez `src/main.ts` et enregistrez pour tester **HMR**",
+        es: "Edite `src/main.ts` y guarde para probar **HMR**",
+      })
+    ),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+Компиляция и вставка HTML:
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import {
+  compileMarkdown,
+  installIntlayerMarkdown,
+  useIntlayer,
+} from "vanilla-intlayer";
+
+installIntlayerMarkdown();
+
+const content = useIntlayer("app").onChange((newContent) => {
+  const el = document.querySelector<HTMLDivElement>(".edit-note")!;
+  el.innerHTML = compileMarkdown(String(newContent.editNote));
+});
+
+document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =
+  compileMarkdown(String(content.editNote));
+```
+
+> [!TIP]
+> `String(content.editNote)` вызывает `toString()` для `IntlayerNode`, который возвращает необработанную строку Markdown. Передайте её в `compileMarkdown`, чтобы получить HTML-строку, а затем установите через `innerHTML`.
+
+> [!WARNING]
+> Используйте `innerHTML` только для доверенного контента. Если макрдаун получен из пользовательского ввода, сначала очистите его (например, с помощью DOMPurify). Вы можете динамически установить рендерер с очисткой:
+>
+> ```typescript
+> import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";
+>
+> await installIntlayerMarkdownDynamic(async () => {
+>   const DOMPurify = await import("dompurify");
+>   return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));
+> });
+> ```
+
+### (Опционально) Шаг 9: Добавление локализованной маршрутизации в ваше приложение
+
+Чтобы создать уникальные маршруты для каждого языка (полезно для SEO), вы можете использовать `intlayerProxy` в вашей конфигурации Vite для определения языка на стороне сервера.
+
+Сначала добавьте `intlayerProxy` в конфигурацию Vite:
+
+> Обратите внимание, что для использования `intlayerProxy` в продакшене вам нужно переместить `vite-intlayer` из `devDependencies` в `dependencies`.
+
+```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
+import { defineConfig } from "vite";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayerProxy(), // должен быть первым
+    intlayer(),
+  ],
+});
+```
+
+```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
+import { defineConfig } from "vite";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayerProxy(), // должен быть первым
+    intlayer(),
+  ],
+});
+```
+
+```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
+const { defineConfig } = require("vite");
+const { intlayer, intlayerProxy } = require("vite-intlayer");
+
+module.exports = defineConfig({
+  plugins: [
+    intlayerProxy(), // должен быть первым
+    intlayer(),
+  ],
+});
+```
+
+### (Опционально) Шаг 10: Изменение URL при смене языка
+
+Чтобы обновлять URL браузера при смене языка, вызовите `useRewriteURL()` после установки Intlayer:
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { installIntlayer, useRewriteURL } from "vanilla-intlayer";
+
+installIntlayer();
+
+// Перезаписывает URL немедленно и при каждой последующей смене языка.
+// Возвращает функцию отписки для очистки.
+const stopRewriteURL = useRewriteURL();
+```
+
+### (Опционально) Шаг 11: Переключение атрибутов языка и направления текста HTML
+
+Обновляйте атрибуты `lang` и `dir` тега `<html>` в соответствии с текущим языком для обеспечения доступности и SEO.
+
+```typescript fileName="src/main.ts" codeFormat="typescript"
+import { getHTMLTextDir } from "intlayer";
+import { installIntlayer, useLocale } from "vanilla-intlayer";
+
+installIntlayer();
+
+useLocale({
+  onLocaleChange: (locale) => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
+  },
+});
+```
+
+### (Опционально) Шаг 12: Ленивая загрузка словарей по языкам
+
+Для больших приложений вы можете разделить словари по языкам на отдельные чанки. Используйте `useDictionaryDynamic` вместе с динамическим `import()` от Vite:
+
+```typescript fileName="src/app.ts" codeFormat="typescript"
+import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";
+
+installIntlayer();
+
+const unsubscribe = useDictionaryDynamic(
+  {
+    en: () => import("../.intlayer/dictionaries/en/app.mjs"),
+    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),
+    es: () => import("../.intlayer/dictionaries/es/app.mjs"),
+  },
+  "app"
+).onChange((content) => {
+  document.querySelector("h1")!.textContent = String(content.title);
+});
+```
+
+> Бандл каждого языка запрашивается только тогда, когда этот язык становится активным, и результат кэшируется — последующие переключения на тот же язык происходят мгновенно.
+
+### (Опционально) Шаг 13: Извлечение контента из ваших компонентов
+
+Если у вас уже есть кодовая база, преобразование тысяч файлов может занять много времени.
+
+Чтобы облегчить этот процесс, Intlayer предлагает [компилятор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/compiler.md) / [экстрактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/extract.md) для преобразования ваших компонентов и извлечения контента.
+
+Чтобы настроить его, вы можете добавить раздел `compiler` в файл `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Остальная часть вашей конфигурации
+  compiler: {
+    /**
+     * Указывает, должен ли быть включен компилятор.
+     */
+    enabled: true,
+
+    /**
+     * Определяет путь к выходным файлам
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Указывает, должны ли компоненты сохраняться после трансформации.
+     * Таким образом, компилятор можно запустить только один раз для трансформации приложения, а затем удалить его.
+     */
+    saveComponents: false,
+
+    /**
+     * Префикс ключа словаря
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='Команда Extract'>
+
+Запустите экстрактор, чтобы преобразовать ваши компоненты и извлечь контент
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+ </Tab>
+ <Tab value='Компилятор Babel'>
+
+Обновите `vite.config.ts`, включив плагин `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Добавляет плагин компилятора
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # Или npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Или pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Или yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Или bun run dev
+```
+
+ </Tab>
+</Tabs>
+
+### Настройка TypeScript
+
+Убедитесь, что ваша конфигурация TypeScript включает автогенерируемые типы.
+
+```json5 fileName="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+### Настройка Git
+
+Рекомендуется игнорировать файлы, созданные Intlayer. Это позволит не добавлять их в ваш Git-репозиторий.
+
+Для этого добавьте следующие инструкции в ваш файл `.gitignore`:
+
+```bash
+# Игнорировать файлы, созданные Intlayer
+.intlayer
+```
+
+### Расширение для VS Code
+
+Чтобы сделать разработку с Intlayer удобнее, вы можете установить официальное **расширение Intlayer для VS Code**.
+
+[Установить из VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Это расширение предоставляет:
+
+- **Автодополнение** для ключей перевода.
+- **Обнаружение ошибок в реальном времени** для отсутствующих переводов.
+- **Инлайновые превью** переведенного контента.
+- **Быстрые действия** для легкого создания и обновления переводов.
+
+Для получения более подробной информации об использовании расширения см. [документацию к расширению Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
+
+---
+
+### Что дальше?
+
+Для более глубокого погружения вы можете внедрить [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент во внешнюю [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).