Разумные настройки по умолчанию
Ранее в этой серии статей мы создали новый сайт Hugo и скопировали шаблоны темы по умолчанию в папку макета. Теперь давайте обновим наши шаблоны, чтобы они имели отличные HTML-установки по умолчанию. Я бы посоветовал прочитать замечательную статью Базовый шаблон HTML5: Use This HTML Boilerplate as a Starter for Any Web Dev Project», которая немного углубляется в эту тему. Но в нашем случае мы просто возьмем за основу шаблон по умолчанию, разработанный компанией Vite для Vue.
Во-первых, мы добавим атрибут lang="en" в тег html, указав, что содержание будет на английском языке. Я планирую сделать этот блог поддерживающим несколько языков, мой основной язык — русский, но мой родной язык — узбекский. И я надеюсь в будущем писать статьи и на этих языках. Как указано на странице Hugo’s Lookup Order (честно говоря, не прямо), все поиски шаблонов в Hugo начинаются с шаблона layouts/_default/baseof.html. Этот факт также можно выяснить, найдя шаблон с тегом html в созданной папке layouts.
diff --git a/blog/src/layouts/_default/baseof.html b/blog/src/layouts/_default/baseof.html
index 7b0d566..94c5dfe 100644
--- a/blog/src/layouts/_default/baseof.html
+++ b/blog/src/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html>
+<html lang="en">
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
После этого обновим тег head в layouts/_default/head.html, следуя существующей структуре.
diff --git a/blog/src/layouts/partials/head.html b/blog/src/layouts/partials/head.html
index e69de29..b9f74a6 100644
--- a/blog/src/layouts/partials/head.html
+++ b/blog/src/layouts/partials/head.html
@@ -0,0 +1,6 @@
+<head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>{{ .Site.Title }}</title>
+</head>
Здесь мы
- добавили тег
metaдля указания кодировки символов по умолчанию - добавили
linkна наш будущий фавикон - добавили еще один тег
metaдля настройкиviewportдля приведения ширины страницы к ширине экрана устройства - добавили тег
title, чтобы задать заголовок страницы.
Вы также можете проверить, что команда Hugo предлагает в своей документации
Шаблоны GoHTML
Теперь мы готовы настроить наши стандартные шаблоны Kind для отображения контента. Начнем с нашей целевой страницы — layouts/index.html. Дефолтный baseof.html содержит использование конструкции block, если вы использовали любой другой язык шаблонов, это должно быть довольно знакомо. По сути, это позволяет нам иметь переопределяемые части базового шаблона. Например, здесь у нас есть {{- block "main" . }}{{- end }}, что означает, что мы можем переопределить эту часть. Для лучшего понимания прочитайте документацию по базовым шаблонам и блокам. Я просто покажу конечный результат:
index.html.
diff --git a/blog/src/layouts/index.html b/blog/src/layouts/index.html
index e69de29..728b791 100644
--- a/blog/src/layouts/index.html
+++ b/blog/src/layouts/index.html
@@ -0,0 +1,8 @@
+{{ define "main" }}
+ <h1>{{ .Site.Title }}</h1>
+ {{ range .Pages }}
+ <article>
+ <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+ </article>
+ {{ end }}
+{{ end }}
Теперь наш блог отображает свой заголовок, из config.toml на целевой странице и всех страницах для текущего уровня (в настоящее время только ссылка на серию «Building the blog while flying it») со ссылкой. «Это не мое первое родео», поэтому лично я считаю, что шаблон выше довольно прост. Но если вы новичок в создании шаблонов, я рекомендую покопаться в официальных документах по функциям шаблонов и переменным шаблонов.
_default/list.html
Следуя той же логике, мы обновим наш шаблон list Kind. Чтобы показать Title текущей страницы и отобразить все дочерние страницы.
--- a/blog/src/layouts/_default/list.html
+++ b/blog/src/layouts/_default/list.html
@@ -0,0 +1,8 @@
+{{ define "main" }}
+ <h1>{{ .Title }}</h1>
+ {{ range .Pages }}
+ <article>
+ <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
+ </article>
+ {{ end }}
+{{ end }}
_default/single.html
И, наконец, мы отобразим фактическое содержание наших статей в _default/single.html.
--- a/blog/src/layouts/_default/single.html
+++ b/blog/src/layouts/_default/single.html
@@ -0,0 +1,6 @@
+{{ define "main" }}
+ <article>
+ <h1>{{ .Title }}</h1>
+ {{ .Content }}
+ </article>
+{{ end }}
Обновление статей для доступности
Ранее я использовал один хэштег # в своих статьях для этого блога для обозначения заголовков, но теперь я буду использовать два #, то есть все разделы статей будут отображаться с заголовками уровня 2. Это рекомендовано редактором dev.to для улучшения доступности, а также это позволяет нам правильно отображать содержание статей, где заголовок статьи будет отображаться как <h1>, а все заголовки разделов как <h2>.
Ура!
У нас есть реально работающий блог, который можно разместить где-то на хостинге, и люди смогут его читать. Но хостингом мы займемся как-нибудь в другой раз, а пока мы продолжим создавать сам блог и писать о нем в моей серии статей на dev.to.
Ссылки
- https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/
- https://github.com/vitejs/vite/blob/main/packages/create-vite/template-vue/index.html
- https://gohugo.io/templates/lookup-order/
- https://gohugo.io/templates/base/#define-the-base-template
- https://gohugo.io/templates/lookup-order/#hugo-layouts-lookup-rules
- https://gohugo.io/templates/base/#override-the-base-template
- https://gohugo.io/categories/functions
- https://gohugo.io/variables/
- https://www.markdownguide.org/basic-syntax/#headings