Twig Tags

Overview

Twig tags are control structures that control the flow of the templates. They consist of conditionals (i.e. if/elseif/else), for loops, as well as blocks. Tags appear inside a pair of {% %} blocks. The closing {% %} block is "end" followed by the tag name.

As an example, to loop through an array of values you would use the for tag.

<h1>Blog Posts</h1>
{% for post in posts %}
    <p><a href="{{ post.url }}">{{ post.postTitle }}</a></p>
{% endfor %}

You could also use the if tag to test an expression.

{% if posts|length > 1000 %}
    <p>You have a lot of posts</p>
{% endif %}

bodyEndCode

Sets some code to be outputted before the closing </body> tag.

{% bodyEndCode %}
     <script>
       const stuff = 'Some code here';
     </script>
{% endBodyEndCode %}

View details

bodyStartCode

Sets some code to be outputted before the opening <body> tag.

{% bodyStartCode %}
     <script>
       const stuff = 'Some code here';
     </script>
{% endBodyStartode %}

View details

for

Loops over items in a sequence (array or hash).

{% for post in posts %}
    <h2>{{ post.postTitle }}</h2>
{% endfor %}

View details

if

Used to test and see if an expression evaluates to a desired value.

{% if test %}
{% endif %}

View details

ifcontent

Allows you to test and see if a content area has content and if so output it along with any other HTML code necessary or output some fallback content.

{% ifcontent 'contentAreaName' %}
     <div class="Content">{{ content }}</div>
{% else %}
     <div class="ContentAlt">Some alternate content here</div>
{% endifcontent %}

View details

import

Used to import macros into a template.

{% import 'macros/forms' as forms %}

View details

include

The include tag will include another template within your theme folder and returns the rendered content from that template file into the current template and namespace.

It's best to use it as a function because future versions of the Twig templating engine will require it to be a function instead of a tag.

{% include('snippets/header') %}

View details

macro

Macros are similar to functions within regular programing languages. They are often used to output reusable HTML code.

{% macro specialHeading(text) %}
   <h2 class="specialHeading">{{ text }}</h2>
{% endmacro %}

{% import '_self' as headings %}

{{ headings.specialHeading('Hey there!') %}

View details

switch

Allows you to compare a variable with different values and execute some code or output content depending on what the value is.

The switch statement is an alternate option to using if/elseif/else statements.

{% set value = 'value2' %}
{% switch value %}
    {% case 'value1' %}
        <p>value is "value1"</p>
    {% case 'value2' %}
        <p>value is "value2"</p>
    {% case 'value3' %}
    {% case 'value4' %}
        <p>value is "value3" or "value4"</p>
    {% default %}
        <p>value is something else</p>
{% endswitch %}

View details