Voog.com

include

Include component into template or another component.

Code for component called "header":

Example
Copy
<h1>Hello world!</h1>

Template code:

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

Parse result:

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

The include tag also takes optional local variables as parameters:

Example
Copy
{% 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:

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

In template:

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

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

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

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

Example
Copy
{% include "colorbox" for elements %}

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

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

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

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