Настройка и кастомизация Jekyll-темы: стили, шаблоны, плагины

Jekyll: настройка и кастомизация темы под ключ

Jekyll — генератор статических сайтов, который часто выбирают для блогов, документации и лендингов. Когда стандартная тема (Minima, Minimal Mistakes) не вписывается в брендбук, начинается кастомизация. Мы настраиваем Jekyll-темы под ключ: от переопределения шаблонов до внедрения кастомных SCSS-стилей и плагинов. За 5 лет работы с Jekyll мы выполнили более 20 проектов — от простых блогов до многостраничников с 5000+ страницами. Кастомизация экономит до 40% времени на разработку по сравнению с созданием темы с нуля, а готовый сайт работает на 30% быстрее типовых решений на CMS.

Основные способы распространения тем

Существует два подхода: gem-based (тема как Ruby gem) и remote theme (из GitHub). Gem-based темы устанавливаются через Bundler, их файлы хранятся в директории Ruby gems. Remote theme копируется напрямую при сборке. Механизм кастомизации схож: файлы в корне проекта перекрывают файлы темы. Однако есть нюансы.

Для gem-based используем команду bundle exec jekyll theme-files, чтобы увидеть все файлы темы, и копируем нужные в проект. Как описано в Jekyll documentation.

Как переопределить шаблоны в Jekyll?

Для override скопируем файл из gem в корень проекта, сохранив структуру папок. Например, скопировать лейаут поста:

cp $(bundle info --path minima)/_layouts/post.html _layouts/post.html 

После этого редактируем скопированный файл. Jekyll при сборке использует файл из корня проекта, а не из gem. Это стандартный механизм для всех путей: _layouts/, _includes/, _sass/.

Настройка через _config.yml и кастомизация стилей

Большинство тем читают параметры из _config.yml. Пример для Minimal Mistakes:

remote_theme: "mmistakes/[email protected]" minimal_mistakes_skin: "air" locale: "ru-RU" title: "Название сайта" name: "Команда" description: "Описание" url: "https://example.com" author: name: "Имя" avatar: "/assets/images/avatar.jpg" bio: "Краткое описание" links: - label: "Email" icon: "fas fa-fw fa-envelope-square" url: "mailto:[email protected]" navigation: - title: "Главная" url: / - title: "Блог" url: /blog/ 

Обратите внимание: параметры тем часто живут в документации. Мы всегда проверяем актуальную версию темы.

Gem-темы обычно позволяют добавить кастомные стили через assets/css/style.scss. Для Minima:

--- --- @import "minima"; :root { --base-font-size: 16px; --base-line-height: 1.7; --brand-color: #2563eb; } .site-header { border-top: 4px solid var(--brand-color); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } 

Для Minimal Mistakes — через _sass/minimal-mistakes/_variables.scss (скопированный из gem). Такой подход гарантирует, что изменения не потеряются при обновлении темы (если не перезаписывать при обновлении).

Переопределение шаблонов Liquid и управление навигацией

Пример: добавить таблицу содержания (TOC) в лейаут поста. Создаём _layouts/post.html с условием:

--- layout: default --- <article> <header>...</header> {% if page.toc %} <aside class="toc"> <h2>Содержание</h2> {% include toc.html html=content %} </aside> {% endif %} <div class="post-content">{{ content }}</div> </article> 

Для сложных меню используем _data/navigation.yml, где определяем иерархию пунктов. В _includes/header.html выводим их через цикл с проверкой на подпункты.

Кастомные компоненты и частые проблемы

Если тема не предусматривает нужный элемент (например, CTA-баннер), создаём кастомный партиал в _includes/. Партиалы принимают параметры и легко вставляются через {% include %}.