016. JeKyll 컨텐츠 - (9) 데이터 파일

컨텐츠 - (9) 데이터 파일

본 카테고리는 정적 블로그 생성도구인 Jekyll에 관하여 작성하는 곳이다.

공식 사이트의 내용을 좀 더 풀어쓰고 스크린샷을 첨부하여 좀 더 상세히 기록하고자 한다.

참고 Jekyll 공식 사이트

데이터 파일

Jekyll에서 제공하는 기본 변수 외에 Liquid의 템플릿 시스템을 이용해 접근할 수 있는 데이터들이 있다.

이는 Jekyll이 제공하는 변수가 아니라 사용자가 직접 데이터를 정의하는 경우를 말한다.

다시 말하면, Jekyll 기본 변수외에도 사용자 정의 데이터를 지정할 수 있다는 뜻이다.

Jekyll은 _data 디렉토리에 있는 YAML, JSON, CSV 파일의 데이터를 불러올 수 있다.

단 CSV파일에는 반드시 헤더 행이 존재해야 한다.

이 기능을 이용하면 _config.yml 파일의 변경없이 특정 템플릿에 반복 입력하는 작업을 피하고 사이트 별 옵션을 설정할 수 있다.

추후 포스팅할 플러그인이나 테마에서도 데이터 파일을 사용하여 변수를 설정할 수 있다.

참고 Jekyll 플러그인 페이지

참고 Jekyll 테마 페이지

데이터 폴더

디렉토리 구조 포스팅에서 언급했듯 Jekyll이 사이트를 생성할 때 사용할 추가 데이터를 _data 폴더에 저장한다.

이 데이터들은 .yml, .yaml, .json, .csv의 확장자를 사용해야 하며 site.data를 통해 접근할 수 있다.

이제부터 데이터 파일을 사용하는 방법을 3개의 예제를 통해 확인해보자.

예제 : 멤버 목록

이번 예제는 데이터 파일을 사용하여 특정 코드를 반복해서 작성하지 않고 활용하는 방법을 알아본다.

_data디렉토리에 멤버들의 정보가 있다고 가정할 때 이 정보들을 불러와 출력하는 방식이다.

_data/members.yml인 경우

- name: Eric Mill
  github: konklone

- name: Parker Moore
  github: parkr

- name: Liu Fengyun
  github: liufengyun

_data/members.csv인 경우

name,github
Eric Mill,konklone
Parker Moore,parkr
Liu Fengyun,liufengyun

위의 데이터들은 site.data.members를 통해 접근할 수 있다.

여기서 우리는 데이터 파일의 이름이 변수명을 결정한다는 것도 알 수 있다.

위의 데이터를 렌더링할 때는 아래와 같이 작성한다.

<ul>
{% for member in site.data.members %}
  <li>
    <a href="https://github.com/{{ member.github }}">
      {{ member.name }}
    </a>
  </li>
{% endfor %}
</ul>

참고 Jekyll로 만드는 웹 사이트에 많은 페이지가 있는 경우
Jekyll내에 강력한 탐색 기능을 구성하는 방법 Jekyll Navigation

예제 : 조직들

데이터 파일은 _data 디렉토리 뿐만 아니라 _data의 하위 폴더에도 배치할 수 있다.

각 폴더의 구조에 따라 변수의 네임스페이스에 추가되는 방식으로 접근한다.

이번 예제는 Github 조직이 orgs 폴더 아래에 배치된 데이터 파일에서 어떻게 분리되고 정의할 수 있는지 소개한다.

_data/orgs/jekyll.yml인 경우

username: jekyll
name: Jekyll
members:
  - name: Tom Preston-Werner
    github: mojombo

  - name: Parker Moore
    github: parkr

_data/orgs/doeorg.yml인 경우

username: doeorg
name: Doe Org
members:
  - name: John Doe
    github: jdoe

위의 데이터들은 site.data.orgs를 통해 접근할 수 있다.

위의 데이터를 렌더링할 때는 아래와 같이 작성한다.

<ul>
{% for org_hash in site.data.orgs %}
{% assign org = org_hash[1] %}
  <li>
    <a href="https://github.com/{{ org.username }}">
      {{ org.name }}
    </a>
    ({{ org.members | size }} members)
  </li>
{% endfor %}
</ul>

예제 : 특정 작성자 접근

페이지나 포스트에서도 특정 데이터 파일에 접근할 수 있다.

이번 예제는 특정 데이터에 접근하는 방법을 소개한다.

_data/people.yml인 경우

dave:
    name: David Smith
    twitter: DavidSilvaSmith

포스트의 저자는 아래와 같이 해당 포스트의 YAML 머리말에서 변수로 저장할 수 있다.

---
title: sample post
author: dave
---

포스트 전체의 코드를 보면 아래와 같이 사용할 수 있다.

---
title: sample post
author: dave
---
{% assign author = site.data.people[page.author] %}
<a rel="author"
  href="https://twitter.com/{{ author.twitter }}"
  title="{{ author.name }}">
    {{ author.name }}
</a>