Эта первая часть серии статей о том, как создать мультиязычный блог с помощью OctoberCMS .

• Часть 1

Поддержка нескольких языков на сайте может быть серьезной проблемой. Если вы не будете использовать правильные инструменты, то разработка займет у вас намного больше времени, чем разработка обычного сайта.

В серии этих туториалов я расскажу вам, как использовать OctoberCMS для разработки такого сайта.

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

• Домашнюю страницу, со статическим контентом и последними статьями в блоге
• Различные страницы со статическим контентом
• Блог — включает в себя посты блога и категории
• Страница для просмотра полного поста блога
• Страница просмотра категории

Для готового каркаса сайта мы возьмем тему и плагины из магазина OctoberCMS:

• Flat UI theme — Flat UI тема, которая использует Twitter Bootstrap как основу. На данный момент это самая скачиваемая тема в магазине
• Translate plugin — предоставляет возможность мультиязычности для сайта и плагинов
• Static Pages plugin — управление контентом, навигацией, страницами сайта. «Мастхэв» для клиентов, которые не умеют программировать

Подготовка рабочего окружения

Самый простой способ устанавливать плагины и темы из магазина OctoberCMS — это создать аккаунт на octobercms.com. Любой плагин или тема, которую вы добавите себе на octobercms.com будет автоматически установлен в вашем приложении при обновлении. Как установить саму CMS — вы можете прочитать здесь.

Translate-плагин

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

Для переключения языка на сайте есть несколько решений:

