Hugo - 기본 문법/구조 이해하기

Hugo 는 웹사이트 프레임워크인데, 블로그를 구축하기에 아주 편하게 되어있다. 기본적으로 아예 맨땅에 헤딩하듯 만들지는 않고, 대부분 구글링하면서 마음에 드는 Hugo 테마를 찾아 사용하면 된다. 그러면 바로 블로그 사이트가 만들어지는 경이로움을 볼 수 있다. 그래도 사용하다보면, 웹사이트의 구성을 조금씩 손을 보고 싶을 때가 있다. 그러면 Hugo의 템플릿 관련 문법을 조금은 알아야 수정을 할 수 있는데, 그 중에서 반복부(looping) 처리하는 로직을 수정할 일이 있어 일부 노하우를 기록해본다.

Hugo 템플릿 문법구조

Hugo 관련 한글 자료를 찾아보는게 그리 쉽지는 않다. 그냥 공식홈페이지에 있는 Documents 를 보는게 속편하다. Docs 메뉴를 클릭하면 수많은 서브메뉴들이 보일텐데, Templates > Templating 메뉴를 참고하시면 템플릿 관련 기본문법을 익힐 수 있다.

해당 페이지를 잘 읽어보면 hugo는 Go 프로그래밍언어의 html/template와 text/template 라이브러리를 사용한다고 나와 있다. hugo 에서 찾을 수 없는 설명이나 문서들은 Go Template 공식문서를 직접 가셔서 참고하시기 바란다.

Hugo 기본 문법

앞서 말한 Go Templates 는 html 파일들로 이루어져 있는데, hugo 프로젝트를 제대로 생성했다면, 아래 layout 폴더에서 볼 수 있다.

아무파일이나 하나씩 열어보면 {{ }} 괄호로 묶여있는 로직들을 볼 수 있다. 이 안에 있는 정체불명의 문법들을 일부 살펴볼 예정이다.

<article role="main" class="blog-post">
{{ .Content }}
{{ if .Params.tags }}
    <div class="blog-tags">
    {{ range .Params.tags }}
        <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}/">{{ . }}</a>&nbsp;
    {{ end }}
    </div>
{{ end }}

{{ if $.Param "socialShare" }}
    <hr/>
    <section id="social-share">
        <div class="list-inline footer-links">
        {{ partial "share-links" . }}
        </div>
    </section>
{{ end }}
</article>

사칙연산 사용법

hugo 템플릿 문법에서 함수 사용법의 기본은 아래와 같다. 함수명이 제일 먼저나오고, 파라메터는 공백으로 구분되어 인식된다.

{{ FUNCTION ARG1 ARG2 .. }}

제일 기초가되는 덧셈/뺄셈/곱셈/나눗셈은 +,-,*,/ 로 연산되지 않는다. 대신 Math Functions을 사용해야 하며, 함수 사용법은 대략 아래와 같다. 사칙연산 외에도 log, max, min, pow, rount, sqrt 등 더 있으니 링크 참고 하시면 된다.

# 덧셈
{{add 1 2}} → 3
{{add 1.1 2}} → 3.1

# 뺄셈
{{sub 3 2}} → 1
{{sub 3 2.5}} → 0.5

# 곱셈
{{mul 2 3}} → 6
{{mul 2 3.1}} → 6.2

# 나눗셈
{{div 6 4}} → 1
{{div 6 4.0}} → 1.5

# 나머지
{{mod 15 3}} → 0

반복문 사용법

반복문은 대부분 배열(array)가 있는경우, range 함수를 사용해서 loop 처리한다.

{{ range $elem_val := $array }}
    {{ $elem_val }}
{{ end }}

단순 루프만 하는게 아니라, 인덱스 정보까지 알고 싶다면 아래문법을 이용하면 된다.

{{ range $elem_index, $elem_val := $array }}
   {{ $elem_index }} -- {{ $elem_val }}
{{ end }}

조건문 사용법

조건문도 다른 프로그래밍언어와 다르니 한번 읽어보는게 좋다. <, >, =, != 와 같은 일반적인 비교연산자를 사용할 수 없고, 별도 정의된 함수를 사용해야 한다.

#  arg1 > arg2
{{ if gt 10 5 }}true{{ end }}

# arg1 >= arg2
{{ if ge 10 5 }}true{{ end }}

# arg1 <= arg2
{{ if le 5 10 }}true{{ end }}

# arg1 < arg2
{{ if lt 5 10 }}true{{ end }}

# arg1 == arg2
{{ if eq .Section "blog" }}current{{ end }}

# arg1 != arg2
{{ if ne .Section "blog" }}current{{ end }}

물론 if/else if/else 구조도 가능하다.

{{ if (isset .Params "description") }}
    {{ index .Params "description" }}
{{ else if (isset .Params "summary") }}
    {{ index .Params "summary" }}
{{ else }}
    {{ .Summary }}
{{ end }}