インクルード

include タグを使用すると、_includes フォルダーに保存されている別のファイルの内容を含めることができます。

{% include footer.html %}

Jekyllは、参照されているファイル（この場合は footer.html）をソースディレクトリのルートにある _includes ディレクトリで探し、その内容を挿入します。

別のファイルを基準としたファイルのインクルード

include_relative タグを使用すると、現在のファイルを基準としたファイルフラグメントを含めることができます。

{% include_relative somedir/footer.html %}

インクルードするコンテンツを _includes ディレクトリ内に配置する必要はありません。代わりに、インクルードはタグが使用されているファイルを基準とします。たとえば、_posts/2014-09-03-my-file.markdown が include_relative タグを使用する場合、インクルードされるファイルは _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 ディレクトリから 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 note.html content="This is my sample note." %}

content の値（This is my sample note）は、{{ include.content }} パラメータに挿入されます。

インクルードにパラメータを渡すことは、Markdownコンテンツから複雑な書式設定を隠したい場合に特に役立ちます。

たとえば、複雑な書式設定の特殊な画像構文があり、作成者に複雑な書式設定を覚えてほしくない場合などです。そのため、パラメータ付きのインクルードを使用して書式設定を簡略化することにします。インクルードで設定する特殊な画像構文の例を次に示します。

<figure>
   <a href="https://jekyll.dokyumento.jp">
   <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="https://jekyll.dokyumento.jp"
max-width="200px" file="logo.png" alt="Jekyll logo"
caption="This is the Jekyll logo." %}

結果は、前に示した元のHTMLコードです。

ユーザーがパラメータの値を指定しない場合に備えて、Liquidのdefaultフィルターを使用できます。

全体として、オーディオクリップやビデオクリップ、アラート、特殊な書式設定などを挿入するなど、さまざまな用途のテンプレートとして機能するインクルードを作成できます。インクルードを多数使用すると、サイトのビルド時間が遅くなるため、使用しすぎないようにしてください。たとえば、画像を挿入するたびにインクルードを使用しないでください。（上記のテクニックは、特殊な画像のユースケースを示しています。）

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

インクルードに渡すパラメータが文字列ではなく変数であるとします。たとえば、実際にハードコードされた名前ではなく、{{ site.product_name }} を使用して製品のすべてのインスタンスを参照している場合があります。（この場合、_config.yml ファイルには、product_name というキーと製品名の値が含まれます。）

インクルードパラメータに渡す文字列には、中かっこを含めることはできません。たとえば、次のようなパラメータを渡すことはできません："{{ site.product_name }} の最新バージョンが利用可能になりました。"

インクルードに渡すパラメータにこの変数を含める場合は、インクルードに渡す前にパラメータ全体を変数として格納する必要があります。capture タグを使用して変数を作成できます。

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

次に、このキャプチャされた変数をインクルードのパラメータに渡します。パラメータの内容の前後にある引用符は省略します。これは、もはや文字列ではなく変数であるためです。

{% include note.html content=download_note %}