[Hugo] Basic Syntax

Basic Syntax [1]

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

Access a Predefined Variable

(사전 정의 변수 사용하기)

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

Note : .Title === predifend Variable
Note : $address === custom Variable

{{ .Title }} 
{{ $address }}

함수의 파라메터에 전달인자를 넣는 방법은 공백을 이용하는 것입니다.

{{ FUNCTION ARG1 ARG2 }}

아래의 함수는 add 함수를 이용하여, 1과 2의 결과를 리턴하는 예제 입니다.

{{ add 1 2 }}

메서드와 멤버변수에 접근하는 방법은 .을 이용하면 됩니다.

{{ .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의 템플릿은 데이터 객체를 전달 받습니다. 휴고에서는 각각의 템플릿이 페이지가 됩니다. 아래의 예제에서는 .Title이 Page 변수에서 전달 받을 수 있는 요소 입니다.

Title요소는 현재 스코프에 위치하고 있고, .접두사를 이용하여, 쉽게 접근 할 수 있습니다.

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

변수는 커스텀 변수에 저장되거나, 나중에 참조 될 수 있습니다.

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

휴고가 0.48 버전으로 업그레이 되어, 변수에 재 할당을 할 때 = 를 사용 할 수 있게 되었습니다.

아래의 예제에서는 “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가 새롭게 컴파일링 되어야 사용가능 합니다 .

Adding Number

{{ add 1 2 }} 
//3 

Comparing Numbers

{{ lt 1 2 }} 
//true

더 자세한 연산 관련 함수에 대한 내용은 Math functions를 참조하세요

Includes

다른 템플릿을 포함할 때, 데이터를 전달해야 할 수 있습니다.

Note : 현재의 컨텍스트를 전달하기 위해서는 .을 이용해야 합니다.
Note : 모든 템플릿의 시작 위치는 layouts/ 폴더에서 시작 합니다.

Partial

Partial는 분리된 템플릿을 메인 템플릿에서 사용하기 위해 사용되는 함수 입니다.

Syntax : {{ partial "<Path>/<PARTIAL>.<EXTENSION> ."입니다.

아래의 코드는 layouts/partials/header.html을 포함합니다.

{{ partial "header.html" . }}

Template

Template 함수는 휴고의 이전 버전에서 partial 템플릿을 포함하기 위해 존재하던 함수였습니다. 지금은 내부 템플릿을 불러오기 위해 사용 됩니다.

Syntax : {{ template “_internal/. .”

{{ template “_internal/opengraph.html” . }}

Logic

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

Iteration

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

Using Context(.)

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

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

Declaring a variable name for an array element’s value

아래의 예제에서는 요소를 순회 할 때, 해당 요소에 이름을 붙여주어 프린트 합니다.

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

Declaring variable names for an array element’s index and value

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

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

Declaring variable names for a map element’s key and value

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

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

Conditional Range

만약 Range 에 전달되는 순회가능한 요소의 길이가 0 일 경우 다른 로직을 실행 할 수도 있습니다.

{{ 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의 템플릿은 다음의 값들을 falsy 하게 받아드립니다.

• false
• 0
• any zero-length array, slice, map, or string

with

With 구문은 “어떤 값이 존재한다면, 이를 실행하라 “로 해석 할 수 있습니다.

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

다음의 예제에서는 .Title이 truety할 때만 실행 될 것입니다.

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

with … else

아래의 예제에서는 Front-matter param이 “description”으로 설정된 경우, 해당 엘레먼트를 프린트하고, 아니라면 .Summary를 프린트 할 것 입니다.

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

if

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

아래의 예제에서는 위의 with구문을 if문느로 사용한 예제 입니다.

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

if … else

아래의 예제는 with … else 예제를 if else를 사용하여, 재구성한 예제 입니다. Isset 함수는 (Map || Array , Key || Index) => Boolean의 함수이며, 콜렉션에 key에 값이 존재하는 지를 판별하는 함수 입니다.

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

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 }}

and & or

And 와 or의 사용법은 or (state, state) , and (state, state)입니다.

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

#Hugo