조각파일

include 태그를 사용하면 _includes 폴더에 저장된 다른 파일의 내용을 포함시킬 수 있습니다:

{% include footer.html %}

Jekyll 은 Site Source 최상위 디렉토리의 _includes 디렉토리에서 참조된 파일 (여기서는, footer.html) 을 찾아 그 내용을 삽입합니다.

상대경로로 파일 삽입하기

include_relative 태그를 사용하면 현재 파일로부터의 상대경로로 삽입할 조각파일을 선택할 수 있습니다:

{% include_relative somedir/footer.html %}

조각파일을 _includes 디렉토리에 보관할 필요가 없습니다. 그 대신, 태그가 사용된 파일이 있는 위치로부터의 상대경로로 삽입할 파일을 선택합니다. 예를 들어, include_relative 태그를 사용한 위치가 _posts/2014-09-03-my-file.markdown 이라면, 조각파일은 _posts 디렉토리 혹은 그 하위 디렉토리 안에 있어야 합니다.

조각파일의 위치를 지정할 때 상위 디렉토리를 가리키는 ../ 문법은 사용할 수 없다는 점을 알아두세요.

예를 들면, 변수 같은 include 태그의 다른 모든 기능을 include_relative 태그에서도 사용할 수 있습니다.

조각파일에 대해 변수 사용하기

끼워넣고자 하는 파일은 실제 파일이름이 아닌 변수를 사용해서 지정할 수도 있습니다. 예를들어 페이지의 머리말에 다음과 같은 변수를 정의했다고 가정해봅시다:

---
title: My page
my_variable: footer_company_a.html
---

그 다음엔 태그에 이 변수를 사용할 수 있습니다:

{% if page.my_variable %}
  {% include {{ page.my_variable }} %}
{% endif %}

이 예제에서는, _includes 디렉토리의 footer_company_a.html 파일이 삽입될 것입니다.

조각파일에 파라메터 사용하기

태그에 파라메터도 사용할 수 있습니다. 예를 들어, _includes 폴더에 다음과 같은 내용을 가진 note.html 파일을 가지고 있다고 가정해봅시다:

<div markdown="span" class="alert alert-info" role="alert">
<i class="fa fa-info-circle"></i> <b>Note:</b>
{{ include.content }}
</div>

{{ include.content }} 는 파라메터로서 다음과 같이 include 태그를 파라메터 대한 값과 함께 호출하면 그 값이 입력됩니다.

{% include note.html content="This is my sample note." %}

content 의 값 (여기서는 This is my sample note) 이 {{ include.content }} 파라메터에 삽입될 것입니다.

이렇게 include 태그에 파라메터를 사용하는 기법은 특히 마크다운에서 복잡한 형태의 내용을 숨기는데에 도움이 됩니다.

예를 들어, 당신이 사용중인 이미지 삽입 코드가 다음과 같이 복잡한 형태이고, 포스트 작성자들이 이 코드를 외울 필요가 없게 만들고 싶다고 가정해봅시다. 결과적으로, 당신은 include 태그와 파라메터를 사용해서 코드를 단순하게 만들 것입니다. 여기 include 태그와 파라메터를 활용하기 좋은 이미지 삽입 코드 예제가 있습니다:

<figure>
   <a href="http://jekyllrb.com">
   <img src="logo.png" style="max-width: 200px;"
      alt="Jekyll logo" />
   </a>
   <figcaption>This is the Jekyll logo</figcaption>
</figure>

이 코드는 각각의 값들에 파라메터를 사용하는 조각파일로 템플릿처럼 만들 수 있습니다, 이렇게요:

<figure>
   <a href="{{ include.url }}">
   <img src="{{ include.file }}" style="max-width: {{ include.max-width }};"
      alt="{{ include.alt }}"/>
   </a>
   <figcaption>{{ include.caption }}</figcaption>
</figure>

여기에는 5 개의 파라메터가 있습니다:

url
max-width
file
alt
caption

파라메터와 함께 이 조각파일을 사용하는 예제가 여기 있습니다 (조각파일의 이름은 image.html 입니다):

{% include image.html url="http://jekyllrb.com"
max-width="200px" file="logo.png" alt="Jekyll logo"
caption="This is the Jekyll logo." %}

그 결과는 위의 HTML 코드와 동일합니다.

사용자가 파라메터를 사용하지 않았을 때를 대비한 안전장치로서, Liquid 디폴트 필터를 사용할 수 있습니다.

정리하자면, 템플릿같은 역할을 하는 조각파일을 만들어 다양한 방식으로 사용할 수 있습니다 — 음성이나 영상, 경고문구, 특별한 코드 등의 삽입. 조각파일을 너무 많이 사용하는 것은, 사이트의 빌드 시간을 느리게 만드므로, 가급적 피해야 합니다. 예를 들어, 이미지를 삽입할 때마다 매번 조각파일을 사용하는 것은 좋지 않습니다. (위의 예시는 특별취급해야하는 일부 이미지에 사용할만한 기법입니다.)

조각파일에 변수 파라메터 사용하기

조각파일의 파라메터에 문자열이 아닌 변수를 전달하려는 경우를 가정해봅시다. 예를 들어, 당신의 제품을 언급하는 모든 부분에 직접 제품이름을 입력하는 대신 {{ site.product_name }} 을 사용할 수 있습니다. (이 경우, 당신의 _config.yml 파일에는 product_name 라는 키가 있고 그 값은 제품이름이어야 합니다.)

조각파일 파라메터에는 중괄호를 사용할 수 없습니다. 예를 들어, 파라메터에는 다음과 같은 내용을 넣을 수 없습니다: "The latest version of {{ site.product_name }} is now available."

조각파일의 파라메터에 변수를 사용하려면, 조각파일을 사용하기 전에 먼저 파라메터를 변수로 저장해야 합니다. capture 태그를 사용해서 변수를 생성할 수 있습니다:

{% capture download_note %}
The latest version of {{ site.product_name }} is now available.
{% endcapture %}

이제 캡쳐한 변수를 조각파일의 파라메터로 전달합니다. 따옴표는 쓰지 마세요. 이 파라메터는 더 이상 문자열이 아니니까요 (변수입니다):

{% include note.html content=download_note %}