Домашняя страница

Первая настоящая страница, которую мы создадим вместе - это наша домашняя страница.

Если у тебя не запущен локальный сервер разработки Hugo, запусти команду hugo serve в своем терминале, чтобы запустить твой сайт на http://localhost:1313. Убедись, что ты находишься в папке my-blog при запуске команды.

cd my-blog
hugo serve

Index.html

Для создания домашней страницы, создай файл с именем index.html внутри папки layouts.

Твоя структура папок теперь должна выглядеть так:

my-blog
├── archetypes
|   └── default.md
├── content
├── data
├── layouts
|   ├── _default
|   |   └── baseof.html
|   └── index.html
├── static
├── themes
└── config.toml

Открой файл index.html в редакторе кода и вставь следующий код:

{{ define "main" }}
  <main>
    <header>
      <h1>{{ .Title }}</h1>
    </header>
    <div>
      {{ range first 5 .Site.RegularPages }}
          {{ .Render "summary" }}
      {{ end }}
    </div>
  </main>
{{ end }}

Мы рассмотрим, что всё это означает, но сначала ты должен (должна) сохранить свой файл и открыть в браузере адрес http://localhost:1313 и ты увидишь белую страницу с большим заголовком: «Мой новый сайт Hugo».

Это название твоего нового сайта, и его можно изменить, отредактировав файл config.toml в твоем проекте.

Вперед! Измени поле title в твоём файле config.toml, сохрани изменения и проследи за обновлением твоего сайта в браузере.

Основной блок (Main Block)

Обрати внимание на фрагмент примера. Все, что находится между {{ define "main" }} и {{end}}, будет помещено внутрь основного блока файла baseof.html. (Мы рассматривали этот файл в предыдущем разделе).

Если ты забыл(а), внутри нашего шаблона baseof.html у нас был блок, который выглядел так: {{ block "main" . }} {{ end }}. Итак, теперь мы знаем, как вставлять разные шаблоны внутрь блоков из других шаблонов.

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

Заголовок (Title)

Во фрагменте выше мы также видим{{ .Title }}, это название взято из твоего config.toml. Hugo добавит много разных данных в твои шаблоны, чтобы ты мог(ла) получить к ним доступ, и почти все данные внутри твоего config.toml могут быть использованы как для отображения, так и для логических решений, таких как выбор языка или метаданных.

Диапазон страниц (Page Range)

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

Чтобы проверить, что этот блок диапазона работает, мы создадим наш первый пост в блоге!

Время создать первый пост

Создай папку с именем posts внутри папки content. Затем создай файл с именем my-first-post.md.

Твоя структура папок теперь должна выглядеть так:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   └── baseof.html
|   └── index.html
├── static
├── themes
└── config.toml

Открой my-first-post.md и вставь туда следующее:

---
title: 'My first post'
date: '2020-08-01'
---

Hello world!

Это файл с разметкой, и именно с его помощью мы будем создавать контент и сообщения в блогах для нашего сайта.

Элемент в списке публикаций

Теперь ты можешь подумать, что твой пост готов для отображения, но не спеши. Мы еще не сказали Hugo, как визуализировать публикацию в блоге. Это фрагмент {{ .Render "summary" }} внутри блока range.

Создайте файл с именем summary.html и размести его в папке layouts/_default.

Твоя структура папок теперь должна выглядеть так:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   ├── summary.html
|   |   └── baseof.html
|   └── index.html
├── static
├── themes
└── config.toml

Внутрь этого нового файла summary.html вставь следующее:

<a href="{{ .Permalink }}">
  <div>{{ .Title }}</div>
  <div>{{ .Summary }}</div>
  <div>
    <span>{{ .ReadingTime }} Minutes</span>
    <span>{{ .Date.Format "Jan 2, 2006" }}</span>
    <span>{{ .WordCount }} Words</span>
  </div>
</a>

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

Он пока не выглядит очень красивым, но мы стилизуем его позже.

Если ты перейдешь по ссылке, ты должна (должна) получить ошибку 404 page not found, и это потому, что мы еще не создали макет для показа полной публикации.

Исправление проблем

Если ты не видишь свои изменения в браузере. Попробуй остановить свой локальный сервер, нажав несколько раз ctrl-c в твоём терминале. Затем снова запусти сервер, набрав hugo serve и перезагрузив браузер на localhost:1313. Если Hugo решит разместить сервер на другом порту, то ты увидишь, что этот порт отображается в твоем терминале после запуска команды hugo serve, и тебе следует посетить этот порт в своем веб-браузере вместо стандартного 1313.

Если у тебя вообще не работает команда hugo. Вернись к этапу установки из этого курса и убедись, что ты выполнил(а) все шаги и ты видишь версию hugo, при запуске команды hugo version в твоём терминале.