Списки

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

Но что, если мы хотим увидеть список всех наших сообщений?

Вот тут-то и пригодится шаблон для списков от Hugo.

Шаблон

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

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

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

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

{{ define "main" }}
<main>
  <header>
    <h1>{{ .Title }}</h1>
  </header>
  <div>
    {{ range .Pages }}
      {{ .Render "summary" }}
    {{ end }}
  </div>
</main>
{{ end }}

Ты заметишь, что это очень похоже на наш шаблон домашней страницы, но с одним большим отличием.

Наш шаблон домашней страницы использовал функцию first 5 для отображения наших первых 5 сообщений, но в этом шаблоне мы не используем эту функцию, поэтому мы будем отображать все наши сообщения.

Чтобы убедиться, что этот шаблон работает, сохрани изменения и посети локальный сервер разработки по адресу localhost:1313/posts.

Если твой сервер разработки работает на другом порту (выводится после запуска hugo serve), замени 1313 номером твоего порта.

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

Ты также можешь заметить, что мы повторно используем наш шаблон summary.html на этой странице. Это гарантирует нам, что наше форматирование на домашней странице будет точно такое же, как и на странице со списком публикаций, потому что мы используем точно такой же код.

Примечание о пути

Тебе может быть быть интересно, почему мы должны зайти в /posts в нашем браузере, чтобы увидеть наши сообщения. Это потому, что мы помещаем наши сообщения в папку posts в нашей папке content.

Папка content в Hugo особенная, потому что она создает пути на основе имен папок и файлов внутри. Если мы поместим наши сообщения в папку с названием recipes, тогда, чтобы увидеть все наши рецепты, нам нужно будет перейти по пути/recipes.

Hugo будет использовать шаблон list.html всякий раз, когда внутри папки content есть другая папка.

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