Everything you need to know about twig. Installing and getting started with Twig

Today there are a large number of ways to output to an html page. More and more often, web developers use so-called template engines for these purposes. Today we will look at a small example of using the Twig template engine.

Features of Twig

• phenomenally fast speed (compared to other template engines)
• compiling templates into well-optimized PHP code
• using “inheritance” (you can define a base and child templates)
• allows you to create and use macros

Installation

There are many ways to install Twig. The simplest and fastest is to download the component from GitHub, after which the archive must be unpacked and the lib directory transferred to the folder with our project.

Project structure

Well, now let's get down to business and look at the structure of our small project:

• compilation_cache
• lib
  • Twig
• templates
  • base.html
  • books.html
• index.php

All functionality related to connecting and configuring Twig is contained in the file index.php.

We will store template files in the templates folder. In our case, there are 2 of these files: base.html with basic html code and books.html with a list of books.

In the catalog compilation_cache PHP files created by Twig for work will be placed.

Connection and basic configuration of Twig

So, the first thing we need to do is connect Twig:

Require_once "lib/Twig/Autoloader.php"; Twig_Autoloader::register();

After that, we tell the template engine where we store the template files. We pass the path to the directory as an argument templates:

$loader = new Twig_Loader_Filesystem("templates");

Then we create a template engine object and specify a few more options:

$twig = new Twig_Environment($loader, array("cache" => "compilation_cache", "auto_reload" => true));

Parameter cache pass the path to the directory compilation_cache. Activate the option auto_reload so that when the page is refreshed, Twig re-processes the templates and we see the changes. If this is not done, the template engine will simply cache the pages. When work on the project is completed, this option can be removed so that your pages are cached and loaded even faster.

Data

To implement our small example, let’s take a list of books and form an array of the form key - value:

$books = array(array("number" => "Book 1", "title" => "Harry Potter and the Philosopher's Stone", "date" => "06/30/1997"), array("number" => " Book 2", "title" => "Harry Potter and the Chamber of Secrets", "date" => "07/2/1998", array("number" => "Book 3", "title" => "Harry Potter and Prisoner of Azkaban", "date" => "07/8/1999"), array("number" => "Book 4", "title" => "Harry Potter and the Goblet of Fire", "date" => "07/8/2000 "), array("number" => "Book 5", "title" => "Harry Potter and the Order of the Phoenix", "date" => "07/21/2003"), array("number" => "Book 6 ", "title" => "Harry Potter and the Half-Blood Prince", "date" => "07/16/2005", array("number" => "Book 7", "title" => "Harry Potter and the Gifts Deaths", "date" => "07/21/2007"));

File upload and data transfer

In order to pass data to some template and output the html result, we need to use the method render(); As the first argument, we pass the name of the template file that we will output. The second is an array of the form key - value. In the future, using the given keys, we will access our data in the templates themselves.

Echo $twig->render("books.html", array("books" => $books));

index.php

General view of the index.php file

Require_once "lib/Twig/Autoloader.php"; Twig_Autoloader::register(); $loader = new Twig_Loader_Filesystem("templates"); $twig = new Twig_Environment($loader, array("cache" => "compilation_cache", "auto_reload" => true)); $books = array(array("number" => "Book 1", "title" => "Harry Potter and the Philosopher's Stone", "date" => "06/30/1997"), array("number" => " Book 2", "title" => "Harry Potter and the Chamber of Secrets", "date" => "07/2/1998", array("number" => "Book 3", "title" => "Harry Potter and Prisoner of Azkaban", "date" => "07/8/1999"), array("number" => "Book 4", "title" => "Harry Potter and the Goblet of Fire", "date" => "07/8/2000 "), array("number" => "Book 5", "title" => "Harry Potter and the Order of the Phoenix", "date" => "07/21/2003"), array("number" => "Book 6 ", "title" => "Harry Potter and the Half-Blood Prince", "date" => "07/16/2005", array("number" => "Book 7", "title" => "Harry Potter and the Gifts Deaths", "date" => "07/21/2007")); echo $twig->render("books.html", array("books" => $books));

Setting up a basic template

The basic template is a regular HTML document with special inserts:

In our main template we write 2 blocks: title and content. We choose the names of the blocks ourselves.

Subsequently, we will introduce information specific to child pages into these common blocks.

Setting up a book output template

First, in the child template, we need to specify the parent template:

(% block title %)Harry Potter series(% endblock %)

Then, we write the content, which will be embedded in a block called content in the base template:

(% block content %)

Harry Potter series of novels

Right there in the for loop (Twig for) we go through all the books that were transferred to this template using the entry $twig->render("books.html", array("books" => $books)); and to retrieve values, we access the array elements by key: ((book.number)), ((book.title)), and so on.

Thus, after the $twig->render("books.html", array("books" => $books)) method is triggered, Twig will load the books.html template and generate the html content. It will then recognize that books.html is a child template of base.html and place the generated content into the base template. After all this, Twig will return us a full html page.

Bottom line

You can see an example of how this script works in the demo or download an archive with a ready-made example.

We are waiting for your impressions in the comments. If you are interested in this topic, then in the future we will continue to talk about the Twig template engine.

, | |

What is Twig?

Download the Composer installer to the application root folder (twig):

cd /var/www/twig
curl -s http://getcomposer.org/installer | php

This will download a file called composer.phar, which is the Composer executable. Then create a file called composer.json:

nano composer.json

And add the following code into it:

{
"require": (
"twig/twig": "1.*"
}
}

This code will make the application dependent on the Twig template engine. Now let's use the composer command to install the dependencies:

php composer.phar install

The Twig files are now downloaded to the vendor/Twig folder. If you add other dependencies, they will also be installed in the vendor folder.

Now you need to “connect” this file to the application. Again, you can use Composer's autoloader feature to load all installed dependencies. Open the app.php file:

nano app/app.php

Delete all its contents and add this line:

This line will load the Composer autoloader, which in turn will load Twig. If Twig was installed using another method, you will need the Twig autoloader:

require_once "/path/to/lib/Twig/Autoloader.php";
Twig_Autoloader::register();

This is not necessary when using Composer.

Under the require command, you need to place the Twig template file and set the variable that you want to display on the page. Paste the following code:

render("page.html", array("text" => "Hello world!")); ?>

First, it will create a loader object that is passed the path to the folder containing the template files (the currently empty views folder was created earlier). Additionally, this code will also create an environment object that stores the configuration. Finally, the render line of the environment object loads the template file given as the first argument and renders it given the variables given as the second argument. Now you need to create a page.html file in which you can add variables containing the text you want to display.

nano views/page.html

Enter the following into it:

((text))

If you save this file and restart the app.php file in the browser, the text taken in the H1 tags will be displayed on the page. Now that you've created this file, you can experiment with it. Variables set through the render function can now be enclosed in curly braces.

For the sake of experimentation, you can pass several variables to the template, use them in control structures, process them using template functions, or apply Twig filters.

Results

This tutorial demonstrated installing Twig through Composer, as well as displaying simple variables using separate template files. This series takes a closer look at using Twig syntax to develop template files.

In this article, we will look at Twig tags - template engine constructs that perform a variety of tasks, such as: conditional statements, loops, data escaping, creating macros, using template inheritance, writing to variables and much more. In general, they are written using an opening tag and a closing tag (called the end prefix). Not all constructs need a closing tag. An example of an abstract tag looks like this:

(% tag %) (% endtag %)

Control constructs: conditional statements and loops

if tag

The if tag in Twig is comparable to the conditional if statement in PHP. In its simplest form, you can use it to test whether an expression is true:

(% if label_display == "after" %) (( label )) (% endif %)

You can also test an array or string for existence:

(% if page.footer_fifth %)

The Twig template engine requires additional checks in the following conditions:

empty- checks if the variable is empty:

(# returns true if foo is null, false, an empty array, or an empty string #) (% if foo is empty %) ... (% endif %) (# possible with the negation operator not #) (% if foo is not empty %) ... (% endif %)

even and odd- returns true if the given number is even or odd, respectively:

(( if var is even )) ... (% endif %) (( if var is odd )) ... (% endif %)

iterable- checks whether the variable is an array or an object (an instance of a class that implements the Traversable interface):

(% if users is iterable %) (% for user in users %) Hello (( user.name ))! (% endfor %) (% else %) (# users is probably the string #) Hello (( users ))! (% endif %)

null- returns true if the variable is equal to NULL:

(( if var is null )) ... (% endif %)

constant- checks whether a variable has exactly the same value as a constant. You can use either global constants or class constants:

(% if status is constant("MARK_NEW") %) (( "New"|t )) (% elseif status is constant("MARK_UPDATED") %) (( "Updated"|t )) (% endif %)

divisible- checks whether a variable is divisible by a number:

(% if loop.index is divisible by(3) %) ... (% endif %)

same as- checks whether two variables point to the same memory location. Similar to the equivalence operator === in php:

(% if foo.attribute is same as(false) %) foo.attribute is equivalent to "false" (% endif %)

defined- checks whether a variable is defined:

(# defined works both with variable names #) (% if foo is defined %) ... (% endif %) (# and with variable attributes #) (% if foo.bar is defined %) ... (% endif %) (% if foo["bar"] is defined %) ... (% endif %)

You can use the logical operators and, or, not in conditions:

(% if not page %) (% if foo and bar %) (% if foo or bar %) (# Complex compound conditions are also possible #) (% if (a and b) or (c and d) %)

It is possible to use regular expressions in the conditions

(% if phone matches "/^[\\d\\.]+$/" %) (% endif %)

You can also check whether a string starts or ends with a specific character:

(% if "Drupal" starts with "D" %) (% endif %) (% if "Drupal" ends with "l" %) (% endif %)

You can also use more complex if-elseif statements (by the way switch-case is missing in Twig):

(% if rows %)

for tag

The for tag is similar to the for construct in PHP and iterates through array elements or object properties if the object is an instance of a class that implements the Traversable interface.

As an example, consider a field template and iterate over multiple field values:

(% for item in items %) ((item.content))(%endfor%)

Variables available inside the loop:

• loop.index - Current loop iteration (starts at 1)
• loop.index0 - Current loop iteration (starts at 0)
• loop.revindex - Number of iterations since the end of the loop (starts at 1)
• loop.revindex0 - Number of iterations since the end of the loop (starts at 0)
• loop.first - Flag equal to True if the current iteration is the first
• loop.last - Flag equal to True if the current iteration is the last one
• loop.length - Number of elements in the sequence
• loop.parent - Parent context (used for nested loops)

Unlike PHP, you cannot interrupt or continue the loop (continue and break). However, you can create rules that allow you to skip elements based on conditions for-if. In the example below, inactive users are skipped through iterations:

(% for user in users if user.status %)
• ((user.name))
(%endfor%)

Also possible in Twig for-else construct to perform actions if the array or object is empty:

(% for user in users %)
• ((user.name))
(%else%)
• (( no_found|t ))
(%endfor%)

Twig also allows iterations over both keys and values.

(% for key, value in values ​​%)

Template inheritance in Twig

Template inheritance is one of the most interesting features in Twig. Inheritance allows you to create basic parent templates, which can then be used in child templates, while all the code from the parent templates is also available in the children, and in addition, it is possible to override some blocks of the parent templates. Let's look at tags that allow you to implement inheritance:

extends tag

Let's look at the use of inheritance and the extends tag using the example of a template for the block.html.twig block and its child templates. The basic parent block template contains the code in a simplified form:

(( title_prefix )) (% if label %) ((label))(% endif %) (( title_suffix )) (% block content %) (( content )) (% endblock %)