1. Нужный язык может быть частью URL (т.е http://example.com/fr)
2. Посетители могут выбрать язык с помощью элементов управления на сайте

Мы будем использовать второй вариант.

Все строки, которые вы выводите с помощью фильтра Twig _ (подчеркивание), автоматически станут «мультиязычными». Вы можете перевести их в админке, в разделе Settings -> Translate Messages page. Пример:

<title>{{ 'О нас'|_ }}</title>

При обновлении страницы, строка О нас автоматически добавится в таблицу переводов плагина Translate, где вы сможете перевести строку на разные языки.

Если вы хотите опубликовать или написать что-то на другом языке, будь это пост в блоге или просто текст, то выберите нужный язык прямо в редакторе.

Чистим тему от лишнего (не обязательно)

Несмотря на то, что можно писать тему самостоятельно, есть смысл взять готовую тему за основу, поскольку она определяет основную структуру сайта и поможет вам понять, как работают темы OctoberCMS. Flat UI — очень гибкая тема но содержит много страниц, которые не нужны для нашего проекта. Это можно исправить.

Перейдем в каталог pages нашей темы. Оттуда можно удалить каталоги shop и portfolio, файл ui-elements.htm и все файлы в каталоге samples, кроме about.htm. Далее переходим в partials и удаляем каталог shop который нам тоже не нужен.

Создание меню

Есть несколько инструментов, с помощью которых мы можем сделать меню. Например, можно использовать плагин Static Pages, в котором есть визуальный инструмент для создания меню. Это идеальный вариант для больших сайтов, где структура навигации будет быстро развиваться.

Другой вариант — написать код меню вручную прямо в шаблонах, как это сделано в нашей теме. Главное меню определено в файле partials/nav.htm.

Откройте partials/nav.html в текстовом редакторе и удалите все, что находится выше <nav id="layout-nav" .... Также удалите {{ nav.render_menu(links) }} и кнопку Sign in.

Мы очистили файл от лишнего, давайте добавим пункты меню. Меню использует бутстраповскую разметку с примесями фишек October. Фильтр page возвращает url по пути файла. Использовать его, конечно, не обязательно, но с ним все же будет проще.

<ul class="nav navbar-nav navbar-right">
  <li class="{{ 'blog' == currentPage ? 'active' }}">
      <a href="{{ 'blog/blog'|page }}">Blog</a>
  </li>
  <li class="{{ 'about' == currentPage ? 'active' }}">
      <a href="{{ 'samples/about'|page }}">About</a>
  </li>
</ul>

Не забыли ли мы что-то? Конечно, нужно еще добавить переводы в меню. Будем использовать уже знакомый нам twig-фильтр:

<a href="{{ 'blog/blog'|page }}">{{ 'Blog'|_ }}</a>
...
<a href="{{ 'samples/about'|page }}">{{ 'About'|_ }}</a>.

Готово. Обновите страницу и вы увидите ваше меню на английском языке, а плагин Translate уже добавил ваши строки в список переводов.

Главная страница сайта

Тема Flat UI содержит себе главную страницу, на которой находится много лишнего: форма регистрации, последние твиты, много ненужных блоков.

форма регистрации, последных твитов, много ненужных блоков.

Чтобы упростить ее вид, мы уберем оттуда лишнее. Откройте home.htm в вашем текстовом редакторе и удалите весь блок с классом home-title и div-элемент с классом recent-tweets.

Теперь мы заменим блок What we do на блок с контентом, который мы сможем изменять в админке. Эту возможность нам дает плагин Static Pages. Перейдите в раздел Pages в админке October и выберете пункт Content в сайдбаре. Нажмите на кнопку Add и введите home-intro в поле для имени файла. Добавьте любой текст в его содержимое и сохраните файл. Мы вернемся к нему позже.

Вернитесь к файлу home.htm и замените весь контент внутри div'а с классом col-sm-12 на код с content тэгом:

{% content "home-intro.htm" %}

Сохраните файл и перейдите на главную страницу сайта. Там вы должны увидеть то, что мы написали в файле home-intro.htm.

Страницы «О нас» и «404»

Эти страницы будут содержать только статический переводимый контент, так что процесс их создания по сути повторяет наши предыдущие манипуляции с домашней страницей. Создайте новые файлы в Pages, удалите ненужный контент из samples/about.htm и 404.htm и замените его на content конструкцию с вашими только что созданными файлами.

Переключатель языка

Теперь нужно сделать возможность переключения языка для посетителей сайта. Translate плагин содержит в себе компонент переключателя языка, и мы сможем легко добавить его к себе на сайт. Разместим его в футере, прямо под меню.

Компоненты можно добавлять просто прописав их вручную в нужном файле, но намного проще сделать это с помощью drag and drop'а в админке OctoberCMS. Откройте default.htm в админке. Нажмите на вкладку Components в сайдбаре, найдите секцию Transalte, возьмите ее и переместите в footer в HTML-редакторе. Готово. Конечно, можно добавить компоненту стилей, но он работает и без этого.

Добавление новых языков и переводимых строк

Если мы зайдем на сайт сейчас, то увидим, что в переключателе есть всего лишь один язык. Вы можете добавить больше, перейдя в Settings > Translate > Manage Languages в админке. После добавления языков откройте страницу Translate messages.

Левая часть отображает все переводимые строки, которые плагин Translate нашел на вашем сайте. Так же там будут некоторые стандартные строки из темы Flat UI, которые можно удалить.

На станице настроек вы можете переводить все строки, которые были определены в шаблонах; но что насчет блоков с контентом? Это очень просто. Редактор контента в плагине Pages имеет в себе переключатель языка в верхнем правом углу. Выберете нужный язык и введите текст на другом языке.

Заключение

Конечно, сайт все еще содержит текст, который не был переведен, но теперь вы знаете, что с этим делать.

Переводимые строки и контент являются лишь вершиной айсберга. С помощью плагина Pages вы можете создать меню и мультиязычные страницы, которые ваши клиенты могут редактировать в режиме WYSIWYG. Это будет рассмотрено в будущих статьях.

Вот несколько статей и уроков, где более подробно разбираются некоторые плагины и возможности октября.

• Видеоурок по созданию сайта с простым управлением для ваших клиентов
• Статья о плагине Static Pages
• И еще одна

Во второй части статьи мы добавим на наш сайт мультиязычный блог.