Шаблоны для одиночных страниц

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

Прямо сейчас, когда мы нажимаем ссылку на нашей домашней странице, мы видим ошибку 404. Давай исправим это.

Single.html

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

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

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

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

{{ define "main" }}
<section>
  <h1>{{ .Title }}</h1>
  <div>
    <article>
      {{ .Content }}
    </article>
  </div>
</section>
<aside>
  <div>
    <section>
      <h4>{{ .Date.Format "Mon Jan 2, 2006" }}</h4>
      <h5>{{ .WordCount }} Words</h5>
    </section>
  </div>
  <div>
    {{ with .PrevInSection }}
    <a class="previous" href="{{ .Permalink }}"> {{.Title}}</a>
    {{ end }}
    {{ with .NextInSection }}
    <a class="next" href="{{ .Permalink }}"> {{.Title}}</a>
    {{ end }}
  </div>
</aside>
{{ end }}

Перед тем, как мы объясним тебе детали приведенного выше фрагмента, сохрани это и перейти на свой сайт, запущенный на localhost. Если ты сейчас нажмёшь на ссылку на главной странице, ты будешь перенаправлен(а) на страницу с подробной информацией о публикации.

Теперь мы видим, что макет single.html предназначен для отображения одного поста за раз. Независимо от того, какой контент находится в сообщении, это макет, который Hugo будет использовать для его отображения.

Если ты отредактируешь файл my-first-post.md и добавишь в него больше текста, ты увидишь, что сервер обновится и появится новый контент.

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

В макете single.html мы отображаем заголовок твоего сообщения с помощью переменной {{ .Title }}, которую Hugo вводит для нас.

Содержимое (Content)

Мы также отображаем содержимое сообщения. Содержимое - это все, что находится в файле Markdown.

Мы получаем доступ к этим данным через переменную content, которую для нас вводит Hugo, например: {{ .Content }}. Hugo также автоматически преобразует наш Markdown в HTML. Вот почему авторы контента используют Markdown вместо HTML для написания сообщений в блогах, потому что Markdown писать быстрее, и компьютеры легко могут преобразовать его в более сложный HTML-код для отображения в браузерах.

Дата (Date)

Мы также отображаем дату публикации в нашем одностраничном шаблоне. Hugo берет её с самого начала нашего файла Markdown и позволяет нам форматировать дату любым удобным для нас способом с помощью функции .Date.Format.

Например, у тебя есть сообщение в блоге с датой 2017-03-03T14:15:59-06:00. Если ты использовал(а) формат, указанный в столбце 1, то дата будет отформатирована, как указано в столбце 2.

Обрати внимание, что значения в столбце 1 изменять нельзя. Monday, January, 2, и 2006 являются специальными значениями и используются только для форматирования. В реальном сгенерированном HTML они будут заменены правильной датой из твоего заголовка сообщения.

Для получения дополнительных сведений о форматировании дат посети страницу документации о датах.

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

Подсчет слов (Word Count)

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

Чтобы получить доступ к количеству слов, мы должны написать внутри шаблона следующее: {{ .WordCount }}.

Мы можем увидеть все доступные нам переменные для страниц в полной документации Hugo о переменных.

Следующие и предыдущие разделы

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

Для создания следующих и предыдущих ссылок мы используем синтаксис {{ with }}, который автоматически проверяет, существует ли переменная перед отображением кода внутри, а затем предоставляет контекст переменной через {{ . }} .