Разработка кастомного шаблона 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 под ключ. Закажите разработку и получите полностью управляемый шаблон, который не подведёт в продакшене.