Розробка кастомного шаблону 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 тижнів |
Оцінимо ваш проєкт безкоштовно: напишіть нам — надішлемо терміни та бюджет.
Зв'яжіться для консультації — ми створюємо кастомні шаблони Hugo під ключ. Замовте розробку та отримайте повністю керований шаблон, який не підведе в продакшені.