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>
{% 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:
This is equivalent to rendering the component for each element in a loop.<div> <h1>{{ colorbox.title }}</h1> </div>
{% for element in elements %} {% include "colorbox" with element }} {% endfor %}