Includes（インクルード）

includeタグは、_includesフォルダの他のファイルを入れ込む事を可能にします。

{% include footer.html %}

Jekyllはソースディレクトリのrootにある_includesディレクトリのファイル（この場合はfooter.html）を探し、コンテンツに挿入します。

相対的な他のファイルをインクルードする

include_relativeタグを使用することで、現在のファイルから相対的な位置のファイルを挿入することもできます。

{% include_relative somedir/footer.html %}

_includesディレクトリに挿入するコンテンツを置いておく必要はありません。タグを使用するファイルから、挿入したいファイルを相対パスで指定します。例えば、_posts/2014-09-03-my-file.markdownでinclude_relativeを使用すると、_postsディレクトリのファイルやそのサブディレクトリのファイルを挿入できます。

../は使用できませんので、上位のディレクトリのファイルは挿入できないことに注意してください。

includeタグの変数など全ての機能は、include_relativeでも使用できます。

インクルードファイルを変数で指定する

埋め込むファイルの名前は、実際のファイル名の代わりに変数として指定できます。例えば、ページのfront matterに次のように変数を定義したとします。

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

そうすれば、その変数をincludeで参照できます。

{% 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 }}に挿入されます。

インクルードにパラメータを渡すのは、Markdownコンテンツから複雑な部分を隠したいときに役立ちます。

例えば、画像を特別なフォーマットで使用しようと思っていて、著者にこの複雑なフォーマットを覚えさせたくない場合です。一つの方法として、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

このinclude（ファイル名は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’s default filterを使用できます。

全体として、オーディオクリップやビデオクリップの挿入、アラート、特別なフォーマットなど、さまざまな用途のテンプレートとして機能するインクルードを作成できます。あまりにも多くのインクルードを使うことは避けるようにしてください。サイトの構築時間が遅くなります。例えば、画像を挿入する度にインクルードを使うのは避けるべきです。（上記のテクニックは特別な画像のための例です。）

インクルードにパラメータ変数を渡す

インクルードに渡したいパラメータが、文字列ではなく変数である場合もあるでしょう。例えば実際の製品の名前ではなく、{{ 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 %}

captureした変数をインクルードのパラメータとして渡します。文字列ではなくなったので、変数名を引用符で囲まないでください。

{% include note.html content=download_note %}