Twig reference

zid theme uses Twig template engine under the hood, checkout its full documentation to get started building zid themes.

Syntax

Like other template engines, Twig has two main ways interacts with variables and injected data. The first one is used to denote an output from a variable by using a double curly braces {{ }}. Whereas the curly brace with percentage {% %}, is used to construct the logic and control flow.

Tags

In twig, most tags including if-else, loops, and blocks need to be declared inside start & end tags. There are other tags which use single tag, such as extends tag and include function.

{% starg_tag %} 
    code block
{% end_tag %}

The extends tag is used to extend another twig file to use as a layout or base code. Adding on, the content block defined in home.twig will replace the content block declared in layout.twig

Available tags:

Zid allows only 6 Twig tags:

  • extends

  • block

  • include

  • for-loop

  • if-else

  • set

Extends and block tags

The powerful part of Twig is template inheritance, whcich allows you to define a base code that containts all you website elements, and allows you as well to define blocks that can be overridden from child templates

home.twig
{% extends "layout.twig" %}

{% block content %}
    <h1>
        This content will replace the content 
        block in layout.twig
    </h1>
{% endblock %}

Here in layout.twig, we can see there are couple of blocks defined that will be replaced in the extended file from the child file. For example, the block content in layout.twig line 20 will be replaced with the block content from home.twig. And the same inheritance applied to all other block, if any declared.

layout.twig
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{% block title %}{% endblock %} | osama</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    {% block head %} {% endblock %}

</head>

<body>

    <div class="app">
        {% block header %}{% endblock %}
        {% block content %}{% endblock %}
        {% block footer %}{% endblock %}
    </div>

    {{ zidapi_script|raw }}
    <script type="text/javascript" src="{{ asset_url ~ 'main.js' }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

Include

include function is used to include a content of a file inside a block tag. Think of include function as a copy-paste operation, you copy the content of file foo into bar file

bar.twig
{% block header %} 
		{{ include('foo.twig') }} 
{% endblock %}

For-loops

Note products array here is passed from the server (See data section for more information on data)

{% for product in products %}
		<div class="card shadow">
				<a href="/products/{{ product.id }}"></a>
	  </div>
{% endfor %}

If-else

if ,elseif, else , endif are used to assign values to variables, which are declared between the double curly brackets: {{ }}

// example 1
{% if customer %}
		<div>
				{{ customer.name }}
		</div>
{% endif %}

// example 2
{% if product.stock > 10 %}
   Available
{% elseif product.stock > 0 %}
   Only {{ product.stock }} left!
{% else %}
   Sold-out!
{% endif %}

Set

set as a start tag is used inside blocks to assign values to variables

{% set foo = 'bar' %}
{{ foo }} /* foo will be 'bar' */

Available filters:

Zid allows only 3 Twig filters:

['escape','length', 'raw']

Available functions:

Zid allows only 2 Twig functions:

['range', 'include']

Twig resources

For more examples and in-depth documentation, visit Twig docs page:

LogoTwig for Template Designers - Documentation - Twig - The flexible, fast, and secure PHP template engine

PreviousGetting startedNextTheme file structure

Last updated

Was this helpful?