Теперь мы переходим к изучению Hugo, нашему генератору статических сайтов. На этой странице мы познакомимся с шаблоном baseof.html.
Что такое baseof.html?
Перед объяснением, тебе необходимо создать папку с именем _default внутри твоей папки layouts в твоём новом проекте hugo под названием my-blog.
Затем внутри создай файл с именем baseof.html
Структура твоего проекта теперь должна выглядеть так:
my-blog
├── archetypes
| └── default.md
├── content
├── data
├── layouts
| └── _default
| └── baseof.html
├── static
├── themes
└── config.toml
Открой новый файл baseof.html и вставь следующий фрагмент:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ block "title" . }}
{{ .Site.Title }}
{{ end }}</title>
</head>
<body>
{{ block "main" . }}
<!-- Часть страницы, которая различается в разных шаблонах -->
{{ end }}
</body>
</html>
В этом файле много кода, но мы объясним тебе каждую часть.
Первая строка: <!DOCTYPE html> - это объявление типа документа, которое сообщает браузеру, какой код находится внутри, чтобы браузер знал, как его читать и преобразовывать в то, что пользователи могут видеть на экране.
Следующий блок - это элемент <html>. Этот элемент должен быть включен на каждую страницу, и это корневой элемент. Каждый другой элемент будет внутри этого элемента.
Следующий элемент, который мы видим, - это элемент <head>, и он используется для дополнительных метаданных о странице.
Head
Элементы, хранящиеся внутри <head>, не видны на экране, но читаются браузером и поисковыми системами, такими как Google, чтобы проиндексировать твою страницу.
Title
Title используется для хранения информации, такой как заголовок страницы, с помощью элемента <title>. Текст внутри заголовка используется для текста на вкладке в браузере. Если ты посмотришь прямо сейчас в окно своего веб-браузера на вкладку вверху, ты увидишь текст, который описывает страницу. Это управляется элементом title. Если заголовок не указан, отображается только URL страницы.
Meta
Есть много различных элементов <meta>, которые также могут быть добавлены к <head>. Некоторые из них предназначены для твоего браузера, а некоторые - для поисковых систем, которые сканируют твой сайт.
Мы рассмотрим meta более подробно чуть позже в части курса, которая будет посвящена оптимизации.
Body
Элемент <body> следует после <head>, и это первый элемент, который содержит остальные элементы для отображения чего-либо на экране.
Все элементы, о которых мы узнали в предыдущем разделе, посвященному HTML, могут быть размещены внутри элемента <body>, и они будут отображаться на экране.
Comments
Существует также способ писать комментарии в HTML, используя синтаксис <!-- твой комментарий здесь -->, они доступны только для разработчиков. В комментарии ты можешь написать все, что захочешь, но браузер и поисковые системы его проигнорируют. Комментарий можно увидеть только если просматриваешь код.
Template Blocks
В обычном HTML-файле ты пишешь элементы и записываешь данные внутри элементов для отображения на экране - но что, если у тебя есть 30 страниц или 1000 страниц на твоем сайте? Нужно ли нам писать один и тот же код снова и снова для каждой страницы? (Не думаю, что кто-то хочет писать 1000 страниц кода, когда просто необходимо вести блог о своей любимой еде).
Ответ - нет! Нам не нужно писать код каждый раз, когда мы хотим изменить контент нашего сайта. В этом и заключается смысл Hugo - он позволяет нам писать HTML-шаблон и контент по отдельности, а Hugo легко соединяет их вместе.
Мы не уверены, что ты обратил(а) внимание на эти странные двойные фигурные скобки в приведенном выше фрагменте, они выглядят так: {{ stuff here }}. Они специфичны для Hugo и позволяют превратить HTML-файлы в более динамичные файлы, которые можно использовать в качестве шаблонов для большого количества различного контента.
В приведенном выше фрагменте мы видим наш первый шаблонный синтаксис, который называется block. Мы можем использовать эти блоки как поля для заполнения контента. Это позволит нам генерировать неограниченное количество страниц с точно такой же версткой, но с совершенно другим текстом и информацией внутри.
В этом фрагменте мы определили два блока и дали им имена. Это было сделано для того, что мы могли ссылаться на них в других шаблонах и чтобы Hugo знал, как связать шаблон вместе.
Title block
Первый блок - это блок заголовка {{ block "title" . }} и он находится внутри элемента <title>. Такое написание позволит нам позже создавать шаблоны для разных частей блога и использовать разные заголовки для каждого шаблона.
Main Block
Основной блок {{ block "main" . }} - это блок, используемый для отображения элементов на экране, и он может изменяться от страницы к странице. Все, что находится за пределами основного блока, не будет изменяться. (При условии, что это не другой блок).
Обрати внимание, что имена блоков, такие как main, являются произвольными, и ты можешь называть их как угодно.
Не беспокойся, если ты еще не полностью понимаешь блоки. У нас будет больше примеров того, как они используются, и тебе станет понятнее.