> For the complete documentation index, see [llms.txt](https://themes.zid.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themes.zid.dev/twig-reference.md).
# Twig reference
zid theme uses [Twig template engine](https://twig.symfony.com/doc/3.x/templates.html) 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.
```javascript
{% 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
{% code title="home.twig" %}
```javascript
{% extends "layout.twig" %}
{% block content %}
This content will replace the content
block in layout.twig
{% endblock %}
```
{% endcode %}
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.
{% code title="layout.twig" %}
```javascript
{% block title %}{% endblock %} | osama
{% block head %} {% endblock %}
{{ zidapi_script|raw }}
```
{% endcode %}
### 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
{% code title="bar.twig" %}
```javascript
{% block header %}
{{ include('foo.twig') }}
{% endblock %}
```
{% endcode %}
### For-loops
Note products array here is passed from the server [(See data section for more information on data)](/data-reference.md)
```javascript
{% for product in products %}
{% endfor %}
```
### If-else
`if` ,`elseif`, `else` , `endif` are used to assign values to variables, which are declared between the double curly brackets: `{{ }}`
```javascript
// example 1
{% if customer %}
{{ customer.name }}
{% 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
```javascript
{% set foo = 'bar' %}
{{ foo }} /* foo will be 'bar' */
```
## Available filters:
Zid allows only 3 Twig filters:
```javascript
['escape','length', 'raw']
```
## Available functions:
Zid allows only 2 Twig functions:
```javascript
['range', 'include']
```
## Twig resources
For more examples and in-depth documentation, visit [Twig](https://twig.symfony.com/doc/3.x/templates.html) docs page:
{% embed url="" %}