Настройка и кастомизация темы Jekyll

Настройка и кастомизация темы Jekyll

Jekyll-темы распространяются двумя способами: как gem-пакеты (устанавливаются через Bundler) и как обычные репозитории (копируются напрямую). Механизм кастомизации различается, но принцип override одинаковый: файлы в корне проекта перекрывают файлы темы.

Gem-based темы: как это работает

Когда тема установлена как gem, её файлы находятся в директории Ruby gems, не в проекте:

bundle info --path minima
# => /path/to/gems/minima-2.5.1

Для просмотра файлов темы:

bundle exec jekyll theme-files

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

# Скопировать лейаут темы в проект
cp $(bundle info --path minima)/_layouts/post.html _layouts/post.html

# Скопировать партиал
cp $(bundle info --path minima)/_includes/header.html _includes/header.html

После этого редактировать скопированный файл — Jekyll автоматически использует его вместо оригинала.

Настройка через _config.yml

Большинство тем читают параметры из конфига. Пример для популярной темы Minimal Mistakes:

# Тема
remote_theme: "mmistakes/[email protected]"

# Скин темы
minimal_mistakes_skin: "air" # "default", "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"

# Параметры сайта
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]"
    - label: "LinkedIn"
      icon: "fab fa-fw fa-linkedin"
      url: "https://linkedin.com/in/username"

# Навигация
navigation:
  - title: "Главная"
    url: /
  - title: "Блог"
    url: /blog/
  - title: "О нас"
    url: /about/

# Аналитика
analytics:
  provider: "google-gtag"
  google:
    tracking_id: "G-XXXXXXXXXX"
    anonymize_ip: false

# Комментарии
comments:
  provider: "disqus"
  disqus:
    shortname: "mysite"

Кастомизация стилей

Gem-темы обычно позволяют добавить кастомные стили через специальный файл. Для Minima:

/* assets/css/style.scss */
---
---
@import "minima";

/* Ваши переопределения */
:root {
  --base-font-size: 16px;
  --base-line-height: 1.7;
  --brand-color: #2563eb;
  --brand-color-dark: #1e40af;
}

.site-header {
  border-top: 4px solid var(--brand-color);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.post-title {
  font-size: 2.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

Для Minimal Mistakes — через _sass/minimal-mistakes/_variables.scss (нужно скопировать из gem):

/* _sass/minimal-mistakes/_variables.scss */
$sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !default;
$monospace: "JetBrains Mono", "Fira Code", monospace !default;

$primary-color: #2563eb !default;
$success-color: #22c55e !default;
$warning-color: #f59e0b !default;
$danger-color: #ef4444 !default;

$border-radius: 6px !default;
$box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1) !default;

Переопределение шаблонов Liquid

Пример: добавить таблицу содержания (TOC) в лейаут поста:

<!-- _layouts/post.html -->
---
layout: default
---
<article class="post h-entry">
  <header class="post-header">
    <h1 class="post-title p-name">{{ page.title | escape }}</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}">
        {{ page.date | date: "%d %B %Y" }}
      </time>
      {% if page.author %}· {{ page.author }}{% endif %}
    </p>
  </header>

  {% if page.toc %}
  <aside class="toc">
    <h2>Содержание</h2>
    {% include toc.html html=content %}
  </aside>
  {% endif %}

  <div class="post-content e-content">
    {{ content }}
  </div>

  {% if page.tags.size > 0 %}
  <div class="post-tags">
    {% for tag in page.tags %}
    <a href="/tags/{{ tag | slugify }}/" class="tag">#{{ tag }}</a>
    {% endfor %}
  </div>
  {% endif %}
</article>

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

Если тема не предусматривает нужный компонент, создаём в _includes/:

<!-- _includes/cta-banner.html -->
{% assign bg = include.bg | default: "primary" %}
{% assign title = include.title %}
{% assign subtitle = include.subtitle %}
{% assign button_text = include.button_text | default: "Узнать больше" %}
{% assign button_url = include.button_url | default: "/contact/" %}

<section class="cta-banner cta-banner--{{ bg }}">
  <div class="container">
    <h2>{{ title }}</h2>
    {% if subtitle %}
    <p>{{ subtitle }}</p>
    {% endif %}
    <a href="{{ button_url }}" class="btn btn--primary">{{ button_text }}</a>
  </div>
</section>

Использование в странице или лейауте:

{% include cta-banner.html
  title="Готовы начать проект?"
  subtitle="Обсудим ваши задачи и подберём решение"
  button_text="Связаться"
  button_url="/contact/"
  bg="dark"
%}

Управление навигацией

Для сложных меню — через _data/navigation.yml:

main:
  - title: "Услуги"
    url: /services/
    children:
      - title: "Веб-разработка"
        url: /services/web/
      - title: "Мобильные приложения"
        url: /services/mobile/
  - title: "Блог"
    url: /blog/
  - title: "Контакты"
    url: /contact/

<!-- _includes/header.html -->
<nav>
  {% for item in site.data.navigation.main %}
  <div class="nav-item {% if item.children %}has-dropdown{% endif %}">
    <a href="{{ item.url | relative_url }}"
       {% if page.url == item.url %}aria-current="page"{% endif %}>
      {{ item.title }}
    </a>
    {% if item.children %}
    <ul class="dropdown">
      {% for child in item.children %}
      <li><a href="{{ child.url | relative_url }}">{{ child.title }}</a></li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
  {% endfor %}
</nav>

Сроки

Настройка gem-темы через конфиг и кастомный CSS — 1–2 дня. Override шаблонов, добавление кастомных партиалов и данных — 3–5 дней.