Hugo 템플릿 기초

작성자: Mike Neumegen

Hugo용 Git 기반 CMS인 CloudCannon에서 제공했습니다.



Hugo 템플릿을 사용하면 페이지가 렌더링되는 방식을 제어할 수 있습니다. 변수를 사용하고, 배열을 반복하고, 조건을 확인하고, 함수를 실행할 수 있습니다. 사이트에서 페이지를 구축하는 데 도움이 되는 간단한 프로그래밍 언어라고 생각하세요. 레이아웃에 있는 중괄호{{ }}는 Hugo 템플릿입니다.

서두란 무엇입니까?

머리말은 콘텐츠 파일 상단에 있는 메타데이터 스니펫입니다. 예를 들어 레이아웃을 설정하거나 현재 페이지가 초안임을 나타내는 일부 메타데이터는 Hugo 전용입니다. 다른 형식의 메타데이터는 예를 들어 페이지에서 사용할 영웅의 유형을 나타내거나 가장 좋아하는 5가지 음식 목록을 나타내는 등 사이트에 따라 다릅니다.

머리말은 콘텐츠 파일 상단에 작은YAML 스니펫 형식으로 제공됩니다. 인덱스 페이지와 정보 페이지 모두에서 다음과 같이 확인했습니다.

    ---
    title: Home
    ---

별거 아닌 것 같지만 Hugo 템플릿을 사용하여 레이아웃에서 이 머리말을 참조할 수 있습니다.

Hugo 템플릿이란 무엇입니까?

Hugo는 레이아웃에서 템플릿 언어로 Go 템플릿을 사용합니다. 머리만 굴리면 쉽습니다. Hugo 땅의 많은 것들과 마찬가지로 때때로 말하는 것보다 보여주는 것이 더 쉽습니다.

Hugo 템플릿의 예

문자열 출력

    <p>A Go template is a normal HTML page. When you want to execute a piece of 
    code, you can use double curly braces like this: {{ "Hello!" }}.</p>

머리말 출력

    <!-- You can reference a variable from your front matter in a layout with .Params. For example, you 
    could output the title on your pages with: -->

    <title>{{ .Params.title }}</title>

사이트 구성의 출력

    <!-- Sometimes you'll want to set a variable globally in your config.toml. 
    Hugo has already initalized a title in your config.toml. You can access
    a variable from your global config with site. For example: -->

    <title>{{ .Params.title }} | {{ .Site.title }}</title>

정황

    <!-- We might want to check if the front matter title exists. If
    it exists, output it; if not, use the global config title. -->

    {{ if isset .Params "title" }}
      <title>{{ .Params.title }}</title>
    {{ else }}
      <title>{{ .Site.title }}</title>
    {{ end }}

변수 설정 및 출력

    <!-- variables at set with a $ sign. For example: -->
    {{ $favorite_food := "Gazelle" }}
    {{ $favorite_food }}

루핑

    <!-- In Go, an array that can change size is called a slice.
    You can iterate over an array or slice using range. -->
    {{ $best_friends := slice "pumbaa" "timon" "nala" "rafiki" }}

    <ul>
    {{ range $best_friends }}
      <li>{{ . }}</li>
    {{ end }}
    </ul>

중첩된 키 값

콘텐츠 파일:

    ---
    title: Appearance
    apperance:
      eyes: green
      snoot: boopable
      whiskers: true
      limbs:
        - claws: 5
          side: left
          position: front
        - claws: 4
          side: right
          position: front
        - claws: 3
          side: left
          position: back
        - claws: 5
          side: right
          position: back
    ---

레이아웃 파일:

    <!-- If we want to output all of these variables, we could call 
    .Params.appearance.x for each one. Instead we could use `with` to change 
    the context to '.'. It also has the benefit of checking whether the 
    variable exists and won't run the block if it doesn't. -->

    {{ with .Params.appearance }}
    <h3>My top appearance traits</h3>
    <dl>
        <dt>Eyes</dt>
      <dd>{{ .eyes }}</dd>

      <dt>Snoot</dt>
      <dd>{{ .snoot }}</dd>

      <dt>Whiskers</dt>
      <dd>{{ .whiskers }}</dd>

        {{ with .limbs }}
        <dt>Claws</dt>
        <dd>
            <ul>
          {{ range . }}
            <li>{{ .position }} {{ .side }} {{ .claws }</li>
          {{ end }}
          </ul>
        </dd>
      {{ end }}
    </dl>
    {{ end }}

이것이 템플릿의 기초입니다. Hugo 여정 전반에 걸쳐 이러한 모든 개념을 사용하게 될 것입니다. templating documentation을 탐색하여 수행할 수 있는 다른 작업에 대한 아이디어를 얻을 수 있습니다.

HTML 출력을 깔끔하게 유지하려면 {{-</code> and <code>-}}를 사용하여 태그 주변의 공백을 잘라낼 수 있습니다. The Hugo documentation has a great example of this .

함께 모아서

이름과 현재 연도가 포함된 바닥글을 웹사이트에 추가하여 새로운 Hugo 템플릿 지식을 실행해 보겠습니다. 또한 특정 페이지에서 바닥글을 숨기는 데 사용할 수 있는 선택적 머리말 필드를 추가합니다.

쉬운 것부터 시작합시다. 당신의 이름. config.toml 에 새 키로 추가하십시오. 이것은 특별한 Hugo 용어가 아니라 이 사이트에 대한 것이므로 params 개체 아래에 넣습니다.

    [params]
    name = 'Simba'

이제 부분을 만들어 봅시다. 다음을 사용하여 레이아웃 부분 디렉터리에 footer.html를 추가합니다.

    {{ with .Params.hide_footer }}
      <!-- No footer here! -->
    {{ else }}
      <footer>
        Website made by {{ .Site.Params.name }} in {{ now.Year }}
      </footer>
    {{ end }}

마지막으로 </body> 레이아웃에서 부분 이전baseof.html을 호출합니다.

    {{ partial "footer.html" . }}

hide_footer 머리말이 작동하는지 확인하려면 다음을 머리말에 추가하여 about.md 페이지에서 바닥글을 끄십시오.

    hide_footer: true

hugo serve를 실행하고 브라우저에서 사이트를 봅니다. 홈페이지에는 바닥글이 있고 정보 페이지에는 없습니다.

무엇 향후 계획?

다음으로 Hugo에서 블로그를 만들고 새로운 Hugo 템플릿 지식을 테스트해 보겠습니다.