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 | Remote theme |
|---|---|---|
| Установка | gem "minima" в Gemfile |
remote_theme: "owner/repo" |
| Локация файлов | В gems директории | Копируются в _sass/, _layouts/ |
| Гибкость кастомизации | Полный override | Ограниченный override (сложнее переопределить партиалы) |
| Рекомендация | Для детальной настройки | Для быстрого старта |
Для 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 %}.
Типичные ошибки при кастомизации
- Конфликт имён файлов: если скопированный файл не соответствует структуре, Jekyll не подхватит его.
- Устаревшие переменные: при обновлении темы некоторые переменные могут быть удалены.
- Проблемы с зависимостями: плагины требуют указания в Gemfile.
Мы проверяем сборку после каждого изменения и используем bundle exec jekyll serve с флагом --verbose для диагностики.
| Цель кастомизации | Подход |
|---|---|
| Изменение цветовой схемы | CSS custom properties, SCSS variables |
| Добавление нового типа страниц | Создание нового layout и коллекции |
| Интеграция внешних сервисов | Партиалы, плагины |
Как проходит процесс кастомизации?
- Анализ — изучаем текущую тему и требования к кастомизации.
- Проектирование — выбираем стратегию: gem или remote theme.
- Настройка конфига — прописываем параметры темы.
- Override шаблонов — копируем и редактируем нужные файлы.
- Кастомизация стилей — подключаем кастомные SCSS/CSS.
- Добавление компонентов — создаём партиалы для недостающих элементов.
- Тестирование — проверяем локально и на CI.
- Деплой — публикуем на хостинге.
Что входит в кастомизацию Jekyll-темы?
При заказе кастомизации Jekyll-темы под ключ мы предоставляем:
- анализ текущей темы и список изменений;
- настройку
_config.ymlиGemfile; - переопределение шаблонов (layout, includes);
- кастомизацию стилей (SCSS, CSS custom properties);
- добавление кастомных компонентов;
- интеграцию аналитики и комментариев;
- тестирование на всех страницах;
- инструкцию по обновлению темы;
- доступ к репозиторию проекта.
Сроки и стоимость
Сроки настройки зависят от объёма: простая настройка через конфиг и CSS — от 1 до 2 дней. Override шаблонов и добавление кастомных компонентов — от 3 до 5 дней. Точную стоимость рассчитываем индивидуально, исходя из сложности темы и требований. Свяжитесь с нами — оценим проект бесплатно.
Мы работаем с Jekyll более 5 лет, выполнили более 20 проектов на статических сайтах. Гарантируем результат: сайт будет соответствовать вашим ожиданиям и Core Web Vitals. Закажите кастомизацию Jekyll-темы под ключ — получите современный статический сайт.
Для справки: Jekyll — популярный генератор статических сайтов, используемый для блогов и документации.