Интернационализация

Интернационализация является одной из основных особенностей CMintS. Идея является в использование общей структуры и синтаксиса в страницах, теме и предоставить дополнительные помощников для управления многоязычным сайтом.

Структура директории locales

файлы локалей должны находиться в каталогеlocales:

locales
├── de
│   ├── about.json
│   └── news.json
├── en
│   ├── about.json
│   ├── header.json
│   └── news.json
└── ru
    ├── about
    │   └── team.json
    ├── about.json
    ├── documentation
    │   ├── getting-started
    │   │   └── configuration.json
    │   └── i18n
    │       └── index.json
    ├── header.json
    ├── index.json
    └── news.json

Каталоги верхнего уровня в locales являются кодами локали(locale). Структура каталогов отражает путь к странице, например, переводы для about/teams.md страницы должны быть расположен в файле /de/about/teams.json, чтобы быть доступным через путь /de/about/teams сайта

Язык по умолчанию

Прежде чем использовать i18n функции, пользователь должен также указать "локаль" по умолчанию, который будет использоваться в качестве исходного языка. Для этого defaultLocale необходимо добавить в параметры i18n в config.js:

const i18nOptions = {
  defaultLocale: "en"
};

module.exports = {i18nOptions};

Файл локалей

Файлы локалей содержат список переводимых строк, строки перевода состоят из stringid, сообщения и необязательного описания.

{
  "heading-main": {
    "description": "Heading of the main page",
    "message": "Заголовок"
  },
  ...
}

Строки перевода

Строки перевода могут быть определены в исходных файлах, помещая их внутри открывающих и закрывающих фигурных скобок. Строка перевода состоит из stringId, необязательное описание и исходный текст

{stringId[Description] Source text}

Например, рассмотрим локаль ru в Локальном файле и строку перевода ниже:

{heading-main[Heading of the main page] Heading}

Будут преобразованы в Heading для языка по умолчанию и в Заголовок для русского языка.

Определение пути

Чтобы использовать строку перевода из определенного пути, а не определять исходного текста в содержимом страницы, можно определить путь к файлу рядом с stringID:

{menu-item-about(menu/header)}

Вышеприведенное выражение означает использование строки с идентификатором menu-item-about из файла %locale%/menu/header.json:

/* /en/menu/header.json */
{
  "menu-item-about": {
    "description": "Menu item label",
    "message": "about us"
  }
}

/* /ru/menu/header.json */
{
  "menu-item-about": {
    "description": "Menu item label",
    "message": "о нас"
  }
}

// Translation expression
{menu-item-about(menu/header)}

Учитывая en и ru языков выше, перевод выражения будут преобразованы в about us для en языка и о нас для ru локали.

Использование тегов

Текущие теги a, img, p, span, div, em, i, b, strong могут использоваться по умолчанию в переводе строки, на пример:

{stringId[Description] My awesome <em>source text</em> goes here}

<a>

Когда используется относительный путь с начинающимся / путём, то локаль и hreflang атрибут создаются автоматически в зависимости от языка целевой страницы. Конфигурация root может быть использована для спецификации корневого каталога веб-сайта, если это необходимо.

Порядок ссылок внутри строк перевода может быть различным в зависимости на языке, поэтому порядок в строке файла языкового стандарта должен быть , поэтому рассмотрим строку перевода ниже:

{paragraph-1 This is <a href="https://www.example1.com">first link</a>, <a href="/random1">second link</a> and <a href="/random2">third link</a>}

И файл Locale со строкой перевода

{
 "paragraph-1": {
   "description": "Paragraph with several links",
   "message": "Это <a2>вторая ссылка</a2>, <a1>первая</a1> и <a3>третья ссылка</a3>"
 },
 ...
}

Результат будет:

Это <a href="/en/random1" hreflang="en">вторая ссылка</a>, <a href="https://www.example1.com">первая</a> и <a href="/en/random2" hreflang="en">третья ссылка</a>

<fix>

Некоторые слова не надо переводить на веб-сайте (например, название бренда), для этого можно использовать тег <fix>:

{fixed-id <fix>CMintS</fix> uses <fix>fix</fix> tag}

и локали ниже:

"fixed-id": {
 "message": "<fix2> тэг используется <fix1>-ом"
}

Получится:

fix тэг используется CMintS-ом

<img>

Подобно тегам <a> и <fix> тег <img> также должен сохранять порядок в строках перевода:

{test-img1 This is <img href="/first.png"> and <img href="/second.png"> image}

и локали ниже:

"test-img1": {
   "description": "Test images order",
   "message": "Это <img2> картинка и <img1>"
}

Получится:

Это <img href="/second.png"> картинка и <img href="/first.png">

атрибуты title и alt

Некоторые атрибуты также должны быть переведены на разные языки, поэтому эти атрибуты также могут использоваться в тегах строки перевода:

{test-attribute1 <div title="Website Logo" id="logo"><img src="/random/path" alt="Jumping puma" />Picture</div>}

и локали ниже:

"test-attribute1": {
   "description": "Test images order",
   "message": "<div1 title='Логотип сайта'><img1 alt='Пума в прыжке'>Картинка</div1>"
}

Получится:

<div title="Логотип сайта" id="logo"><img src="/random/path" alt="Пума в прыжке" />Картинка</div>

prefix, postfix

Можно также редактировать префикс и постфикс для строк интернационализации в config.js. Это может быть полезно для исправления несовместимости с другими синтаксисами:

Рассмотрим:

/* config.js */

const i18nOptions = {
  defaultLocale: "en",
  prefix: "{{",
  postfix: "}}"
};

module.exports = {i18nOptions};

Для конфигурации, указанной выше можно использовать синтаксис ниже:

{{stringId[Description] Source text}}