Basic syntax

Twig is a "template engine" the template contains variables and functions which get replaced when the template is evaluated it also uses tags to manage the template logic. In other words, Twig helps buliding interactive interfaces with feasible connections to the underlying programming. It's meant to be used with a js class that sends the variables to be displayed on an HTML page, and the HTML just displays the data.

A thing to know!

Twilight uses Twig as its "template engine"

📙 What you'll learn

In this article, you will learn the basic syntax of Twig.

Delimiters

Twig defines three kinds of delimiters:

{{ ... }} prints the result of an expression evaluation.

{% ... %} to execute statements, such as for-loops.

{# ... #} to add comments in the templates. These comments aren't included on the rendered page.

Basic Twig Template

Twig Basic Tags

Tags tell Twig what it needs to do. It allows setting which code Twig should handle and which code it should ignore during evaluation.

There are several different kinds of tags, and each has its own specific syntax that sets them apart. These are the tags to be used:

Basic Tags	Description
set	Assigns values to variables.
extends & blocks	Sets the base code for the site and defines the blocks that inherit from child blocks.
blocks	Used for inheritance and act as placeholders and replacements at the same time
include	Used to include a file's content inside a block tag.
for-loop	Used to loop over multiple items in an array using the `for` tag.
if-else	Executes the code if the expression in place is `true` and assigns fallback conditions if it's `false` .

set

As an initial point, set tags are used to assign values to variables within blocks:

extends & blocks

Template inheritance is one of twigs perks. It allows setting a base code that contains all the elements for your website and defining blocks that inheritance can override from child templates.

Let's define a base template, master.twig, which defines an HTML skeleton document that might be used for a two-column page:

In this example, the block tags define blocks that child templates can fill in. All the block tag tells the template engine that a child template may override those portions of the template.

A child template might look like this:

blocks

block is used for inheritance and acts as placeholders and replacements at the same time.

The block function allowes to print a block mutiple times in templates that uses inheritance.

The defines test cheks if a block exists in the context of the current template:

The block function can also be used to display one block from another template:

include

include is used to include a file's content inside a block tag.

for-loop

for-loop is used to loop through multiple items of array or hash and produces results based on the expression.

For example, the below code loops through products array using for-loop which is passed from the server. Then prints out the products id.

if-else

Executes the code if the expression in place is true and assigns fallback conditions if it's false.

Filters

Twig filters allow you to apply functionality to the variable on the left side of the pipe (|) symbol. They are handy when dealing with manipulating text or variables.
The first argument to the filter is always the item on the left, but subsequent arguments can be passed in parentheses. Filters have some special capabilities, including being environmentally aware.

Examples of built-in Twig filters include raw, length, date, split, join, lower, slice, and many more.

Examples:

The raw filter marks the value as being "safe", which means that in an environment with automatic escaping enabled this variable will not be escaped if raw is the last filter applied to it:

The length filter returns the number of items of a sequence or mapping, or the length of a string.

The date filter formats a date to a given format:

The split filter splits a string by the given delimiter and returns a list of strings:

Functions

Twig functions are another way to implement functionality in Twig. They are similar to filters; however, rather than acting on a variable via the pipe (|) symbol, you would call these functions directly and pass in any attributes they support between the parentheses after the function name.

Examples of built-in Twig filters include block, dump, parent, random, range, and more.

Examples:

The random filter returns a random value.
in the example below it returns a random number

The range filter returns a list containing an arithmetic progression of integers:

You are now prepared to use the tags commonly used by twig to build your theme.

📙 What you'll learn#

Delimiters#

Basic Twig Template#

Twig Basic Tags#

set#

extends & blocks#

blocks#

include#

for-loop#

if-else#

Filters#

Functions#

📙 What you'll learn

Delimiters

Basic Twig Template

Twig Basic Tags

set

extends & blocks

blocks

include

for-loop

if-else

Filters

Functions