Использование Hugo без темы

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

Как начать проект Hugo без темы

На самом деле это довольно просто. Во-первых, вам нужно понять, как работает структура проекта hugo. По сути, hugo будет искать необходимые файлы в корневой папке, и если он не сможет их найти, то попытается найти их в папке темы. Большинство тем предоставляют нам папки archetypes, assets, layouts и static. Например, если мы создадим новую тему с помощью hugo new theme, то получим такую структуру каталогов.

themes/theme
├── LICENSE
├── archetypes
│   └── default.md
├── layouts
│   ├── 404.html
│   ├── _default
│   │   ├── baseof.html
│   │   ├── list.html
│   │   └── single.html
│   ├── index.html
│   └── partials
│       ├── footer.html
│       ├── head.html
│       └── header.html
├── static
│   ├── css
│   └── js
└── theme.toml

Вход в полноэкранный режим Выход из полноэкранного режима

Как вы можете видеть, большинство файлов, созданных cli, находятся в папке layouts, поэтому мы можем просто скопировать ее в наш корень. Это обеспечит нам базовые строительные леса для нашего проекта.

Настройка pre-commit и editorconfig для форматирования шаблонов hugo

Если вы читали предыдущие записи в этом блоге, вы могли заметить, что я использую pre-commit и editorconfig для обеспечения валидации и автоформатирования всех файлов в проекте. Чтобы добавить поддержку типа файлов gohtml, мы будем использовать prettier-plugin-go-template.

Настройте pre-commit, добавив этот плагин в additional_dependencies.

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index ca47c31..3e5cfef 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -22,7 +22,10 @@ repos:
       rev: v2.7.1
       hooks:
           - id: prettier
-            types_or: [yaml, markdown, json]
+            types_or: [yaml, markdown, json, html]
+            additional_dependencies:
+                - "prettier@2.7.1"
+                - "prettier-plugin-go-template@0.0.13"
     - repo: https://github.com/antonbabenko/pre-commit-terraform
       rev: v1.74.1
       hooks:

Вход в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, нам также нужно добавить prettier, потому что обычно JavaScript хуки используют additional_dependencies для установки библиотек, которые использует хук, вот пример

И после этого обновите .prettierrc.yaml, следуя инструкциям из официального README

diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index f96ee19..22fe08f 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -11,3 +11,10 @@ overrides:
           - "*.md"
       options:
           tabWidth: 4
+    # https://github.com/NiklasPor/prettier-plugin-go-template
+    - files:
+          - "blog/src/layouts/**/*.html"
+      options:
+          parser: go-template
+          tabWidth: 4
+          printWidth: 88

Войдите в полноэкранный режим Выйти из полноэкранного режима

Наконец, мы собираемся добавить html в .editorconfig. И все готово.

Дополнительный

Существует также другой форматтер типа файлов gohtml, вы можете найти его здесь https://github.com/Riverside-Healthcare/djlint.