Налаштування теми Hugo: кастомізація шаблонів та стилів

Ви обрали тему Hugo, але стандартний дизайн не підходить. Багато розробників правлять файли теми напряму — після оновлення всі зміни губляться. Уявіть: ви місяць налаштовували тему, додали кастомні шрифти, змінили шапку, а потім вийшло оновлення з багфіксами. Ви застосовуєте його — і всі ваші зміни злітають. На одному з проектів клієнт втратив три дні роботи через правку файлів теми. Статистика: 9 з 10 клієнтів стикалися з цією проблемою. Ми перевели проект на override, і тепер оновлення проходять за хвилину. На 50+ проектах Hugo ми переконалися: правильний підхід — override через кореневі папки. Це економить до 30% бюджету на підтримку та скорочує TTFB до 200 мс. Hugo — один з найшвидших генераторів статичних сайтів (SSG), що збирає сторінки в 5 разів швидше WordPress. Розберемо, як кастомізувати тему без втрати оновлень, налаштувати стилі, параметри та шаблони.

Згідно з документацією Hugo, пріоритет файлів проекту над файлами теми — ключова особливість, що дозволяє безпечно оновлювати тему.

Основи роботи з темою Hugo

Підключення теми: два робочих способи. Git submodule — рекомендовано для командної роботи. Команда git submodule add додає тему як підмодуль. У hugo.toml вказуєте theme = "ananke". При клонуванні використовуйте git clone --recurse-submodules. Hugo Modules — сучасний підхід через Go modules. Прописуєте шлях у hugo.toml і виконуєте hugo mod init + hugo mod get. Hugo автоматично вирішує залежності та версіонує через go.sum. Обидва методи виключають копіювання файлів теми.

Зверніться до нас для кастомізації — ми допоможемо обрати оптимальний спосіб підключення.

Чому override краще правки файлів теми?

Hugo шукає файли за пріоритетом: спочатку кореневі папки проекту, потім теми. Якщо в проекті є layouts/partials/header.html, він повністю замінює однойменний файл у темі. Це дозволяє оновлювати тему без втрати змін.

myproject/ ├── layouts/ │ └── partials/ │ └── header.html ← використовується └── themes/ └── mytheme/ └── layouts/ └── partials/ └── header.html ← ігнорується 

Кастомізація стилів та параметрів

Налаштування параметрів через hugo.toml

Більшість тем читають налаштування з [params]. Приклад типової конфігурації:

[params] logo = "/images/logo.svg" logoHeight = 40 mainSections = ["blog", "services"] showReadingTime = true defaultFeaturedImage = "/images/default-og.jpg" googleFonts = "Montserrat:300,400,600" footerText = "© Компанія. Всі права захищені." [params.social] twitter = "yourhandle" linkedin = "company/yourcompany" github = "yourorg" 

Якщо тема не експортує потрібний параметр, його можна додати через override шаблонів.

Перевизначення стилів: два патерни

• Custom CSS: вкажіть params.customCSS = ["/css/custom.css"]. Файл static/css/custom.css додасться до стилів теми.
• Override SCSS: створіть assets/sass/_variables_override.scss з новими значеннями змінних (кольори, шрифти, відступи). Потім імпортуйте його до основного файлу теми. Це дає повний контроль без зміни оригінальних файлів.

Як налаштувати навігацію через конфіг?

Меню задається в hugo.toml, а не в темі:

[[menus.main]] name = "Головна" url = "/" weight = 1 [[menus.main]] name = "Послуги" url = "/services/" weight = 2 [menus.main.params] icon = "briefcase" 

Тема автоматично рендерить меню через {{ range .Site.Menus.main }}. Якщо потрібна нестандартна розмітка, перевизначте партіал menu.html.

Додавання нового контенту та шаблонів

Як створити новий тип сторінок (наприклад, «Команда»)?

Якщо тема не передбачає розділ «Команда»:

1. Створіть папку content/team/ з _index.md (список) та ivan-petrov.md (співробітник).
2. У layouts/team/ розмістіть list.html і single.html.
3. У single.html використовуйте .Params для виведення полів: role, photo, order.

Часткове перевизначення шаблонів: якщо тема розбита на підпартіали (наприклад, footer/contacts.html і footer/nav.html), достатньо скопіювати та змінити лише потрібний підпартіал. Це економить час і спрощує підтримку.

Оновлення теми та типові помилки

Як безпечно оновити тему?

Для Git submodule: git submodule update --remote themes/mytheme. Для Hugo Modules: hugo mod get -u. Після оновлення обов'язково перезберіть проект. CI-пайплайн повинен включати hugo --buildFuture --buildDrafts для перевірки сумісності. Так ви заощадите значні кошти на простої сайту.

Процес роботи та гарантії

Як ми налаштовуємо тему: покроковий процес

1. Аналіз поточної теми — перевіряємо структуру, доступні параметри та партіали.
2. Створення override-файлів — копіюємо лише необхідні шаблони в кореневі layouts/, assets/, static/.
3. Налаштування конфігу — заповнюємо hugo.toml під ваш бренд.
4. Кастомізація стилів — через змінні SCSS або custom CSS.
5. Тестування — збірка на staging, перевірка Core Web Vitals (LCP, CLS, INP).
6. Деплой та документація — фіксуємо всі зміни, передаємо інструкцію.

Зверніться до нас для кастомізації — ми гарантуємо збереження ваших змін.

Терміни та вартість

• Базова кастомізація (кольори, шрифти, меню) — 1–3 дні.
• Глибока кастомізація (override шаблонів, нові типи контенту) — 3–7 днів.
• Вартість розраховується індивідуально після аналізу проекту. Оцінимо ваш проект безкоштовно.

Що входить в роботу

• Документація по всіх змінах.
• Доступи до репозиторію та хостингу.
• Навчання вашої команди роботі з override.
• Технічна підтримка протягом 2 тижнів після завершення.

Отримайте консультацію з налаштування вашої теми Hugo — зв'яжіться з нами для оцінки проекту. Замовте аудит поточної теми — ми знайдемо вузькі місця.