# 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="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://themes.zid.dev/twig-reference.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.