Дабы заявить о себе, как о конкурентоспособной единице, мы изучаем новые технологии и применяем их на практике. При разработке нашего сайта, было решено опробовать Jekyll.
Jekyll — это генератор статических сайтов, который поддерживает хостинг на Github Pages. Реализован на Ruby. Данный генератор имеет все условия для создания элементарной логики вывода информации на страницы, а также размещения этих страниц на сайте. Основная его задача — генерация статического блога.
Но мы пошли нестандартным путем и поставили перед собой следующий план действий: создать сайт команды с информацией о проектах, составе коллектива, раскрытие нашей политики относительно проектов и всё это на трёх языках (Мультиязычность).
Мультиязычность можно организовать достаточно просто, если размещать все файлы в подпапке с флагом языка (ru, en) www.site.ru/ru/страница. Но требовался другой подход, а именно, русский язык должен был быть основным, а en и de второстепенными. Вопрос был решен использованием переменной permalink. Jekyll рассматривает файлы как статические и динамические, статические файлы он просто переносит при генерации в те же директории, а в динамические подставляет данные средствами YAML и Liquid. Каждый динамический файл содержит в начале конструкцию:
--- #Тут переменные Yaml ---
Переменная permalink отвечает за расположение страницы после генерации. Что позволяет файлы с переводами на en и de вынести в поддиректории.
Следует заметить, что в каждый файл мы добавили переменную language, для указания языка. (см. примеры ниже)
Переключение языков осуществляется тоже средствами Jekyll. На кнопках ru/en/de он собирает ссылки ведущие на тот же файл нужного языка. Соответственно пользователя при переключении языка не выбрасывает обратно на главную страницу и ему не приходится искать то, что у него уже было открыто. Составление ссылок происходит так:
Для RU:
<a href ="[[ site.baseurl ]][[ page.handle ]]">
Для EN:
<a href ="[[ site.baseurl ]]/en[[ page.handle ]]">
Аналогично для DE.
handle — переменная добавленная в каждый файл, хранит себе путь к файлу без указания языка.
baseurl — переменная, хранящая в себе url до основной директории, в которой лежит сайт, устанавливается в файле _config.yml. В нашем случае не потребовалось ее использовать.
Но если бы мы делали отдельно блог на jekyll, то в эту переменную вписали бы что-то в духе /blog.
В процессе работы стало ясно, что для переключения между проектами пользователю придется каждый раз выходить на страницу со списком и искать следующий или предыдущий проект. Посудите сами — не очень удобно. Мы решили добавить кнопки, чтобы пользователь мог листать проекты один за другим, не отвлекаясь. И тут встал вопрос, как собрать ссылку на следующий и предыдущий проект используя только Jekyll. В данном инструменты для постов такая функция есть по умолчанию, но не для коллекций. Решение оказалось простым, хотя и требует больше времени на обработку:
{% if page.collection == 'cases' %}
#Проверка входит ли страница в коллекцию "проекты"
{% assign items = site.cases | where: "language", page.language %}
#Создаем массив со страницами только того языка, который у открытой страницы
{% endif %}
{% for item in items %}
#Циклом проходим по массиву со страницами
{% if item.title == page.title %}
#Если title совпадает, значит мы нашли проект который сейчас открыт
{% assign previous = forloop.index0 | minus: 1 %}
#Добавляем в переменную индекс предыдущей страницы
{% if previous >= 0 %}
#Проверяем чтобы индекс предыдущей страницы был не ниже нуля
<a class='link' href="[[ items[previous].url | prepend: site.baseurl ]]">
{% endif %}
#Составляем ссылку на предыдущий проект
#prepend перед items[previous].url добавляет baseurl сайта
#Аналогично делается для "следующего" проекта
{% assign next = forloop.index0 | plus: 1 %}
{% if next < forloop.length %} #Индекс должен быть меньше длины массива
<a class='link' href="[[ items[next].url | prepend: site.baseurl ]]">
{% endif %}
{% endif %} #Конец блока проверки item.title == page.title
{% endfor %} #Конец блока цикла item in items
Переводы всех кнопок вынесены в директорию _data и разбиты по файлам для удобства. В файле выглядит так:
case_button_see: ru: Посмотреть en: Look de: Anblicken
Выводится:
<a>[[ site.data.translate.index_cases_button[page.language] ]]</a>
Еще мы решили оставить необходимость показывать пользователю его местоположение на сайте, а именно breadcrumbs (хлебные крошки).
Jekyll поддерживает коллекции, расположены в _collection, по умолчанию используется для posts (постов), мы же добавили еще одну коллекцию cases (проекты). Внутри каждой коллекции идет разбивка на языки. На странице вывода списка проектов или постов, выводятся только те, у которых язык соответствует выбранному.
Пример:
{% assign cases = site.cases | where: "language", page.language %}
{% for case in cases %}
{% include card_case.html %} # Вывод карточки проекта
{% endfor %} Хлебные крошки для страниц вынесены в отдельный файл breadcrumbs.html (позволяет вставлять их в код страниц в любом месте) и реализованы так:
{% assign pages = site.pages | where: "language", page.language %}
{% for object in pages %}
{% if object.layout == 'index' %}
# Первым элементом выводится домашняя страница этого же языка
<a class="breadcrug-margin__bottom-item" href="[[ site.baseurl ]][[ object.url ]]">[[ object.caption ]]</a>
# Caption — переменная добавленная в файлы, содержит заголовок страницы на выбранном языке, т.к. title используется для meta тегов
{% endif %}
# Далее идет проверка принадлежит ли данная страница какой-нибудь коллекции
{% if object.layout == page.collection %}
{% if object.layout == page.collection %}
# layout — стандартная переменная, содержит указание какой шаблон использовать для данного файла, шаблоны лежат в _layouts.
# Стоит отметить что название шаблона вывода всех проектов, совпадает с названием коллекции в которой они хранятся
<a class="breadcrug-margin__bottom-item" href="[[ site.baseurl ]][[ object.url ]]">[[ object.caption ]]</a>
{% endif %}
{% endfor %} # Конец цикла object in pages
# Последним элементом выводится страница открытая в данный момент
<span class="breadcrug-margin__bottom-item active">[[ page.caption ]]</span> Иногда может возникнуть потребность в выводе целого куска html кода при определенных условиях, в нашем случае только для страниц русского сегмента, это наш модифицированный Jekyll тоже может. Пример:
{% if page.language == 'ru' %}
<p><input type="checkbox" name="agree" checked="checked">
Я согласен с <a class='link' href="/assets/docs/policy-for-personal-data-processing.pdf">обработкой персональных данных</a>
</p>
{% endif %} Данный код выведет подтверждение на обработку персональных данных только на страницах с русским языком.
Еще одна интересная особенность работы с данными, это возможность добавлять свои данные из Jekyll в javascript.
В начале файла добавляем конструкцию
--- ---
Файл после этого становится динамичным и Jekyll проверяет его на наличие Liquid вставок
Пример использования:
const error = [[ site.data.modal.error | jsonify ]]; # # site.data.modal.error — директория _data файл modal.yml массив error: # # error: # ru: Ошибка # en: Error #
Он сохраняет его в переменную js, и остается только получить значение путем подставления индекса или ключа. Например, язык страницы:
const lang = document.querySelector('html').getAttribute('lang');
# <html lang="[[ page.language ]]"> //так выглядит начало каждой страницы
document.innerHTML = error[lang]; Таким образом можно осуществлять переводы текстов выводящихся скриптами.
Jekyll хоть и достаточно прост, но это не исключает его уникальности. Если его стандартного функционала недостаточно, то можно установить готовый плагин или же написать его самому и включить в сборку. Он отлично подходит для небольших сайтов, без использования базы данных. Крайне удобен при небольшом количестве информации. Он станет отличным решением для создания личного блога или сайта-визитки. Из минусов отмечу, что при изменений каких либо файлов требуется пересборка всего сайта и перезалив на хостинг. Если используется хостинг с системой unix, то jekyll можно запускать прямо на хостинге. Он требует знаний продвинутого пользователя: подключение к хостингу по ftp, поиск и редактирование нужного файла, пересборка сайта. Как не прискорбно, чувствуется отсутствие административной панели. Но, если вы хоть немного разбираетесь в данной сфере, то вам не составит труда сделать это, взамен вы получите легкий сайт, быструю загрузку, поисковики будут вам рады, а вы рады новым клиентам.