Components

Component is a piece of template code that can be included in another template. It is useful for reducing duplicate code in your templates. To add new component, go to design management screen and you'll see add button for new component.

Components are most commonly used to generate HTML document's HEAD-section, site navigation menu or site header and footer.

Component has access to the same variables and objects that are available in template which is including the component.

Example

Create a component named "Header" with the following content

<h1>My site header</h1>

And let's include it from page template

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

The resulting output is

<html>
<body>
  <h1>My site header</h1>
</body>
</html>

Variable scoping

As stated above, component has access to all variables and objects that are in scope of template. Let's look at more interesting example where outer template loops through the list of latest articles on site and component renders header and excerpt for article:

<html>
<body>
{% for article in site.latest_articles %}
  {% include "Article" %}
{% endfor %}
</body>
</html>

Let the component named "Article" contain the following:

<h2>{{ article.title }}</h2>
<p>{{ article.excerpt }}</p>

Rendering the template will result something like this:

<html>
<body>
  <h2>First article</h2>
  <p>Excerpt for first article</p>
  <h2>Second article</h2>
  <p>Excerpt for the second article</p>
</body>
</html>