Template

About template system

WebSpace Engine uses a compiling engine as a template language Twig.

The template is split into two parts:

theme - design themes containing template texts;
resource - template resources (styles, scripts, pictures, fonts, etc.).

The general idea of WSE template: Twig allows you to divide HTML into several parts (for example, such as header, sidebar and footer) in the master template, select some parts (eg main), and later replace them other templates, inheriting from the main

About Twig

Twig syntax is easy to learn:

{# ... #} - comment
{{ ... }} - print the value of a variable
{% ... %} - commands

Example of commands:

assignments

{% set foo = 'bar' %}

condition if

{% if i is defined and i == 1%} ... {% endif %}

cycle for|foreach

{% for i in 0..10 %} ... {% endfor %}

An example of some key features Twig:

{% extends "main.twig" %}
{% block navigation %}
    <ul id="navigation">
    {% for item in navigation %}
        <li>
            <a href="{{ item.href }}">
                {% if item.level == 2 %}&nbsp;&nbsp;{% endif %}
                {{ item.caption|upper }}
            </a>
        </li>
    {% endfor %}
    </ul>
{% endblock navigation %}

First steps

Create a new folder in the /theme directory (for example, my-theme);
Create the main template file in the folder /theme/my-theme/ (by default, main.twig);
The first line is recommended to extend layout.twig:

{% extends 'layout.twig' %}

Further in the head block you can specify the tags meta, link and others:

{% extends 'layout.twig' %}

{% block head %}
    <link rel="stylesheet" href="/default/css/style.css">
{% endblock %}

Further, in the body block or in the bodyinner block, the content of the page is indicated:

{% extends 'layout.twig' %}

{% block head %}
    <link rel="stylesheet" href="/default/css/style.css">
{% endblock %}

{% block body %}
    <body>
        <h1>Hello world!</h1>
    </body>
{% endblock %}

Connect another template file: header.twig (create file!)

<header>
    Header here!
</header>

main.twig

{% extends 'layout.twig' %}

{% block head %}
    <link rel="stylesheet" href="/default/css/style.css">
{% endblock %}

{% block body %}
    <body>
        {% include 'header.twig' %}

        <h1>Hello world!</h1>
    </body>
{% endblock %}

Site pages use a separate template file, which must inherit from the main template file (or implement its own template): page.twig (create file!)

{% extends 'main.twig' %}

{% block title %}My page | {{ parent() }}{% endblock %}

{% block content %}
    <p>My awesome page text</p>
{% endblock %}

main.twig

{% extends 'layout.twig' %}

{% block head %}
    <link rel="stylesheet" href="/default/css/style.css">
{% endblock %}

{% block body %}
    <body>
        {% include 'header.twig' %}

        {% block content %}
            <h1>Hello world!</h1>
        {% endblock %}
    </body>
{% endblock %}

Notice the added lines {% block content %} and {% endblock %}.

Now, when you open the main page of the site, you will see Hello world!, And on the secondary page there will be the text My awesome page text.

A real example template is available here: main.twig.

Additional features Twig

See Additional filters Twig
See Additional features Twig

Models and Twig

См. Models and Twig

Mixins

Additional templates containing narrow functionality to facilitate work.

Name.	Description
adbd.twig	AdBlock Detector
catalog.twig	Catalog: categories, products and cart
form.twig	Bootstrap input field
img.twig	Img HTML Tag Constructor (Lazy Load)
picture.twig	Picture HTML Tag Constructor
recaptcha.twig	Recaptcha layer script for forms
gallery.twig	OwlCarousel with FancyBox gallery
quiz.twig	Quiz template