Разработка кастомного шаблона Hugo (Go Templates)
Допустим, вам нужно добавить нестандартный сайдбар с динамической навигацией на основе таксономий. Готовая тема Hugo этого не умеет: придётся переписывать партиалы, а после обновления темы изменения съедутся. Или требуется мультиязычный блог с hreflang и Schema.org Article — стандартные шаблоны не дают такой гибкости. Мы создаём кастомные шаблоны на Go Templates, где каждый тег от <html> до финального скрипта под вашим контролем. На счету — более 30 проектов на Hugo, некоторые с нулевой задержкой на генерацию.
Почему Go Templates, а не Twig или Liquid?
Go Templates — это встроенный движок шаблонов Hugo, работающий на компилируемом Go. В отличие от Twig (PHP), Liquid (Ruby) или Jinja2 (Python), он не требует дополнительных интерпретаторов и генерирует страницы в десятки раз быстрее. Строгая типизация и чёткая иерархия lookup order исключают «магические» ошибки. Подробнее о синтаксисе можно прочитать в спецификации Go Templates.
| Параметр | Go Templates | Twig | Liquid | Jinja2 |
|---|---|---|---|---|
| Скорость генерации | 0.5–1 мс на страницу | 5–15 мс | 3–10 мс | 4–12 мс |
| Типизация | Строгая | Динамическая | Динамическая | Динамическая |
| Кеширование партиалов | partialCached (встроено) | Нет | Нет | Нет |
| Интеграция с Hugo data | Полная | Через плагины | Через плагины | Через плагины |
| Learning curve | Средняя (своя логика) | Низкая | Низкая | Низкая |
Согласно документации Hugo, lookup order определяет, какой шаблон будет использован для каждого типа страниц. Мы настраиваем этот порядок так, чтобы избежать конфликтов и добиться максимальной производительности.
Какие возможности даёт кастомный шаблон Hugo?
Полный контроль над разметкой без оглядки на готовую тему. SEO-шаблоны с OG, Twitter Cards, Schema.org, canonical и hreflang настраиваются один раз и работают на всех страницах. Производительность: кеширование partialCached, webp-изображения через resources, минификация — Core Web Vitals под контролем. Документация и обучение команды (2–3 часа воркшопа). Гарантия 30 дней на бесплатные правки.
Как создаются кастомные шаблоны Hugo с нуля?
Разработка идёт по этапам:
- Анализ контентной модели: типы контента, таксономии, связи.
- Проектирование lookup order: какие шаблоны для каких страниц. Hugo ищет шаблон в порядке: layouts/<тип>/<вид>.html, layouts/<тип>/single.html, layouts/<раздел>/single.html, layouts/_default/single.html. Правильная настройка этой иерархии позволяет переиспользовать общие шаблоны и переопределять только нужные.
- Вёрстка лейаутов, партиалов и шорткодов.
- Тестирование на всех типах страниц (single, list, section, homepage).
- Деплой и финальная оптимизация.
В результате вы получаете полный комплект: baseof.html, шаблоны для каждого типа контента, переиспользуемые партиалы, кастомные шорткоды и документацию.
Базовая структура через baseof.html задаёт скелет сайта, а дочерние шаблоны переопределяют блоки:
{{/* layouts/_default/baseof.html */}} <!DOCTYPE html> <html lang="{{ .Site.Language.Lang }}"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title> {{ block "head" . }}{{ end }} {{ partial "head/styles.html" . }} </head> <body class="{{ block "body-class" . }}{{ end }}"> {{ partial "header.html" . }} <main> {{ block "main" . }}{{ end }} </main> {{ partial "footer.html" . }} {{ partial "head/scripts.html" . }} </body> </html> Дочерний шаблон для отдельного поста:
{{/* layouts/blog/single.html */}} {{ define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end }} {{ define "body-class" }}page-post{{ end }} {{ define "main" }} <article class="post"> <header class="post__header"> <h1>{{ .Title }}</h1> <time datetime="{{ .Date.Format "2006-01-02" }}"> {{ .Date.Format "2 January 2006" }} </time> {{ with .Params.authors }} <div class="post__authors"> {{ range . }} {{ $author := index $.Site.Data.authors . }} <span>{{ $author.name }}</span> {{ end }} </div> {{ end }} </header> {{ if .Params.featured_image }} <figure class="post__cover"> {{ $img := resources.Get .Params.featured_image }} {{ if $img }} {{ $webp := $img | images.Resize "1200x630 WebP" }} {{ $fallback := $img | images.Resize "1200x630" }} <picture> <source srcset="{{ $webp.Permalink }}" type="image/webp"> <img src="{{ $fallback.Permalink }}" alt="{{ .Title }}" loading="eager"> </picture> {{ end }} </figure> {{ end }} <div class="post__body">{{ .Content }}</div> {{ partial "blog/related-posts.html" . }} </article> {{ end }} Какие проблемы решаем в шаблонах Hugo
Сложная группировка данных. Например, страница команды с сортировкой по отделам. Go Templates легко группируют страницы через groupByParam и слайсы. Производительность партиалов. Тяжёлые компоненты (сайдбар, навигация) кешируются через partialCached по уникальному ключу — генерация ускоряется до 50 %. Мультиязычность. Используем встроенные .Site.Home.Translations и кастомные relLangURL.
Кеширование партиалов:
{{/* Кешировать по slug страницы */}} {{ partialCached "components/sidebar.html" . .Page.Slug }} {{/* Кешировать глобально (один раз для всего сайта) */}} {{ partialCached "components/footer-nav.html" . }} Больше о partialCached — в официальной документации.
Что входит в разработку кастомного шаблона?
| Компонент | Описание |
|---|---|
| Лейауты | baseof.html и шаблоны для всех типов страниц (single, list, section, homepage) |
| Партиалы | Переиспользуемые блоки: header, footer, sidebar, навигация, SEO-вставки |
| Шорткоды | Кастомные вставки для контента (таблицы, галереи, кнопки) |
| SEO-шаблоны | OG, Twitter Cards, Schema.org, canonical, hreflang |
| Оптимизация | Кеширование partialCached, webp-изображения, минификация |
| Документация | Описание структуры, инструкция по добавлению контента |
| Обучение | Воркшоп для команды (2–3 часа) |
| Гарантия | 30 дней на бесплатные правки |
Сроки и как начать
| Тип проекта | Сроки |
|---|---|
| Типовой сайт (5–15 страниц, блог, базовая SEO) | 1–2 недели |
| Сложный проект (мультиязычность, кастомные таксономии, интеграции) | 3–5 недель |
| Корпоративный портал с интеграциями | 4–6 недель |
Оценим ваш проект бесплатно: напишите нам — пришлём сроки и бюджет.
Свяжитесь для консультации — мы более 5 лет создаём кастомные шаблоны Hugo под ключ. Закажите разработку и получите полностью управляемый шаблон, который не подведёт в продакшене.