Eleventy의 블로깅

작성자: Mike Neumegen

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

간단한 Eleventy 블로그는 두 가지 다른 페이지 유형으로 구성됩니다.

모든 게시물을 나열하는 페이지입니다.

개별 블로그 게시물을 표시하는 페이지입니다.

이 강의에서는 이러한 페이지 유형이 함께 작동하여 고유한 블로그를 만드는 방법을 보여줍니다.

컬렉션

컬렉션은 콘텐츠를 그룹화하여 흥미로운 방식으로 나열, 페이지 매기기, 필터링을 수행할 수 있는 방법입니다. 우리는 블로그에 컬렉션을 사용할 것입니다.
tags 라는 머리말 필드에 문자열을 할당하여 컬렉션에 콘텐츠를 추가합니다. 동일한 태그가 있는 페이지는 컬렉션으로 함께 그룹화됩니다.

블로그 목록 페이지 만들기

먼저 모든 블로그 게시물을 나열할 페이지를 만들어 보겠습니다. 사이트의 루트에 blog.html라는 파일을 만듭니다. 명확성을 위해 Markdown보다 HTML을 선택했습니다. Markdown은 콘텐츠에 적합하지만 레이아웃을 구성하는 데는 HTML이 훨씬 더 명확합니다. blog.html에 다음을 추가합니다.

    ---
    title: Blog
    layout: page.html
    ---
    <h1>My posts</h1>
    <ul>
    {% for post in collections.posts | reverse %}
      <li>
        <a href="{{ post.url }}">{{ post.data.title }}</a> - {{ post.date | readableDate }}
      </li>
    {% endfor %}
    </ul>

여기에 몇 가지 새로운 개념이 있습니다. 설명하겠습니다.

collections.posts는 아직 존재하지 않습니다. 다음 단계에서 설정하겠습니다.

게시물에 reverse 필터를 호출합니다. 기본적으로 가장 오래된 게시물부터 최신 게시물까지 반환합니다. 블로그는 반대다.

.url는 출력 URL을 얻기 위해 모든 페이지에서 호출할 수 있습니다. 페이지에 연결하려는 경우 특히 유용합니다.

목록 페이지는 여기까지입니다. 게시물을 살펴보겠습니다.

게시물 작성

어려운 부분은 이미 완료되었습니다. 게시물을 작성하여 이 블로그를 시작하겠습니다.

먼저 posts라는 사이트의 루트에 폴더를 만듭니다. 짐작하셨겠지만 이곳이 우리 게시물이 게시될 곳입니다.

3개의 블로그 게시물을 작성해 보겠습니다.

/posts/playing-dead.md

    ---
    title: Playing dead
    date: 2022-06-01
    layout: post.html
    tags: 
      - posts
    ---
    Opossums have a physiological response to play dead when
    danger is presented. They have no control over this response,
    similar to fainting for humans.

/posts/tick-eaters.md

    ---
    title: Tick eaters
    date: 2022-06-02
    layout: post.html
    tags: 
      - posts
    ---
    Ticks don't stand a chance with opossums around. A single 
    opossum can eat up to 5,000 ticks per season.

/posts/immunities.md

    ---
    title: Immunities
    date: 2022-06-03
    layout: post.html
    tags: 
      - posts
    ---
    Opossums have a wide range of natural immunities 
    including rabies, snake venom, honeybee stings, 
    and botulism toxin. (I hope they enjoy their natural wrinkles.)

/_includes/post.html의 게시물에 대한 레이아웃을 특별히 만들어야 합니다.

    ---
    layout: page.html
    ---
    <h1>{{ title }}</h1>
    <p>{{ date | date: "%Y-%m-%d" }}</p>
    {{ content }}

여기서 주목해야 할 한 가지는 레이아웃에 다른 레이아웃을 설정하는 머리말이 있다는 것입니다. Eleventy에서는 이를 레이아웃 체인이라고 합니다. 우리 게시물은 post.html 레이아웃을 호출하고, 이는 다시 page.html 레이아웃을 호출합니다. 이를 통해 다양한 상황에서 레이아웃을 재사용할 수 있어 유지 관리가 더 쉬워집니다.

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

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

브라우저에서 사이트를 살펴보고 Eleventy 기반 블로그를 탐색하십시오.

청소

나는 계속해서 반복에 대해 이야기하지만, 반복을 발견하고 줄이는 것은 장기적으로 당신의 삶을 훨씬 더 쉽게 만들어줍니다.

우리 블로그에서 반복이 많은 한 영역을 발견했을 수 있습니다. 각 게시물은 post.html 레이아웃과 posts 태그를 설정합니다. 이 사이트의 경우 게시물에 대해 항상 이 작업을 수행할 것이므로 이 프로세스를 어떻게 자동화할 수 있습니까?

다행히도 Eleventy는 directory specific data file 형식의 답을 가지고 있습니다. 작동 방식은 디렉토리의 모든 페이지에 대해 원하는 머리말 데이터를 사용하여 posts라는 이름의 JSON 파일을 posts.json 디렉토리에 생성하는 것입니다.

분해합시다. 먼저 다음 콘텐츠로 /posts/posts.json를 만듭니다.

    {
      "layout": "post.html",
      "tags": ["posts"] 
    }

이것은 YAML이 아닌 JSON이므로 구문이 게시물 파일에서 본 것과 약간 다르지만 데이터 구조는 정확히 동일합니다.

이제 게시물 파일의 머리말에서 다음을 제거할 수 있습니다.

    layout: post.html
    tags: 
      - posts

그리고 짜잔. 안녕하세요, 유지하기 쉬운 코드입니다!

블로그가 커짐에 따라 블로그 목록 페이지에 페이지를 매길 수도 있습니다. 페이지 매김은 이 자습서의 범위를 벗어나지만 관심이 있는 경우 check out the docs . Eleventy에는 가장 멋진 내장 페이지 시스템이 있습니다.

무엇 향후 계획?

마지막 강의에서는 글로벌 데이터 파일을 사용하여 주머니쥐를 발견할 수 있는 상위 위치로 지도를 채울 것입니다.