Hugo 새로운 나의 테마 만들기 - new theme

나의 테마 새로 만들기

Hugo에서는 이미 공개된 템플릿이 많이 있지만, 직접 원하는 대로 디자인하여 테마를 만들 수 있다. 테마를 만들려면, 먼저 다음 명령으로 기본 양식을 만든다.

$ hugo new theme {테마 이름}

예를 들어, 다음과 같이 실행하면 themes/my-theme 디렉터리가 생성된다.

$ hugo new theme my-theme

생성되는 파일들을 아래와 같이 되어 있고, 디렉터리 구성은 되어 있지만, 파일의 내용은 거의 비어 있다. 이 파일을 기반으로 템플릿을 만든다.

새로 만든 테마의 양식

themes/my-theme
├── LICENSE   (MIT 라이선스)
├── 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 (기본 설정 파일)

첫 페이지 레이아웃 (layouts/index.html) 만들기

테마 디렉터리 내의 layouts/index.html 파일은 사이트의 첫 페이지에 대한 템플릿 파일이다. 하나의 HTML 파일만으로 구성된 사이트(SPA: Single Page Application)를 작성하는 경우, 이 파일만 작성하면 된다. 초기 상태에서는 아무것도 기술되어 있지 않으므로, 우선은 시작에 사이트명만을 표시하도록 수정해 본다.

themes/my-theme/layouts/index.html

<h1>{{ .Site.Title }}</h1>

위와 같이 사이트 정보를 보유하는 .Site 변수의 Title 필드 값을 출력할 수 있다. 여기에는 사이트의 설정 파일(config.toml) title에 설정한 문장이 표시된다.

지금까지 만든 후에는 이 테마를 사용하여 사이트를 확인해 본다. hugo 명령과 함께 사용할 테마를 지정하려면 -t {태마명} 옵션을 사용한다.

$ hugo server -t my-theme

위와 같이 Hugo 서버를 시작한 후 에 http://localhost:1313/액세스하여 보기를 확인할 수 있습니다.

그림 : 나의 테마를 사용한 첫 페이지

첫 페이지에 모든 페이지의 목록 표시

첫 페이지의 템플릿(layouts/index.html) 내에서 .Data.Pages 변수를 참조하여, 모든 페이지의 정보(Page 변수)를 얻을 수 있다. 이 정보를 range 사용하여 루프 처리하면 모든 페이지에 대한 링크를 출력할 수 있다.

themes/my-theme/layouts/index.html

<h1>{{ .Site.Title }}</h1>
<ul>
  {{ range .Data.Pages }}
    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a> ({{ .Date.Format "2006-01-02" }})</li>
  {{ end }}
</ul>

각 페이지에 대한 레이아웃 만들기(layouts/_default/single.html)

링크된 각 페이지는 layouts/_default/single.html 템플릿 파일을 기반으로 생성되므로, 이 파일을 미리 만들어야 한다. 이 템플릿 내에서 Page 변수의 필드를 참조할 수 있다. 예를 들어, .Title에 페이지 제목, .Content에 페이지 본문을 참조할 수 있다.

themes/my-theme/layouts/_default/single.html

<h1>{{ .Title }}</h1>

{{ .Content }}

각 페이지의 내용은 content/디렉터리 내에 아래와 같은 느낌으로 작성해 둔다.

content/page1.md

---
title: "Page1 Title"
date: "2017-09-10"
---

Page1 Content

위와 같이 레이아웃 파일과 컨텐츠를 작성해 두면, 각 페이지의 내용이 아래와 같이 표시될 것이다.

그림 : 단일 페이지 템플릿으로 출력

이후로는, 마찬가지로 layouts디렉터리 내의 템플릿 코드를 만들어가면 나의 테마가 완성된다. Markdown 파일에서 사용할 수 있는 단축 코드(short codes)도 독자적인 테마 부속품(layouts/shortcodes)으로 제공할 수 있다.