Dog foot print

[Hugo] Basic Syntax 2 본문

Framwork/Hugo

[Hugo] Basic Syntax 2

개 발자국 2021. 5. 30. 23:53

Basic Syntax[2]

Pipes

Go 템플릿의 가장 강력한 구성요소 중 하나는 작업을 차례대로 쌓는 기능입니다. 이것은 pipe에 의해 완료됩니다. 파이프라인의 출력은 다음 파이프라인의 입력이 되기 때문에 가능합니다.

Go 템플릿의 문법이 쉬운 이유는 파이프가 필요한 함수를 체인형식으로 호출하기 때문입니다. 파이프의 한가지 한계는 한가지 값에 의해 실행되고, 이 값은 다음 파이프의 다음 파이프의 마지막 인자가 됩니다.

다음 예제는 파이프를 이용하고, 사용하는데 도움이 될 것입니다.

shuffle

다음 두개의 예제는 동일합니다. 

{{ shuffle (seq 1 5) }}
{{ (seq 1 5) shuffle }}

index

다음 예제에서는 페이지 파라메터로 “disqus_url” 을 전달 하였고, HTML을 무시합니다. 또한 이 예제에서는 go template에서 제공한 index함수를 사용합니다.

{{ index .Params "disqus_url" | html }}

or with isset

