Twig Syntax and Features

In this section of the Zid Themes Documentation, we delve into the heart of theme customization: the Twig template engine. Twig offers a powerful and flexible syntax for embedding logic and data into your theme's design. This guide will walk you through the essential syntax, tags, functions, and filters you'll need to create dynamic themes.

Understanding the Basics of Twig

Twig simplifies the infusion of data into templates using two primary syntax forms:

{{ ... }}: This notation is used to display the content of variables.

{% ... %}: This structure is employed to execute logic-based operations such as conditions and loops.

Essential Twig Tags

Zid supports a subset of Twig's tags to maintain simplicity and performance. Below are the tags available for use in your themes:

extends

block

include

for

if, elseif, else

set

Extending Templates with `extends` and `block`

Twig's template inheritance feature is instrumental in building a base layout, which can then be extended by child templates for customization. Here's an illustrative example of how to use the extends and block tags within a Zid theme:

In this example, the content block in home.twig will replace the corresponding content block within layout.twig. This pattern of inheritance ensures that you can maintain consistent design elements across different pages while customizing content as needed.

Remember that you can also include additional scripts or API calls like zidapi_script within your templates to enhance functionality or track analytics.

Now here is an example of a base layout file in Twig, layout.twig, and how it is structured:

This base layout can then be extended by child templates, which can override specific blocks such as title, content, and footer.

Including Sub-templates with `include`

The include tag allows you to incorporate other templates into the current one, similar to a 'copy-paste' action:

Conditional Logic with `if`, `elseif`, `else` and `endif`

Twig's if statement allows you to conditionally display content. It can be combined with elseif and else for more complex conditions:

Variable Assignment with `set`

Define or modify variables within your templates using the set tag:

Twig Filters

Filters in Twig modify the content of variables before they are used. Zid supports the following filters:

escape: Ensures the output is safe to render by escaping HTML characters.

length: Returns the number of items in a sequence or characters in a string.

raw: Outputs raw, unescaped data.

Twig Functions

Functions perform complex operations on variables. Zid provides these functions for your templates:

range: Generates a sequence of numbers.

include: Incorporates other templates.

For a comprehensive understanding and in-depth technical details of Twig, explore official Twig 3.x documentation.

Twig Syntax and Features

Understanding the Basics of Twig#

Essential Twig Tags#

Extending Templates with extends and block#

Including Sub-templates with include#

Conditional Logic with if, elseif, else and endif#

Variable Assignment with set#

Twig Filters#

Twig Functions#