Настройка темы 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 — свяжитесь с нами для оценки проекта. Закажите аудит текущей темы — мы найдём узкие места.