테마 없이 Hugo 사용하기

quick start 가이드 및 많은 온라인 자습서에서 새 프로젝트는 기존 테마 중 하나를 사용하거나 새 테마를 만드는 것이 좋습니다. 그러나 공식 문서를 읽은 후 내 previous blog version 에 어떤 테마도 사용하지 않기로 결정했습니다. 나는 이 새로운 프로젝트에 대해서도 같은 일을 할 것입니다. 미래에 내 기능 중 일부가 블로그에서 분리될 수 있는 것처럼 보이면 테마를 만들 것이지만 지금은 테마가 필요하지 않습니다.

테마 없이 Hugo 프로젝트를 시작하는 방법

실제로 꽤 쉽습니다. 먼저 휴고project structure가 작동하는 방식을 이해해야 합니다. 기본적으로 휴고는 루트 폴더에서 필요한 파일을 찾고 찾을 수 없으면 테마 폴더에서 찾으려고 시도합니다. 대부분의 테마는 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 폴더에 있으므로 루트에 복사하면 됩니다. 이것은 우리 프로젝트의 기본 비계와 함께 사용할 수 있습니다.

Hugo 템플릿을 포맷하기 위해 pre-commit 및 editorconfig 구성

이 시리즈의 이전 블로그 게시물을 읽었다면 내가 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:
+                - "[email protected]"
+                - "[email protected]"
     - repo: https://github.com/antonbabenko/pre-commit-terraform
       rev: v1.74.1
       hooks:

일반적으로 JavaScript 후크는 prettier를 사용하여 후크가 사용하는 라이브러리를 설치하기 때문에 additional_dependencies 자체도 추가해야 합니다. 여기에는 example이 있습니다.

그리고 해당 업데이트.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에서 찾을 수 있습니다.