Hugo에서는 리스트 템플릿이나 싱글 페이지 템플릿 등 용도에 따라 다른 템플릿 파일을 준비하게 되어 있습니다. 하지만 HTML 전체의 대략적인 구성은 공통된 부분이 많습니다. 예를 들어 어느 페이지라도 HTML은 다음과 같은 구성으로 되어 있을 것입니다.
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="ko">
<html>
<meta charset="UTF-8">
...
</head>
<body>
...
</body>
</html>
|
Hugo의 베이스 템플릿 기능을 사용하면 위와 같은 전체 구성을 베이스 템플릿(base of.html)으로 작성하고 그 안의 부분적인 블록만 일반적인 템플릿(목록 템플릿이나 싱글 페이지 템플릿)에서 정의한 내용으로 바꾸어 쓸 수 있습니다.
Hugo의 베이스 템플릿 기능은 Go의 템플릿 라이브러리의 block template라고 하는 구조를 사용하고 있으며 block에서 정의한 부분을 define으로 정의한 내용으로 대체하는 동작을 합니다. 위의 그림을 보시면 알기 쉬우시겠지만 베이스 템플릿(base of.html)을 준비하게 되면 기본적으로 모든 페이지가 베이스 템플릿을 이용해서 렌더링되게 되고 그 안의 부분적인 블록(위에서는 main이라는 이름의 블록)이 자 템플릿에서 정의한 내용으로 바뀝니다. 이 때 어떤 자 템플릿이 사용되는지는 베이스 템플릿 구조를 사용하지 않는 경우와 마찬가지로 표시하는 페이지의 종류에 따라 결정됩니다. 예를 들어 홈페이지나 섹션페이지 등의 렌더링에는 list.html이 사용되며 각각의 기사페이지 렌더링에는 single.html이 사용됩니다.
구체적인 베이스 템플릿 이용 예시
다음은 베이스템플릿의 구체적인 기술 예입니다. main 요소 이하의 메인 콘텐츠를 block template 기능으로 대체하도록 하고 있습니다.
layouts/_default/baseof.html (베이스 템플릿)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="{{ "assets/css/main.css" | relURL }}">
<title>{{ if not .IsHome }}{{ .Title }}｜{{ end }}{{ .Site.Title }}</title>
{{ partial "head/favicon" . }}
</head>
<body>
<div id="root">
<div id="pageTitle"><a href="{{ "/" | relURL }}">{{ .Site.Title }}</a></div>
{{ partial "menu" . }}
<main id="main">
{{ block "main" . }}main 블럭을 찾을 수 없습니다.{{ end }}
</main>
</div>
</body>
</html>
|
layouts/_default/list.html (리스트 템플릿)
1
2
3
4
5
6
7
8
9
10
11
12
| {{ define "main" }}
<h1>{{ .Title }}</h1>
{{ partial "breadcrumb" . }}
{{ .Content }}
<h2>페이지 리스트</h2>
<ul>
{{- range .Data.Pages }}
<li><a href="{{ .RelPermalink}}">{{ .Title }}</a>
{{- end }}
</ul>
{{ end }}
|
layouts/_default/single.html (싱글 템플릿 페이지)
1
2
3
4
5
6
| {{ define "main" }}
<h1>{{ .Title }}</h1>
{{ partial "breadcrumb" . }}
{{ partial "tags-in-page" . }}
{{ .Content }}
{{ end }}
|
각각의
docsy의 _index.md를 살펴보는 것도 도움이 될 수 있습니다.
레퍼런스
