Вы выбрали тему 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. Оба метода исключают копирование файлов темы.
| Критерий | Git submodule | Hugo Modules |
|---|---|---|
| Сложность | Низкая | Средняя |
| Версионирование | Ручное (git) | Автоматическое (go.sum) |
| Командная работа | Требует --recurse-submodules |
Прозрачная |
| Гибкость | Ограниченная | Высокая (зависимости, версии) |
Обратитесь к нам для кастомизации — мы поможем выбрать оптимальный способ подключения.
Почему 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.
Добавление нового контента и шаблонов
Как создать новый тип страниц (например, «Команда»)?
Если тема не предусматривает раздел «Команда»:
- Создайте папку
content/team/с_index.md(список) иivan-petrov.md(сотрудник). - В
layouts/team/разместитеlist.htmlиsingle.html. - В
single.htmlиспользуйте.Paramsдля вывода полей:role,photo,order.
Частичное переопределение шаблонов: если тема разбита на подпартиалы (например, footer/contacts.html и footer/nav.html), достаточно скопировать и изменить только нужный подпартиал. Это экономит время и упрощает поддержку.
Обновление темы и типичные ошибки
Типичные ошибки при кастомизации Hugo
| Ошибка | Причина | Решение |
|---|---|---|
Редактирование themes/ |
Изменения теряются при обновлении | Используйте override через корневые папки |
Игнорирование params |
Излишний override шаблонов | Настройте параметры в hugo.toml |
| Отсутствие проверки после обновления | Сломанные шаблоны | Запустите сборку в CI |
| Слишком глубокая кастомизация | Сложность поддержки | Рассмотрите другую тему |
Как безопасно обновить тему?
Для Git submodule: git submodule update --remote themes/mytheme. Для Hugo Modules: hugo mod get -u. После обновления обязательно пересоберите проект. CI-пайплайн должен включать hugo --buildFuture --buildDrafts для проверки совместимости. Так вы сэкономите значительные средства на простой сайта.
Процесс работы и гарантии
Как мы настраиваем тему: пошаговый процесс
- Анализ текущей темы — проверяем структуру, доступные параметры и партиалы.
- Создание override-файлов — копируем только необходимые шаблоны в корневые
layouts/,assets/,static/. - Настройка конфига — заполняем
hugo.tomlпод ваш бренд. - Кастомизация стилей — через переменные SCSS или custom CSS.
- Тестирование — сборка на staging, проверка Core Web Vitals (LCP, CLS, INP).
- Деплой и документация — фиксируем все изменения, передаём инструкцию.
Обратитесь к нам для кастомизации — мы гарантируем сохранность ваших изменений.
Сроки и стоимость
- Базовая кастомизация (цвета, шрифты, меню) — 1–3 дня.
- Глубокая кастомизация (override шаблонов, новые типы контента) — 3–7 дней.
- Стоимость рассчитывается индивидуально после анализа проекта. Оценим ваш проект бесплатно.
Что входит в работу
- Документация по всем изменениям.
- Доступы к репозиторию и хостингу.
- Обучение вашей команды работе с override.
- Техническая поддержка в течение 2 недель после завершения.
Получите консультацию по настройке вашей темы Hugo — свяжитесь с нами для оценки проекта. Закажите аудит текущей темы — мы найдём узкие места.