Налаштування та кастомізація теми 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: "uk-UA"
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 днів.