Структура сайта на Джекиле

Расскажу, как устроены сайты, которые я делаю на Джекиле. Не буду дублировать документацию Джекила и документацию ликвида на Шопифай и Гитхабе. Расскажу о неочевидных моментах и соглашениях, понимание которых упростит совместную разработку. Начну с общей структуры проекта, потом расскажу про некоторые пункты подробнее.

▸ _data/       — файлы yml и json, заменяют базу данных. Обычно в них хранят табличные данные
▸ _events/     — Коллекция. Название может быть любым
▸ _includes/   — Инклуды, кусочки кода для повторного использования
▸ _layouts/    — Шаблоны
▸ _posts/      — Статьи блога
▸ _sass/       — Стили
▸ _site/       — Папка с сайтом
▸ css/         — Файлы, которые SASS обработает и сложит в папку /site/css/
▸ img/         — Изображения для элементов дизайна, картинки для страниц и постов
▸ js/          — Скрипты
▸ pages/       — Страницы сайта
  _config.yml  — Конфигурация проекта
  CNAME        — Файл для привязки к доменному имени
  favicon.ico
  feed.xml
  README.md    — Заметки для администраторов сайта и коллег-разработчиков.

Коллекции

Названия коллекций всегда во множественном числе. Они описываются в файле _config.yml:

collections:
  events:
    output: true # генерировать ХТМЛ файлы из элементов коллекции
    permalink: /:path/ # УРЛ страниц по умолчанию.
  speakers:
    output: true
  sponsors:
    output: true
    permalink: /sponsors/:path/

Параметры элементов коллекций можно задать вручную для каждого. А можно ускорить процесс и задать их в настройках по умолчанию:

defaults:
  -
    scope:
      path: "" # любой путь
    values:
      layout: page # все документы используют шаблон «страница», если не указан другой
  -
    scope:
      type: events # все документы коллекции «события» используют шаблон «событие». Переменную «вес» я ввёл для управления порядком событий.
    values:
      layout: event
      weight: 9999999

Подробнее о коллекциях в документации

Инклуды

Кусочки кода для повторного использования. Их можно использовать как функции, потому что в них можно передать переменные. Но они ничего не возвращают, только печатают текст. Чтобы результат выполнения такой функции засунуть в переменную, приходится делать так:

{% capture is_live %} <!-- Захыватываем всё содержимое тега в переменную is_live -->
  {% include func/is_live.html event=e %} <!-- Передаём в инклуд переменную е. Инклуд печатает текст -->
{% endcapture %}
{% assign is_live = is_live | strip %} <!-- В тексте много пустых линий, обрезаем те, что их в начале и в конце -->

Шаблоны

В эти файлы заворачивается содержимое документов, получается ХТМЛ страница. Тег {{ content }} в шаблоне печатает содержимое документа, который его использует. Какой шаблон документу использовать, написано у документа во фронтматере. Шалоны могут использовать другие шаблоны.

Переменные

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