The open-source twig render-engine

Hublify integrates the power, flexibility, extendibility & ease-of-use of the very well-known twig render-engine.

Standard Twig basics

Just to give a brief overview here of some basic functions of the twig render-engine.

For all and better and more in-depth documentation see the official twig online-documentation here:

https://twig.symfony.com/doc/2.x/templates.html


Printing data and variables: {{ … }}

Most often you will want to print out some data stored in twig-variables in html.

Printing a variable:

Assuming the variable “myVar” is set with some string-value:

<div>Hello <em>{{ myVar }}</em>,</div>


Printing an array-member:

Assuming the array (or object) “data” has an element “firstname”:

<div>Hello <em>{{ data.firstname] }}</em>,</div>


Setting variables: {% set …  %}

Twig supports variable types: string, integer, float, boolean, numerical arrays, objects (associative arrays).

Setting a simple string variable:

{% set myVar = “Aloha!” %}


Setting a numerical array:

{% set myNumArr = [ “Aloha”, “Hello”, “World” ] %}


Setting an object (associative array):

{% set myNumArr = { ‘firstname’: “Helena”, ‘lastname’: “Humptydumpty” } %}

Conditional: {% if ... %}

No smart templating possible, without an IF ...

{% if xyz < 10 %}
    <span>small number</span>
{% else %}
    <span>big number</span>
{% endif %}

There are a lot more functions & helpers provided by twig for IF / ELSE: https://twig.symfony.com/doc/3.x/tags/if.html


Loops: {% for ... %}

Loop over each item in a sequence. For example, to show a list of users provided in an array called users:

<h1>Members</h1>
<ul>
    {% for user in users %}
        <li>{{ user.username }}</li>
    {% endfor %}
</ul>

There are a lot more functions & helpers provided by twig for for-loops: https://twig.symfony.com/doc/3.x/tags/for.html


Standard Twig structuring (files)

If template files get too big, too complex you will want to split them up into smaller and better reusable template files. Of course twig brings some very nice functions along to that adding some parameter-spice on top simple including!

{% include … %}

The include statement includes a template and outputs the rendered content of that file.
Official twig documentation: https://twig.symfony.com/doc/3.x/tags/include.html

{% include 'header.html.twig' %}
    <div> ... </div>
{% include 'footer.html.twig' %}


{% block … %}

Blocks are used for inheritance and act as placeholders and replacements at the same time. They are documented in detail in the documentation for the extends tag.

{% extend … %}

The extends tag can be used to extend a template from another one.

Using these twig functions really brings in the smart reusable template power!

A must-read, the twig's documentation: https://twig.symfony.com/doc/3.x/tags/extends.html