Hugo 템플릿 기본 문법

Tags:

Hugo는 Go의 html/template와 text/template 라이브러리를 템플릿 기반으로 사용한다.

다음은 Go 템플릿에 대한 입문서일 뿐이다. Go 템플릿에 대한 자세한 내용은 공식 Go 문서를 확인하기 바란다.

Go 템플릿은 가장 기본적인 로직만 템플릿 또는 뷰 레이어에 반영한다는 신념으로 매우 간단한 템플릿 언어를 제공한다.

Basic Syntax

Go의 템플릿은 변수와 함수로 이루어진 HTML이다. GO의 템플릿에서 변수와 함수를 사용하기 위해서는 다음의 {{ }}를 사용 한다.

사전 정의된 변수(Predefined Variabl)에 접근

현재 스코프에 존재하는 사전 정의된 변수를 사용하거나, 변경된 변수를 사용 할 수 있다.

{{ .Title }} 
{{ $address }}
  • .Title는 사전 정의된 변수(Predifend Variable)이다.
  • $address는 사용자 정의 변수(Custom Variable)이다.

함수의 매개변수는 공백을 사용하여 구분된다. 일반적인 구문은 다음과 같다.

{{ FUNCTION ARG1 ARG2 }}

아래의 함수는 add 함수를 이용하여, 1과 2의 결과를 반환하는 예제이다.

{{ add 1 2 }}

메소드와 필드 접근하는 방법은 점(.)을 사용

콘텐츠의 설정(front matter)에 페이지 매개변수로 정의된 bar에 접근한다.

{{ .Params.bar }}

괄호를 이용하여, 그룹 아이템을 같이 사용 할 수 있다.

{{ if or (isset .Params "alt") (isset .params "caption") }} Caption {{ end }}

한줄의 구문을 여러줄로 나누는 것도 가능하다.

{{ if or 
    (isset .Params "alt") 
    (isset .params "caption") 
}}

문자열을 작성할 때 개행하여, 사용하는 것도 가능하다.

{{ $msg := `Line one.
Line two.` }}

변수 : Variables

각각의 Go의 템플릿은 데이터 객체를 전달 받는다. Hugo에서 각각의 템플릿에 Page가 전달된다. 아래의 예제에서는 .Title에서 접근할 수 있는 요소 중에 하나는 .Page이다.

Page가 템플릿의 디폴트 범위(scope)이므로 현재 범위에 Title 요소는 . 접두사를 이용하여, 간단히 접근 할 수 있다.

<title>{{ .Title }}</title>

변수는 커스텀 변수에 저장하고, 나중에 참조할 수도 수 있다.

사용자 정의 변수는 $ 접두사를 붙여야 한다.

{{ $address := "123 main st." }}
{{ $address }}

= 연산자를 사용하여 변수에 할당할 수 있다.

아래의 예제에서는 홈페이지에서는 “Var is Hugo Home"이 출력될 것이며, 모든 다른 페이지에는 “Var is Hugo Page"로 보이게 될 것이다.

{{ $var := "Hugo Page" }}
{{ if .IsHome }}
    {{ $var = "Hugo Home" }}
{{ end }}
Var is {{ $var }}

함수 : Functions

Go 템플릿은 몇 가지의 기본 함수만 제공되지만, 어플리케이션을 확장 할 수 있게 메카니즘을 제공해준다.

Hugo template funciotn은 웹사이트에 추가적인 기능을 제공한다.
함수는 함수명으로 호출 되며, 필요한 매개변수는 공백으로 구분한다. Hugo의 템플릿 함수는 Hugo가 새로 컴파일을 하지 않으면 사용할 수 없다.

예제 1: 숫자 더하기

{{ add 1 2 }}
<!-- prints 3 -->

예제 2: 숫자 비교하기

{{ lt 1 2 }} 
<!-- prints true (i.e., since 1 is less than 2) -->

두 예제 모두 Go 템플릿 수학 함수(Math functions)를 사용한다.

Go 템플릿 문서의 Hugo 문서에 있는 것보다 더 많은 부울 연산자가 있다.

포함 : Includes

다른 템플릿을 포함할 때, 접근해야 하는 데이터를 전달해야 한다.

현재의 컨텍스트를 전달하려면 뒤에 점(.)을 이용해야 한다.

템플릿 위치는 항상 Hugo 안에 layouts/ 디렉터리에서 부터 시작된다.

Partial

