연습용 Hugo Site 만들기
scoop으로 hugo 설치를 한 후, 다음과 같이 얼른 사이트를 하나 만듭니다. 이 사이트에서 테스트하려고 합니다.
1
2
3
4
5
| hugo new site testsite
cd testsite
git init
git submodule add https://github.com/AngeloStavrow/indigo.git themes/indigo
git submodule update --recursive --init
|
1 기본적인 변수 접근
현재 context의 변수에 접근하는 방법은 다음과 같습니다. 다음은 현재의 context의 Title을 표시합니다.
1
2
3
4
| hugo new "posts/testpost1.md"
@'
{{ .Title }}
'@ >>./content/posts/testpost1.md
|
2 Loop 사용하기
Loop안에서는 그 안의 요소를 context로 사용합니다.
1
2
3
4
5
6
7
8
9
10
| hugo new "posts/testpost2.md"
@'
<ul>
{{ range .Params.tags }}
<li>
<a href="/tags/{{ . | urlize }}">{{ . }}</a>
</li>
{{ end }}
</ul>
'@ >>./content/posts/testpost2.md
|
3 변수에 담아 사용하기
loop안에서 상위 context에 접근하려면 변수를 사용하거나 전역 context $. 를 사용하는 방법이 있습니다.
여기에서는 변수를 사용한 접근을 보여줍니다.
1
2
3
4
5
6
7
8
9
10
11
| hugo new "posts/testpost3.md"
@'
{{ $title := .Title }}
<ul>
{{ range .Params.tags }}
<li>
<a href="/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }}
</li>
{{ end }}
</ul>
'@ >>./content/posts/testpost3.md
|
4 변수에 담아 사용하기
다음 예제는 명시적으로 전역 context $. 를 사용합니다.
1
2
3
4
5
6
7
8
9
10
| hugo new "posts/testpost4.md"
@'
<ul>
{{ range .Params.tags }}
<li>
<a href="/tags/{{ . | urlize }}">{{ . }}</a> - {{ $.Title }}
</li>
{{ end }}
</ul>
'@ >>./content/posts/testpost4.md
|
5 기본 분기문
여기에서 gt lt 는 연산자가 아닌 함수이므로 전위표기법 Polish-Notation을 사용합니다
1
2
3
4
5
6
7
8
9
10
11
12
| hugo new "posts/testpost5.md"
@'
{{ $a := 1 }}
}} $b := 2 }}
{{ if gt $a $b }}
1 > 2
{{ else if lt $a $b }}
1 < 2
{{ else }}
1 = 2
{{ end }}
'@ >>./content/posts/testpost5.md
|
함수에 대한 설명은 여기에서 찾을 수 있습니다.
https://gohugo.io/functions/
6 기본 Where문
연산 부호의 부분에서는 !=, >=, in, intersect 등이 올 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
| hugo new "posts/testpost6.md"
@'
{{ range where .Site.Pages "Params.categories" "web" }}
...
{{ end }}
{{ range where .Site.Pages "Params.categories" "!=" "web" }}
...
{{ end }}
'@ >>./content/posts/testpost6.md
|
7 배열의 인덱스
연산 부호의 부분에서는 !=, >=, in, intersect 등이 올 수 있습니다.
1
2
3
4
5
6
7
| hugo new "posts/testpost7.md"
@'
{{ index $a 1 2 3 }}
{{ index $cities "seoul" }}
'@ >>./content/posts/testpost7.md
|
8 문자열 함수
printf, humanize, urlize, title
1
2
3
4
5
6
7
8
9
10
11
12
13
| hugo new "posts/testpost8.md"
@'
{{ printf "This is %s" .Title }}
{{ .Title | printf "This is %s" }}
{{ "this-is-title" | humanize }} => "This is title"
{{ "This is title" | urlize }} => "this-is-title"
{{ "This is title" | urlize }} => "This Is Title"
'@ >>./content/posts/testpost8.md
|
9 Partial 로 불러오기
\layouts\partials\ 에 있는 파일을 불러옵니다. 예를 들어 다음은 \layouts\partials\header.html의 내용을 불러옵니다.
1
2
3
4
5
6
| {{ partial "header" . }}
을 넣으면 된다. 여기서 파일 이름 다음에 나오는 .은 해당 partial에서 사용할 context를 의미한다.
hugo new "posts/testpost9.md"
@'
'@ >>./content/posts/testpost9.md
|
10 Shortcode - index로 인수넘기기
Shortcode들은 \layouts\shortcodes\에 들어있습니다. 파일명이 shortcode가 됩니다.
\layouts\shortcodes\greeting.html 으로 만들고 다음을 넣습니다.
사용하는 쪽에서는 shortcode는
{{< >}}
로 감싸서 사용합니다.
1
2
3
4
| hugo new "posts/testpost10.md"
@'
{{< greeting "tkim.info" >}}
'@ >>./content/posts/testpost10.md
|
.Get은 이 shortcode에 들어오는 인자를 뜻합니다. 따라서 .Get 0는 첫 번째 인자인 tkim.info 가 됩니다.
11 Shortcode - key로 인수넘기기
Shortcode에 넘기는 파라메터는 태그의 속성처럼 이름을 지정하는 방법도 있습니다.
\layouts\shortcodes\greeting.html 으로 만들고 다음을 넣습니다.
1
| hello {{ .Get "name" }}
|
1
2
3
4
| hugo new "posts/testpost11.md"
@'
{{< greeting name="tkim.info" >}}
'@ >>./content/posts/testpost11.md
|
Shortcode안에서 쌍따옴표 표기가 곤란할 경우에는 쌍따옴표가 아닌, 백쿼오트로 감싸서 표현하는 방법이 있습니다.
1
| "hello {{ .Get `name` }}"
|
Shortcode 도움말은 https://gohugo.io/content-management/shortcodes/ 에서 볼 수 있습니다.
참고
md 파일안에서 {{< >}} 을 쓰고 빌드하면 Shortcode로 인식해서 렌더링하려고 합니다. 이를 Escape한다고
\{{< */>}\} 같이 해도 제대로 Escape처리되지 않습니다.
좀 독특한 방법이 필요한데, 다음과 같이 /* */를 사용하거나 %/* */%를 사용하여 표기하면 제대로 md 파일안에서 표현할 수 있습니다.
{{<%/* /* */ */%>}}
{{</* %/* */% >}}
레퍼런스
