단계별 튜토리얼

5. 조각파일

사이트가 점점 그럴싸해지고 있습니다; 하지만, 페이지 사이의 네비게이션이 없네요. 고쳐봅시다.

네비게이션은 모든 페이지에 있어야 하므로 레이아웃에 추가하는 것이 올바른 방법입니다. 레이아웃에 직접 추가하는 대신, 이 기회를 이용해 조각파일에 대하여 배워보도록 합니다.

Include 태그

include 태그를 사용하면 _includes 폴더에 저장된 조각파일의 내용을 포함시킬 수 있습니다. 조각파일은 사이트 여러곳에 반복되는 코드를 한 곳에서 관리하거나 사이트 소스코드의 가독성을 향상시키는데에 유용합니다.

네비게이션을 구현하는 소스코드는 복잡한 경우가 많아 조각파일로 보관하는 것이 좋습니다.

조각파일 사용법

네비게이션을 위한 파일을 _includes/navigation.html 에 생성하고 다음 내용을 저장합니다:

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

include 태그를 사용해서 _layouts/default.html 에 네비게이션을 추가합니다:

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

브라우저에서 http://localhost:4000 를 열어 페이지 사이를 이동해봅니다.

현재 페이지 표시하기

좀 더 깊게 파고들어서 네비게이션에 현재 페이지를 표시하는 방법을 알아봅시다.

스타일을 추가하려면 _includes/navigation.html 은 자신이 삽입된 페이지의 URL 을 알 필요가 있습니다. Jekyll 에서 사용할 수 있는 유용한 변수들page.url 이라는 변수가 있습니다.

page.url 을 사용해서 각 링크가 현재 페이지인지 확인하고 만약 그렇다면 빨간색으로 표시합니다:

<nav>
  <a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
    Home
  </a>
  <a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
    About
  </a>
</nav>

브라우저에서 http://localhost:4000 을 열어 현재 페이지 링크가 빨간색인지 확인합니다.

네비게이션에 새 페이지를 추가하거나 색을 변경하고자 하는 경우 여전히 중복된 코드가 많이 발생합니다. 다음 단계에서 이에 대해 다뤄보겠습니다.

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