Partial는 분리된 템플릿을 메인 템플릿에서 사용하기 위해 사용되는 함수이다.
구문은 {{ partial "<Path>/<PARTIAL>.<EXTENSION> ."이다.

예를 들어, 아래의 코드는 layouts/partials/header.html을 포함한다.

{{ partial "header.html" . }}

Template

template 함수는 Hugo의 예전 버전에서 partial 템플릿을 포함하기 위해 존재하던 함수였다. 이제는 내부 템플릿을 불러오기 위해 사용 된다.
구문은 {{ template "_internal/<TEMPLATE>.<EXTENSION>" . }}이다.

사용 가능한 내부 템플릿은 여기에서 찾을 수 있다.

예를 들어, 아래 코드는 opengraph.html 내부 템플릿을 포함한다.

{{ template "_internal/opengraph.html" . }}

로직 : Logic

GO 템플릿은 기본적인 반복문과 조건문을 제공한다.

반복(Iteration)

Go 템플릿은 강력한 range 함수를 통해 map, array를 반복하고, 자르기도 한다. 아래의 예제는 다양한 range 함수의 다양한 활용 방법이다.

예제 1: Using Context(.)

아래의 예제에서는 .을 사용하여, $array 변수 내부에 있는 요소를 사용한다.

{{ range $array }} 
    {{ . }} 
{{ end }}

예제 2: 배열 요소의 값에 대한 변수 이름 선언

아래의 예제에서는 요소를 반복할 때, 해당 요소에 이름을 지정하여 출력한다.

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

예제 3: 배열 요소의 인덱스 및 값에 대한 변수 이름 선언

배열을 순회하며, 해당 요소의 index를 변수로써 사용 가능하다.

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

예제 4: map의 키와 값에 대한 변수 이름 선언

아래의 예제에서는 map의 key와 value를 변수명으로 지정하여 사용한다.

{{ range $elem_key, $elem_val := $map }}
   {{ $elem_key }} -- {{ $elem_val }}
{{ end }}

예제 5: 비어 있는 map, array, slice의 조건

만약 Range 에 전달되는 반복 가능한 요소의 길이가 0 이면, else문에 있는 다른 로직을 실행 할 수도 있다.

{{ range $array }}
    {{ . }}
{{else}}
    <!-- This is only evaluated if $array is empty -->
{{ end }}

조건문 : Conditionals

if, else, with, or, and, not은 Go의 템플릿에서 조건 논리를 처리하기 위한 프레임워크를 제공한다. range와 동일하게 if와 with 구문은 {{ end }}로 닫는다.

Go의 템플릿은 다음의 값들을 false로 처리한다.

  • false (boolean)
  • 0 (integer)
  • any zero-length array, slice, map, or string

예제 1 : with

with 구문은 “어떤 값이 존재한다면, 이를 실행하라"라는 의미이다.

with 구문은 range와 동일하게, .으로 현재 컨텍스트를 바인딩 할 수 있다.

변수가 없거나 위에서 설명한 대로 “false"으로 판단되면 블록을 건너뛴다.

다음의 예제에서는 .title가 존재할 때만 실행이 될 것이다.

{{ with .Params.title }}
    <h4>{{ . }}</h4>
{{ end }}

예제 2 : with…else

아래의 예제에서는 설정에 Param로 “description"이 지정되어 있다면 해당 값를 출력하고, 없다면 .Summary를 출력 한다.

{{ with .Param "description" }}
    {{ . }}
{{ else }}
    {{ .Summary }}
{{ end }}

.Param function. 참조.

예제 3 : if

if 구문은 with과 거의 동일하지만, with 구문과 달리 컨텍스트가 .으로 바인딩 되지 않는다.

아래 예제는 “예제 1 : with“을 if 구문으로 다시 작성한 것이다.

{{ if isset .Params "title" }}
    <h4>{{ index .Params "title" }}</h4>
{{ end }}

예제 4 : if … else

아래의 예제는 “예제 2 : with…else“를 if … else으로 다시 작성한 것이다. isset 함수는 “(Map || Array , Key || Index) => Boolean"의 함수이며, 콜렉션에 key에 해당되는 값이 있지는 판별하는 함수이다.

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

예제 5 : if … else … else

with 구문과 다르게, if는 else if 구문을 사용할 수 있다.

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

예제 4 : and & or

and와 or의 사용법은 or (state, state), and (state, state)이다.

{{ if (and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")) }}

원본

Introduction to Hugo Templating




최종 수정 : 2024-03-09