Русский
Україньска
English
Руководство пользователя по созданию мультиязычного сайта на CMS Cotonti.
Прежде, чем приступим к инструкции по реализации такого функционала, подразумевается, что ваш сайт имеет всего один язык по-умолчанию, - русский, а второй будет английский.
Также подразумевается, что на сайте уже установлен и настроен плагин «URL Editor» по инструкции в этой теме.
Инструкция по созданию мультиязычного сайта с поддержкой многоязычного контента, является типовой, то есть универсальной в том плане, так же как устанавливается локализация английского языка, устанавливается и любой другой язык, который пожелаете.
Но осторожнее с желаниями, потому как, вашего языкового пакета может и не быть в репозиториях Cotonti, а некоторые могут быть не актуальными. В таком случае придется поработать, но на самом деле ничего сложного, просто время на это нужно.
1. Дефорс языка по-умолчанию в системе.
Отключить принудительную установку языка по умолчанию для всех пользователей сайта.
В панели управления путь выглядит так:
"Управление сайтом ► Конфигурация ► Локализация"
или ссылка вида*:
https://MySiteCotonti.ltd/admin/config?n=edit&o=core&p=locale
* MySiteCotonti.ltd - заменить на свой домен.
Смотрим скриншот и ставим радио-кнопку "Нет" в принудительной локализации.
Примечания:
- весь контент сайта одновременно на нескольких языках точно дублировать нет смысла, а если будет установлено в настройках "Force default language = TRUE", - это значит, что пользователь увидит сайт только в локализации, которая установлена в системе по-умолчанию в файле конфигурации "config.php" в строке:
$cfg['defaultlang'] = 'en'; // Default language code
- Свободный выбор языка пользователем позволяет ему не только видеть сайт в разных локализациях.
Там, где у пользователя будут права на запись, он сможет при желании сделать самостоятельно перевод статьи на доступный и нужный язык в системе.
Например, администратор сайта опубликовал новость на русском, а участнику сообщества, - простому пользователю, эта статья понравилась, и он считает, что текст статьи очень интересен и полезен будет для других пользователей.
Пользователь осуществляет перевод статьи, на ему предпочитаемый язык, который доступен в системе и отправляет её на модерацию администратору сайта.
Вот поэтому эта опция в настройках локализации системы является важной, но о ней еще нужно знать потомучто, выполнив все шаги по созданию мультиязычного сайта, он может так и не заработать должным образом, если установлено форсирование локализации сайта.
2. Установка и настройка плагина «i18n Content Internationalization».
Идем в карточку этого расширения.
В панели управления путь выглядит так:
Управление сайтом ► Расширения ► Content Internationalization
или ссылка вида:
https://MySiteCotonti.ltd/admin/extensions?a=details&pl=i18n
2.1 Жмем смело ссылку или кнопку "Установить".
2.2. Установки конфигурации плагина приводим в рекомендуемые на скриншоте ниже, кроме "Корневые категории для применения i18n", - об этом позже.
Сделали как на скриншоте - жмем кнопку "Обновить".
Примечание:
В установке "Запоминать выбранный язык в cookie:" - должно быть "Нет".
Баг/не баг не знаю, но если поставить "Да", - проблема с "возвратом" на дефолтную локализацию при переключении языков. Спросил бы у двух "за-раз-работавшихся" разработчиков Cotonti Team, которые меня забанили на официальном сайте, любая власть не терпит критики, ну и "прибор" им в руки.
Досадно, что Alex300, сейчас, как и прошлые два года, считай сам "тянет" движок, которые многие талантливые люди бросили из-за такой власти, думаю как раз поэтому и появилась идея создания форума поддержки пользователей Cotonti своими силами.
3. Правила выбора языка в файле ".htaccess".
Надеюсь у вас уже установлены программы "FileZilla Client" и "Notepad++" или их достойные аналоги.
В корне сайта, открываем файл
/public_html/.htaccess
если он пустой, - копируем в него всё, что в файле тут же в "sef-urls.htaccess".
находим строку
# Language selector RewriteRule ^(en|ru|de|nl|ua)/(.*) $2?l=$1 [QSA,NC,NE,DPI]
и если у нас в системе будет, например, всего два языка, - русский и английский, то приводим правило как указано ниже:
# Language selector RewriteRule ^(en|ru)/(.*) $2?l=$1 [QSA,NC,NE,DPI]
Ни больше и не меньше. Лучше скопировать отсюда код этого правила и вписать в свой файл.
Сохраняем его и закрываем.
4. Тэгируем мультиязычность по шаблонам своего сайта на котонти.
Всегда можно посмотреть как правильно прописать теги для мультиязычности сайта в исходном коде движка CMS Cotonti.
Как и в любых подобных случаях, тегирование в своих собственных шаблонах нужно в точности как это сделано в шаблонах кода установочного пакета, а уже затем дополнять и/или "регулировать" под свои нужды.
В разделе "Бесплатные шаблоны для CMS Cotonti" можно скачать и установить себе шаблон «Cotcom», в котором уже прописаны теги для локализации и мультиязычности сайта.
Тегирование осуществляется с учетом вашей html-разметки.
Покажу как это сделано у меня с использованием «UIkit».
4.1. Язык html-документа. Шаблон header.tpl.
Внимательно смотрим что у нас сразу за "DOCTYPE html"
Если там строка вида:
<html lang="{PHP.cfg.defaultlang}">
меняем её на:
<html lang="{PHP.lang}">
4.2. Переключение языка на сайте. Шаблон тот же, - header.tpl.
Там, где у нас череда элементов меню, внутри <ul> ...</ul> вставляем код
<!-- BEGIN: I18N_LANG -->
<li>
<div class="uk-inline uk-text-center">
<a class="uk-link-heading" uk-tooltip="{PHP.L.header.Interface_Localization}" href="#">
<!-- IF {PHP.i18n_locale} == 'ru' -->
<span class="uk-btn-icon-fa uk-btn-scmtdlight">
<img src="{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/img/flags/flag-ru.webp" class="" alt="{PHP.L.header.Interface_Localization}">
</span>
<!-- ENDIF -->
<!-- IF {PHP.i18n_locale} == 'en' -->
<span class="uk-btn-icon-fa uk-btn-scmtdlight">
<img src="{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/img/flags/flag-uk.webp" class="" alt="{PHP.L.header.Interface_Localization}">
</span>
<!-- ENDIF -->
<div class="uk-navbar-subtitle uk-margin-3-top">
<span class="uk-text-uppercase uk-link-heading">{PHP.i18n_locale}</span>
</div>
</a>
</div>
<div class="uk-navbar-dropdown uk-border-rounded uk-position-z-index-999 shadow-scmtdlight uk-background-default uk-card-hover" uk-dropdown="pos:bottom-left;">
<ul class="uk-nav uk-navbar-dropdown-nav-forum uk-nav-divider uk-nav-menu" uk-nav>
<!-- BEGIN: I18N_LANG_ROW -->
<li>
<a class="dropdown-item uk-link-scmtdlight" href="{I18N_LANG_ROW_URL}">
<img src="images/flags/{I18N_LANG_ROW_FLAG}.png" class="uk-margin-small-x" alt="{I18N_LANG_ROW_CODE}">{I18N_LANG_ROW_TITLE} </a>
</li>
<!-- END: I18N_LANG_ROW -->
</ul>
</div>
</li>
<!-- END: I18N_LANG -->
в результате получаем такое дроп меню со списком языков для выбора пользователем локализации сайта на Cotonti.
4.3. Кнопка (ссылка) на страницу локализации контента статьи. Шаблон - page.tpl.
И так, у нас есть некая статья на русском. Но как обратиться к форме создания и редактирования перевода текста и вообще содержимого статьи с русского на английский?
Открываем шаблон полной статьи
он долже быть у вас по адресу
public_html/themes/YourSkin*/modules/page/page.tpl
* YourSkin - это имя вашей темы (папка основного шаблона вашего сайта с пользовательскими шаблонами модулей, плагинов, стилей, скриптов и т.д.)
В теле страницы находим блок "CoTemplate" администрирования страницы
<!-- BEGIN: PAGE_ADMIN -->
Your HTML-code ...
<!-- END: PAGE_ADMIN -->
и перед закрытием блока, перед кодом
<!-- END: PAGE_ADMIN -->
добавляем код
<!-- IF {PHP.cot_plugins_active.i18n} -->
<div class="uk-card uk-card-small shadow-sldlight uk-background-blur-sldlight uk-card-hover uk-border-rounded uk-margin-medium-bottom">
<div class="uk-card-body">
<!-- BEGIN: I18N_LANG -->
{PHP.L.Language}:
<ul>
<!-- BEGIN: I18N_LANG_ROW -->
<li>
<a href="{I18N_LANG_ROW_URL}">{I18N_LANG_ROW_TITLE}</a>
</li>
<!-- END: I18N_LANG_ROW -->
</ul>
<!-- END: I18N_LANG -->
<div class="buttons">{PAGE_I18N_TRANSLATE} {PAGE_I18N_DELETE}</div>
</div>
</div>
<!-- IF {PHP.pag_i18n_locales} > 1 -->
<div class="uk-card uk-card-small shadow-sldlight uk-background-blur-sldlight uk-card-hover uk-border-rounded uk-margin-medium-bottom">
<div class="uk-card-body">
<p class="uk-card-title">{PHP.L.Language}:</p>
<!-- IF {PHP.usr.maingrp} == 5 OR {PHP.usr.isadmin} -->
<!-- IF {PHP.i18n_locale} == 'ru' -->
<p class="uk-text-warning">{PHP.L.pages_IF_i18Language}</p>
<!-- ENDIF -->
<!-- ENDIF -->
<!-- IF {PHP.i18n_admin} -->
<ul class="uk-list uk-list-divider">
<!-- IF {PHP.pag.ipage_locale} == 'en' -->
<a href="{PAGE_ADMIN_EDIT_URL}" class="uk-button uk-button-warning">{PHP.L.i18n_editing}</a>
<!-- ENDIF -->
</ul>
<!-- ENDIF -->
</div>
</div>
<!-- ENDIF -->
<!-- ENDIF -->
Теперь в файл русской локализации своей темы
public_html/themes/YourSkin/YourSkin.ru.lang.php
нужно прописать подсказку:
/** * PAGE BEGIN */ $L['pages_IF_i18Language'] = 'Чтоб появилась кнопка для редактирования перевода на английский, нужно выбрать английскую локализацию интерфейса';
которую выведет глобальный {PHP.L.pages_IF_i18Language} администратору и пользователя в русскоязычной версии сайта на этой странице.
выглядит это вот так:
а если переключить язык сайта с русского на английский, - получаем такой скрин:
и сама кнопка уже, приведет нас на страницу с формой создания и редактирования перевода текста и содержимого статьи с русского на английский.
Скажем запасные/альтернативные варианты перейти на страницу с формой редактирования уже сделанного перевода
<a href="{PHP|cot_url('plug', 'e=i18n&m=page&a=edit&id={PHP.pag.page_id}')}" class="uk-button uk-button-success">{PHP.L.i18n_editing}</a>
или
<a href="{PHP|cot_url('plug', 'e=i18n&m=page&a=edit&id={PHP.pag.page_id}}&l={PHP.i18n_locale}')}" class="uk-button uk-button-danger">{PHP.L.i18n_editing}</a>
По скриншотам можно кликнуть для просмотра в полном размере.
5. Локализация (интернационализация) структуры модуля "Pages".
5.1. Коды категорий прописать в настройках плагина «i18n».
В одной вкладке браузера открываем категории (структура) модуля "Pages".
В панели управления путь выглядит так:
"Управление сайтом ► Расширения ► Pages ► Структура"
или ссылка вида:
https://MySiteCotonti.ltd/admin/structure?n=page
А во второй вкладке браузера, - конфигурацию плагина «i18n».
В поле "Корневые категории для применения i18n", через запятую, прописываем те коды структуры модуля "Pages", которые будем использовать для второго языка локализации, - английского. Вкладку "Структура" не закрываем, она понадобится на следующем этапе инструкции.
Например, в котонти "из коробки" после установки всего четыре категории, и соответственно 4 их кода, - news,articles,events,system.
Категория "system" - скажем это "служебный" раздел, поэтому контент в ней делать мультиязычным дело лично каждого.
Вот первые три кода вносим в строку как на скриншоте, и сохраняем настройки плагина кнопкой "Обновить".
5.2. Перевод названий категорий (структуры) и их описания для модуля "Pages".
Теперь нам понадобилась вкладка браузера "Структура - Администрирование - ..." со списком или таблицей категорий модуля статей, - "Pages".
Жмем вверху кнопку "Интернационализация структуры".
Попадаем на фронтенд, где нужно выбрать язык, для которой будем делать локализацию, перевод на дополнительно установленный язык в системе.
Выбираем нашу локаль,- "English" и вуаля
Вот страница с формой "интернационализации" структуры.
Слева в таблице у нас то, что заполненно на основном (дефолтном) языке системы, а в правой части форма с полями, для заполнения на дополнительном языке, - английском.
С русского перевели на английский, идем вниз страницы, там кнопка "Обновить". Сохраняемся и пользуемся.
Поздравляю с первым вашим мультиязычным сайтом на CMS Cotonti.
Для тех, кому этого мало, - идем дальше и смотрим два скриншота ниже
Заголовок, описание сайта и "буквенный" лого на русском:
Английская версия для заголовка, описания сайта и "буквенного" лого:
Как это делается?
1. Для версии сайта с русским языком.
Открываем файл локализации темы сайта
public_html/themes/YourSkin*/YourSkin*.ru.lang.php
где, YourSkin* - это название вашего основного шаблона.
Вносим в этот файл строки:
/* переопределяем сетап конфигурации того, что у нас в админке Управление сайтом / Конфигурация / Заголовки и мета-теги */ // Заголовок (Название сайта) $cfg['maintitle']='Название сайта на русском'; // Подзаголовок (Описание сайта) $cfg['subtitle']='Описание сайта для русской локализации сайта в строке конфигурации, в файле локализации шаблона сайта'; // Создаем «буквенный» логотип для русской версии $L['title_logo_ru'] = '<span class="uk-text-primary uk-text-bold">IT</span><span class="uk-text-danger uk-text-bold">Сайт Котонти</span><span class="uk-text-secondary uk-text-bold ">RU</span>'; // Создаем переменную «буквенного» логотипа для всех версий // а затем в неё помещаем значение русской версии сайта $L['maintitle_color'] = ''.Cot::$L['title_logo_ru'].'';
2. Для версии сайта с английским языком.
Открываем файл локализации темы сайта
public_html/themes/YourSkin*/YourSkin*.en.lang.php
где, YourSkin* - это название вашего основного шаблона.
Вносим в этот файл строки:
/* redefining the configuration setup of what we have in the admin panel Administration panel / Configuration / Titles and Metas */ // Title (Site name) $cfg['maintitle']='The name of the site'; // Subtitle (Site description) $cfg['subtitle']='Site Description for English localization of the site in the configuration line, in the localization file of the site template'; // Creating a spelling logo for the English version $L['title_logo_en'] = '<span class="uk-text-secondary uk-text-bold">IT</span><span class="uk-text-primary uk-text-bold">Cotonti Site</span><span class="uk-text-danger uk-text-bold">RU</span>'; // Create a variable spelling of the logo for all versions, // and then put the value of the Russian version of the site in it. $L['maintitle_color'] = ''.Cot::$L['title_logo_en'].'';
Теперь, глобально, в любом месте, где нам нужно, в собственном шаблоне прописываем теги
1. {PHP.cfg.maintitle} - заголовок сайта
2. {PHP.cfg.subtitle} - описание сайта
3. {PHP.L.maintitle_color} - «буквенный» логотип
Примечание:
Обратите внимание, что сами локализационные глобальные теги переменных {PHP.L.title_logo_ru} и {PHP.L.title_logo_en} в шаблонах прописsвать не нужно.
Это потому, что их значения мы уже поместили в {PHP.L.maintitle_color} и для каждой версии языка эти значения определили, и они автоматически будут подставляться, взависимости, какой язык интерфейса сайта будет выбран пользователем.
Автор: webitproff