Hugo에서 블로깅

작성자: Mike Neumegen

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



Hugo의 블로그는 비교적 간단합니다. 모든 블로그 게시물을 나열하는 페이지와 게시물 날짜가 있는 일련의 콘텐츠 페이지로 구성됩니다. 그게 전부입니다.

블로그 목록 페이지 만들기

이 예제에서 레이아웃 계층 구조가 어떻게 작동하는지 확인할 것입니다.
posts 디렉토리에 /content/라는 디렉토리를 만들고 그 안에 다음을 사용하여 _index.md라는 파일을 만듭니다.

    ---
    title: Blog
    ---

_index.md — 그게 무슨 뜻인지 기억하세요? 목차 파일이며 이 경우 게시물을 나열합니다. 현재 /layouts/_default/list.html 레이아웃을 사용하려고 합니다. 이 페이지에는 콘텐츠가 없으므로 이 레이아웃을 사용하고 싶지 않습니다. 대신 게시물 나열을 위해 특별히 새 레이아웃을 만들고 싶을 것입니다.

Hugo 레이아웃 계층 구조가 작동하는 방식은 먼저 현재 섹션과 일치하는 레이아웃을 찾은 다음(섹션을 디렉토리로 생각) _default 의 전역 기본값으로 폴백하는 것입니다. 즉, layouts 디렉토리에 posts라는 새 디렉토리를 만들고 내부에 다음 내용을 포함하여 createlist.html를 만들 수 있습니다.

    {{ define "main" }}
      <h1>My posts</h1>
      <ul>
      {{ range .Pages }}
        <li>
          <a href="{{ .Permalink }}">{{ .Title }}</a> - {{ .Date.Format "January 2, 2006" }}
        </li>
      {{ end }}
      </ul>
    {{ end }}

여기에는 새로운 개념이 거의 없습니다. 설명하겠습니다.

목록 페이지( _index.html )에는 .Pages 변수가 있는 모든 하위 페이지의 배열이 있습니다.

.Date에는 형식이 호출되어 2006년에 임의의 날짜가 전달됩니다. 그 이유는 무엇입니까? 날짜 형식을 지정하는 것은 Go의 단점입니다. 이에 대한 자세한 내용을 읽을 수 있습니다here.

.Permalink는 모든 페이지에서 호출되어 최종 URL을 가져올 수 있습니다. 페이지에 연결하려는 경우 특히 유용합니다.

이것이 목록 페이지에 필요한 전부입니다. 게시물로 이동해 보겠습니다.

게시물 작성

우리는 이미 어려운 부분을 수행했습니다. 몇 개의 게시물을 작성하여 이 블로그를 완성해 봅시다.

게시물은 /content/posts 디렉토리에 있으며 특별한 명명 규칙이 필요하지 않습니다. 권장하고 싶은 한 가지 팁은 파일 이름에 게시물 날짜를 추가하는 것입니다. Hugo는 이를 완전히 무시하지만 수백 개의 다른 게시물 중에서 게시물을 찾으면 도움이 됩니다.

시작하기 위해 3개의 블로그 게시물을 만들어 보겠습니다.
/contents/posts/2022-04-03-i-like-to-roar.md

    ---
    title: I like to roar
    date: 2022-04-03
    ---
    Hi, quick update from me. I just want to let everyone know that I like roaring.

/contents/posts/2022-04-02-today-i-made-friends.md

    ---
    title: Today I made friends
    date: 2022-04-02
    ---
    I got lost in the woods today. Two friends, a Meerkat and a Warthog, found me, sung a song with me and gave my life new meaning. Today was a good day.

/contents/posts/2022-04-01-vegan-experiment.md

    ---
    title: Vegan experiment
    date: 2022-04-01
    ---
    I tried to become a vegan today. I made it to lunch time and couldn't bear the sight of another green leaf. Yuck!

블로그 목록 페이지와 마찬가지로 이 게시물도 /layouts/_default/single.html 를 사용하려고 합니다. 다음을 사용하여 /layouts/posts/single.html의 게시물에 대한 레이아웃을 특별히 만들어 보겠습니다.

    {{ define "main" }}
      <h1>{{ .Params.Title }}</h1>
      <p>{{ .Date.Format "January 2, 2006" }}</p>
      {{ .Content }}
    {{ end }}

마지막으로 탐색에 블로그를 추가해 보겠습니다. 열기/layouts/partials/nav.html 및 다른 항목 추가:

    <li><a href="/posts/">Blog</a></li>

실행hugo serve , 브라우저에서 사이트를 열고 걸작을 봅니다.

무엇 향후 계획?

마지막 강의에서는 Hugo 데이터 파일을 사용하여 좋아하는 휴가지로 지도를 채웁니다.