include

Include component into template or another component.

Code for component called "header":

<h1>Hello world!</h1>

Template code:

<html>
  <body>
    {% include "header" %}
  </body>
</html>

Parse result:

<html>
  <body>
    <h1>Hello world!</h1>
  </body>
</html>

The include tag also takes optional local variables as parameters:

{% include "mycomponent" local1: "foo", local2: "bar", lang: page.language_code %}

Now, inside the "mycomponent" component, the variables local1 and local2 have the values "foo" and "bar", respectively. The variable lang, however, holds the current language code value.

Another way to pass data to a component is to use the with keyword. Inside the component the retrieved variable name is the name of component.

Component "colorbox" code:

<div style="color: {{colorbox}};">
    This box is {{colorbox}}
</div>

In template:

{% include "colorbox" with "red" %}

Include can be directly bound to an array iterating an include for every element in array

{% assign colours = "red,green,blue" | split: "," %}
{% include "colorbox" for colours %}

Include can also be used to render a collection of elements:

{% include "colorbox" for elements %}

Now, the "colorbox" variable points to the current element and can be used to access the element's attributes:

<div>
    <h1>{{ colorbox.title }}</h1>
</div>

This is equivalent to rendering the component for each element in a loop.

{% for element in elements %}
    {% include "colorbox" with element }}
{% endfor %}

Developers

include