Jekyll의 레이아웃

작성자: Farrel Burns

Jekyll용 Git 기반 CMS인 CloudCannon에서 가져왔습니다.

여기서 배울 내용:

페이지 레이아웃 만들기

다른 레이아웃 내에서 레이아웃 사용

프로그래밍 방식으로 페이지 제목 변경

    # Starting repo
    git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git

    # Starting branch:
    git checkout layouts-intro-start

    # Finished branch:
    git checkout layouts-intro-finish

Jekyll 레이아웃이란 무엇입니까?

HTML로 웹 사이트를 작성할 때 머리글, 바닥글 및 탐색과 같은 많은 섹션이 여러 페이지에서 동일하게 유지된다는 것을 알 수 있습니다. 사이트에 포함된 페이지가 몇 페이지 이상인 경우 복사하여 붙여넣어야 할 콘텐츠가 많으므로 모든 페이지에서 변경해야 합니다. Jekyll은 이 문제에 대한 쉬운 해결책인 레이아웃을 제공합니다. 레이아웃에 대해 자세히 읽어보십시오on Jekyll’s official site.

레이아웃 사용 방법

레이아웃은 설정 및 사용이 간단합니다. 우선 프로젝트 루트에 _layouts 폴더를 만들어야 합니다. Jekyll은 이 이름을 찾을 줄 압니다.

다음으로 해당 폴더 내에 default.html를 생성해 보겠습니다. 이것이 웹 페이지의 기본 "쉘"이 됩니다. 이제 index.html를 살펴보고 반복 가능한 콘텐츠에서 고유한 콘텐츠를 분리해 보겠습니다. index.html에서 모든 콘텐츠를 가져와 default.html에 붙여넣습니다. 그런 다음 콘텐츠를 삽입할 위치를 Jekyll에 알려야 합니다. 콘텐츠가 없는 영역에 이 태그를 삽입하기만 하면 됩니다.

    <!-- Content goes here: -->
    {{ content }}

거의 다 왔습니다. 실제로 레이아웃을 사용해 봅시다. index.html 로 돌아가서 머리말을 사용하여 Jekyll에게 페이지의 콘텐츠를 레이아웃에 삽입해야 한다고 알려야 합니다. 이렇게 하려면 특수 레이아웃 변수를 사용하여 머리말을 추가하고 값으로 default(.html 제외)를 추가하기만 하면 됩니다.

    ---
    layout: page
    title: Home
    ---
    <p class="featured">Featured posts</p>
    <h2 class="heading-secondary dark-blue">Latest posts</h2>

이제 서버를 다시 실행하고 페이지의 내용을 볼 수 있습니다. 보시다시피 변경된 사항은 없지만 index.html가 훨씬 짧습니다. 이제 반복에 대한 걱정 없이 콘텐츠를 작성하고 default(또는 기타 사용자 지정) 레이아웃을 사용할 수 있습니다.

한 가지 알아차릴 수 있는 것은 우리about.md 페이지가 기본적으로 Jekyll의 기본 테마에서 다른 레이아웃으로 연결된다는 것입니다. 레이아웃 참조도 default로 변경합니다.

레이아웃 상속

레이아웃은 다른 레이아웃 내에서 참조할 수도 있습니다. 그러나 이것이 언제 유용할 수 있습니까? 때때로 기본 페이지의 영웅 영역과 같이 모든 페이지에서 콘텐츠를 동일하게 유지하고 싶을 수 있지만 모든 경우에 그런 것은 아닙니다.

현재 레이아웃에서 영웅 섹션은 default.html 에서 사용됩니다. 즉, 영웅 섹션을 사용하는 모든 페이지에 나타납니다. page.html의 영웅 섹션을 제거하고 붙여넣은 default라는 또 다른 레이아웃을 만든 다음 레이아웃 자체가 기본값을 가리키는 머리말을 추가해 보겠습니다.

    ---
    layout: default
    ---
    <div class="hero">
    <h1 class="hero__header dark-orange">{{ site.title }}</h1>
    </div>
    {{ content }}

이 페이지를 사용하기 위해 인덱스 페이지의 머리말을 수정합니다.

    ---
    layout: page
    Title: Home
    ---

이제 인덱스 페이지를 방문하면 영웅 섹션이 로드되지만 기본 레이아웃을 사용하는 다른 모든 페이지에는 영웅 섹션이 없습니다.

페이지 변수

지난 강의에서 색인 페이지의 제목 태그에도 {{ page.title }}를 추가한 것을 기억하십니까? 이제 레이아웃을 참조하는 각 페이지에 제목 변수를 계속 추가할 수 있으며 Jekyll이 이를 자동으로 변경합니다. default.html 레이아웃에서 "제목: 홈"을 제거하고 다음 변수를 인덱스 및 정보 페이지에 추가합니다.

    title: Home

    title: About

다른 페이지 변수도 같은 방식으로 참조할 수 있습니다. 이렇게 하면 레이아웃에서 콘텐츠를 한 번만 설정해도 페이지에 따라 출력이 달라지기 쉽습니다. _config.yml 파일을 가리키는 사이트를 포함하여 페이지보다 더 많은 변수가 있습니다. 더 궁금하시다면 Jekyll Variables 페이지를 확인하세요. 향후 수업에서 _config.yml에 대해 더 다룰 것입니다.

무엇 향후 계획?

레이아웃은 사이트를 보다 깔끔하고 관리하기 쉽게 만드는 데 유용합니다. 그러나 Jekyll은 여전히 ​​더 많은 것을 제공합니다. include를 사용하여 페이지의 더 작은 부분을 재사용하는 방법을 살펴보겠습니다.