Синтаксис шаблонов

Основы

Шаблоны Hugo - это файлы HTML, в которые добавлен дополнительный синтаксис, чтобы сделать их более динамичными.

Это позволяет нам генерировать HTML-код на основе нашего контента, вместо того, чтобы писать код вручную для каждого сообщения.

Чтобы получить доступ к специальным функциям Hugo внутри файла HTML, все что нам нужно написать - это {{ }}, а внутри фигурных скобок мы пишем код Hugo.

Переменные

Hugo внедряет в шаблоны множество полезных переменных в зависимости от того, какой шаблон в данный момент отображается на экране.

Чтобы получить доступ к этим переменным, добавь фигурные скобки, а затем добавь точку с именем переменной, например вот так: {{ .VariableNameHere }}. Мы часто будем писать такой код: <title>{{ .Title }}</title> для динамического заголовка вкладки нашей страницы.

Мы будем видеть этот синтаксис в следующих разделах, он необходим для Hugo.

Мы также рассмотрим все важные переменные в следующих разделах.

Функции

Hugo предоставляет множество функций, которые мы можем использовать в наших шаблонах. Функции отличаются от переменных, потому что они изменяют вывод в зависимости от ввода.

Например, если мы используем функцию add, то код <p>{{ add 1 2 }}</p> выведет результат <p>3</p>, но результат будет меняться в зависимости от вводимых чисел. Это отличается от переменных, потому что переменные не меняются в зависимости от ввода.

Логические операторы

Hugo позволяет использовать в шаблонах базовые логические операторы, такие как операторы if и циклы.

Условные выражения

Hugo также дает нам несколько специальных операторов для выполнения условного рендеринга. if, else, with, or и and используются, чтобы решить, какие элементы отображать в нашем шаблоне.

Есть много разных способов использования этих операторов, полную документацию можно найти здесь, но мы также увидим много примеров в оставшейся части этого курса.

Циклы

Циклы - важная особенность любого языка программирования или фреймворка. Это позволяет повторно использовать логику для многих элементов.

Мы можем перебирать данные, введенные в шаблоны Hugo, используя оператор range, например список страниц или список тегов, или категорий.

<ul>
{{ range $list }}
    <li>{{ . }}</li> <!-- . представляет элемент в переменной $list -->
{{ end }}
</ul>

Результат из примера выше будет таким:

<!-- Этот результат предполагает, что переменная $list содержит 3 элемента -->
<ul>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>

Это большая часть того, что нам нужно знать о шаблонах Hugo, чтобы продолжить работу со следующими разделами.