Компоненты

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

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

Создай папку с именем partials внутри твоей папки layout. Внутри новой папки partials создай файл с именем navbar.html.

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

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

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

<nav>
  <div>
    <a href="/">
      {{ $.Site.Title }}
    </a>
  </div>

  <div>
    <a href="/">
      Home
    </a>
    <a href="/posts">
      Posts
    </a>
  </div>
</nav>

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

У нас есть шаблон baseof.html, который уже используется для каждой страницы. Мы можем изменить наш шаблон baseof.html и добавить {{ partial "navbar.html" . }}

Наш недавно измененный файл baseof.html теперь должен выглядеть так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      {{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    {{ partial "navbar.html" . }}
    {{ block "main" . }}
      <!-- Часть страницы, которая различается в разных шаблонах -->
    {{ end }}
  </body>
</html>

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

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

В нашей новой папке partials создайте файл с именем footer.html.

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

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

Открой файл нижнего колонтитула и вставь следующий фрагмент:

<footer>
  <p>
    Copyright &copy; {{ now.Format "2006" }} {{ $.Site.Title }} | All rights reserved.
  </p>
</footer>

Затем поправь baseof.html и помести компонент в <body>, как мы это сделали для панели навигации.

Новый файл baseof должен выглядеть так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      {{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    {{ partial "navbar.html" . }}
    {{ block "main" . }}
      <!-- Часть страницы, которая различается в разных шаблонах -->
    {{ end }}
    {{ partial "footer.html" . }}
  </body>
</html>

Если мы зайдем на наш сайт сейчас в нашем браузере, мы увидим внизу красивый нижний колонтитул с текущим годом, названием нашего сайта и красивым знаком авторского права.

Мы создали логотип авторских прав с помощью кодов объектов HTML, где © преобразуется браузерами в логотип, который ты видишь.

Все возможные коды объектов HTML можно найти вот здесь.

Компоненты

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

Панель навигации (Navbar)

Нижний колонтитул (Footer)

Поделиться этой страницей