단계별 튜토리얼

4. 레이아웃

웹사이트는 보통 하나 이상의 페이지를 가지고 있으며 이 웹사이트 또한 마찬가지입니다.

Jekyll 은 HTML 뿐만 아니라 마크다운도 지원합니다. 마크다운은 순수 HTML 보다 간략하여, 컨텐츠 구조가 단순한 페이지에 (예시, 문단, 제목, 이미지만 있는 문서) 탁월한 선택입니다. 다음 장에서 직접 해보기로 합니다.

루트 디렉토리에 about.md 를 생성합니다.

구조를 통일하기 위해 index.html 을 복사하고 수정해서 about 페이지로 만들수도 있을 것입니다. 하지만 문제는 코드가 중복된다는 것입니다. 사이트에 스타일시트를 추가하는 상황을 가정해보면, 모든 페이지를 열어 <head> 에 스타일시트를 추가해야할 것입니다. 2 페이지짜리 사이트에서는 문제될 것이 없지만, 100 페이지에 이 작업을 한다고 생각해보세요. 아주 작은 변경사항에도 시간이 많이 걸릴것입니다.

레이아웃 생성하기

레이아웃을 사용하는게 훨씬 더 나은 선택입니다. 레이아웃은 당신의 컨텐츠를 포장하는 템플릿입니다. _layouts 라는 디렉토리에 보관합니다.

다음과 같은 내용으로 _layouts/default.html 에 당신의 첫 번째 레이아웃을 생성합니다:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

내용이 index.html 과 거의 똑같다는 것을 눈치챌 수 있겠지만, 머리말이 없고 페이지의 컨텐츠 부분에 변수 content 가 사용되었다는 차이점이 있습니다. content 라는 이 특별한 변수는 자신이 호출된 페이지의 컨텐츠를 렌더링 한 내용을 담고 있습니다.

index.html 에 이 레이아웃을 사용하기 위해, layout 변수를 머리말에 설정합니다.

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

이렇게 하면, 출력 결과는 이전과 완벽하게 동일할 것입니다. 기억할 것은 레이아웃으로부터 페이지(page)의 머리말에 접근한다는 것입니다. 위 예시에서, title 은 인덱스 페이지의 머리말에 설정되었지만 레이아웃에서 출력되었습니다.

페이지에 관하여

about 페이지로 돌아와서, index.html 을 복사하는 대신 레이아웃을 사용할 수 있습니다.

다음 내용을 about.md 에 추가합니다:

---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

브라우저에서 http://localhost:4000/about.html 를 열어 새 페이지를 확인합니다.

축하합니다. 이제 두 페이지짜리 웹사이트가 생겼네요! 그런데 페이지간의 이동은 어떻게 하죠? 계속해서 알아봅시다.

  1. 셋업
  2. Liquid
  3. 머리말
  4. 레이아웃
  5. 조각파일
  6. 데이터
  7. 에셋
  8. Blogging
  9. Collections
  10. Deployment