{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr") }}
Stuff Here
{{ end }}

위 예제는 다음과 같이 다시 작성할 수 있습니다. 

{{ if isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" }}
Stuff Here
{{ end }}

Internet Explorer Conditional Comments

기본적으로 Go의 템플릿은 HTML 주석을 결과에서 삭제합니다. 이것은 인터넷 익스플로러에서 조건부 주석을 삭제하는 side effect가 존재합니다. 이를 해결 하려면 다음과 같이 작성해야 합니다. 

{{ "<!--[if lt IE 9]>" | safeHTML }}
  <script src="html5shiv.js"></script>
{{ "<![endif]-->" | safeHTML }}

백틱 ( ` )을 사용 하여, 조건부 주석에서 큰 따옴표를 사용 하는 방법도 존재합니다. 

{{ `<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->` | safeHTML }}

Context

Go 템플릿에서 제일 기초적인 것은 {{ . }} 이 현재의 컨텍스트를 참조하고 있는 것입니다.

  • 템플릿의 최상위 위치에서 사용할 수 있는 데이터 모음입니다.
  • 반복문에서 이것은 반복문이 동작할 때 현재의 배열이나 맵의 요소를 가리킵니다.

만약 반복문에서 page 수준의 데이터에 접근하고싶다면 다음의 방법을 참고 해주세요 .

{{ $title := .Site.Title }}
<ul>
{{ range .Params.tags }}
    <li>
        <a href="/tags/{{ . | urlize }}">{{ . }}</a>
        - {{ $title }}
    </li>
{{ end }}
</ul>

Note : loop가 작동 할 때 한번만 {{ . }} 배열의 요소 값이 전달 됩니다. 그 이후로는 변경됩니다. {{ $title }} 은 우리가 Loop 바깥에서 선언하였기 때문에 루프안에 존재하여도 영향을 받지 않습니다.

Use $. to access the global context

$ 는 페이지 템플릿에서 특별한 기호입니다. $는 .과 동일하게 할당 됩니다. 이것에 대해서 더 자세히 알고 싶다면 링크를 참조하세요. $는 언제 어디서나 최상위 전역 컨텍스트에 어디서나 접근 할 수 있다는 것을 의미합니다. 아래의 예제는 위의 코드 예제와 동일하지만 .site.Title 변수를 $로 접근 하는 것을 볼 수 있습니다. 

<ul>
{{ range .Params.tags }}
  <li>
    <a href="/tags/{{ . | urlize }}">{{ . }}</a>
            - {{ $.Site.Title }}
  </li>
{{ end }}
</ul>

Note : $ 에 다른 값을 할당하려 하지 마세요. $는 {{ $ := . }}형태로 작성되어 있습니다.

Whitespace

Go에서는 {{ }}사이의 공백과 내부에 존재하는 -를 공백으로 인식하여, 삭제합니다. 다음의 예제를 확인해보세요 .

<div>
  {{ .Title }}
</div>

위의 코드는 다음과 같이 변경 됩니다. 

<div>
  Hello, World!
</div>

-는 공백을 삭제할 뿐 아니라 해당 기호가 존재하는 라인을 삭제하기도 합니다. 

<div>
  {{- .Title -}}
</div>

위의 코드는 다음과 같이 변경됩니다. 

<div>Hello, World!</div>

Go는 다음의 문자를 공백으로 인식합니다.

  • space
  • horizontal tab (탭)
  • Carrie return (엔터)
  • newline

Comment

주석을 작성하는 방법은 두개가 존재합니다.

Go templates comment

Go template에서는 {{/* blabla */}} 를 이용합니다. 이렇게 작성된 주석은 렌더링 되지 않습니다.

아래의 예제에서는 bonsoir, eliott만 렌더링 됩니다. 

Bonsoir, {{/* {{ add 0 + 2 }} */}}Eliott.

HTML Comments

html에서 주석이 필요한 경우가 존재합니다. 만약 주석을 조건부로 작성하고 싶다면 pipe printf를 safeHTML를 이용하세요. 

{{ printf "<!-- Our website is named: %s -->" .Site.Title | safeHTML }}

HTML Comments containing Go Template

HTML주석은 모두 삭제됩니다. 그러나, 내용은 평가됩니다. 이 말의 의미는 주석 내부에 존재하는 GO의 문법을 사용한 경우, 빌드가 실패 될 수 있다는 말 입니다 .

<!-- {{ $author := "Emma Goldman" }} was a great woman. -->
{{ $author }}

위의 코드에서는 $author로써 “Emma Goldman”이 출력되길 원하지만, 이는 HTML 주석을 평가하는 과정에서 에러를 발생 시킬 것 입니다.

Hugo parameters

Hugo는 사전 정의된 값들을 템플릿에 레이어 형태로 전달 합니다. 예를 들어, configuration 혹은 구체적인 메타데이터가 정의된 content에서 말이죠. 개발자는 어떤 값이든 템플릿에서 사용하기 위해 변수를 생성 할 수 있습니다.

Use Content (Page) Parameters

개별적인 Content에서 작성된 데이터를 통하여, 템플릿에서 변수처럼 사용 가능합니다. 많은 페이지들은 콘텐츠의 테이블에서 많은 이점을 얻습니다. 그러나, 컨텐츠의 테이블은 말이 안되는 경우가 많습니다. 아래 예제에서는 notoc이라는 변수를 true로 설정하면서, 사전 정의된 테이블의 컨텐츠가 렌더링 되지 않게 방지 하였습니다. 

---
title: Roadmap
lastmod: 2017-03-05
date: 2013-11-18
notoc: true
---

이제 toc.html을 통해 어떤 결과가 나올지 예상해봅시다.

layouts/partials/toc.html

{{ if not .Params.notoc }}
<aside>
  <header>
    <a href="#{{.Title | urlize}}">
    <h3>{{.Title}}</h3>
    </a>
  </header>
  {{.TableOfContents}}
</aside>
<a href="#" id="toc-toggle"></a>
{{ end }}

위의 결과로 aside는 렌더링 되지 않을 것 입니다. 그 이유는 notoc의 변수가 true이기 때문입니다.

Use Site Contiguration Parameters

개발자는 다양한 site configuration file에서 변수를 정의할 수 있습니다. 이 파라메터들은 템플릿에서 접근이 가능합니다.

config.yaml

params:
  copyrighthtml: Copyright &#xA9; 2017 John Doe. All Rights Reserved.
  sidebarrecentlimit: 5
  twitteruser: spf13

푸터 레이아웃을 작업 할 때 이를 사전정의된 copyrighthtml 파라메터를 사용하여, 이를 렌더 할 수 있습니다. 이 변수를 사용할 때 safeHTML을 사용한다면, 이는 이스케이프 되지 않을 것입니다. 

{{ if .Site.Params.copyrighthtml }}
    <footer>
        <div class="text-center">{{.Site.Params.CopyrightHTML | safeHTML}}</div>
    </footer>
{{ end }}

또한 with 구문을 사용하여, 사전 정의된 값을 사용하고, 이를 {{ . }}으로 바인드하여, 사용 할 수도 있습니다. 

{{ with .Site.Params.twitteruser }}
    <div>
        <a href="https://twitter.com/{{.}}" rel="author">
        <img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}" alt="Twitter"></a>
    </div>
{{ end }}

마지막으로는 마법의 상수를 layouts 에서 사용 할 수 있습니다. 다음 예제에서는 first 함수는 사용하며, .RelPermalink페이지 변수, .site.pages변수를 사용합니다. 

<nav>
  <h1>Recent Posts</h1>
  <ul>
  {{- range first .Site.Params.SidebarRecentLimit .Site.Pages -}}
      <li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
  {{- end -}}
  </ul>
</nav>

#hugo

반응형

'Framwork > Hugo' 카테고리의 다른 글

[Hugo] lookup order  (0) 2021.05.31
[Hugo] Basic Syntax  (0) 2021.05.30
[Hugo] Directory structure  (0) 2021.05.29
[Hugo] Quick Start  (0) 2021.05.29
'Framwork/Hugo' Related Articles more
Comments