6.4. Twig is a new template engine for Drupal.

If you open Stable theme page.html.twig template file:

/core/themes/stable/templates/layout/page.html.twig

Then you will find that it differs from the Drupal 7 page.tpl.php template, firstly, by the extension and secondly, by the abundance of curly braces {}. This is all because Drupal uses the Twig template engine.

<main role="main">
    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
    <div class="layout-content">
      {{ page.content }}
    </div>{# /.layout-content #}
 
    {% if page.sidebar_first %}
      <aside class="layout-sidebar-first" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}
 
    {% if page.sidebar_second %}
      <aside class="layout-sidebar-second" role="complementary">
        {{ page.sidebar_second }}
      </aside>
    {% endif %}
 
  </main>

PHP cannot be used in the twig template, so you only need to use Twig tools, and they are enough to style the site.

Let's figure out how to work with Twig.

Variables in Twig

If in PHP we use the dollar sign $ for variables, then in twig we use curly braces:

{{variable}}

Thus, we write the variables two opening braces, space, variable name, space, two closing brackets. In order to output a variable, you do not need to add the print function in front of the twig variable, we do not use PHP at all in twig templates; to output a variable, you just need to specify it in double curly brackets.

It is also convenient to work with variable objects and arrays, if earlier you needed to know that $ node is an object, and $ form is an array, now everything is simpler, we refer to the properties of variables through a dot:

{{node.id}}

We can easily create variables:

{% set foo="bar" %}
 
Hi, here's my variable: {{ foo }}

Note the syntax that when we set a variable, we use a percent sign bracket, and when we display a variable, we use double brackets.

We can specify not only strings, but also arrays:

{%
  set foo_array = [
    'foo',
    'bar',
  ]
%}

Twig Filters

Although twig is not a full-fledged programming language, it has a set of tools for working with data. Probably the most important such tool are filters. Filters are specified using pipe |

{{ variable|filter }}

Filters allow you to change the output of variables, for example:

{{node.title | length}} - prints a string length number

{{node.title | uppercase}} - displays a string in uppercase

{{node.title | lowercase}} - output a string in lower case

For a complete list of Twig filters, see the official Twig documentation at http://twig.sensiolabs.org/doc/filters/index.html

Drupal Twig Filters

Drupal also adds its filters to Twig, such as filters for line feeds. If earlier we used the t () function, which was implemented in PHP, and now we cannot use PHP code in Twig, then we need a tool that replaces the t () function.

Find examples by

• t
• passthrough
• placeholder
• drupal_escape
• safe_json
• without
• clean_class
• clean_id

Line feed in twig pattern

Twig uses strings for different languages. In order to translate a line you need to use the tag {% trans%}. Notice how control structures are written. They use the percent sign% to differ from variables.

{% trans %} Hello world {% endtrans %}

We can also pass variables to strings for translation:

{% trans %} Hello {{ name }} {% endtrans %}

We can also modify variables through filters before displaying in translation lines

{% set name = name|capitalize %}
 
{% trans %}
  Hello {{ name }}!
{% endtrans %}

Comments Twig

{# Comment here #}

If statement

Although we do not have most of the features of PHP in twig, we do have a set of constructs for working with arrays and variables. For example, we can check if a variable exists before displaying this variable.

{% if site_slogan %}
  <div class="site-slogan">{{ site_slogan }}</div>
{% endif %}

Twig loop

Very often in templates you need to iterate over an array and output it element by element. To do this, in Twig we use a for loop (similar to foreach in PHP):

{% for item in items %}
  {{ item.content }}
{% endfor %}

We can also use the for loop, like a regular for loop for PHP, but only in a different form:

{% for i in range(0, 3) %}
  {{ i }},
{% endfor %}

We can also use the for else construct:

<ul>
{% for user in users %}
  <li>{{ user.username|e }}</li>
{% else %}
  <li><em>no user found</em></li>
{% endfor %}
</ul>