Creating and Using Templates with TwiQ

TwiQ is a simple templating engine which looks a lot like Twig the templating engine used in Symfony. But TwiQ is made only of 1 class. If you know Twig, you will learn TwiQ quickly.

  1. Template Syntax: TwiQ offers a clean and intuitive template syntax that is easy to read and write. It uses double curly braces `` for variable interpolation and {% %} for control flow statements, such as loops and conditionals.
  2. Variable Interpolation: You can output dynamic data in templates by using variables within {{}}. Variables can contain scalar values (strings, numbers) or more complex data structures (arrays, objects).
  3. Control Structures: TwiQ provides various control flow structures, including if statements, loops, and blocks. You can conditionally render content, iterate over arrays or objects, and define reusable blocks of content.
  4. Template Inheritance: TwiQ supports template inheritance, allowing you to create a base template with common elements and define child templates that extend or override specific sections. This promotes code reuse and modular development.
  5. Template Includes: TwiQ enables you to include other templates within a template. This allows you to modularize your code by breaking it down into smaller, reusable components and including them where needed.

TwiQ Templates

A template is a regular text file. A template contains variables or expressions, which get replaced with values when the template is evaluated, and tags, which control the template's logic.

Below is a minimal template that illustrates a few basics. We will cover further details later on:

TwiQ 
<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <ul id="navigation">
        {% for item in site.menu.main %}
            <li><a href="{{ item.href }}">{{ item.label }}</a></li>
        {% endfor %}
        </ul>

        <h1>{{ page.title }}</h1>
        {{ content }}
    </body>
</html>

There are two kinds of delimiters:

TwiQ 
{% ... %} and {{ ... }}

The first one is used to execute statements such as for-loops, the latter outputs the result of an expression.

Using TwiQ in Controllers

Here's an example of using TwiQ in a controller:

<?php

namespace App\Controller;

use Qwwwest\Namaskar\PageDataBuilder;
use Qwwwest\Namaskar\Response;
use Qwwwest\Namaskar\AbstractController;

class MyController extends AbstractController
{
    #[Route('/{url*}')]
    public function showPage($url = '/'): ?Response
    {
        return $this->render($theme);
    }
}

In this example, we use the render() method to generate HTML content by passing the required theme. Variables will be retrieved by TwiQ through the ZenConfig service.

TwiQ Syntax

TwiQ syntax is inspired by Twig, so you'll find many similarities. Here are the main features and directives you can use:

1. Variables: You can display variables in your templates using the

{{ variable }}

syntax. For example:

TwiQ 
<p>Welcome, {{ name }}!</p>

Here, the name variable will be replaced by its value when the template is executed.

2. Conditional Statements: You can use the ... directive to perform conditional statements. For example:

TwiQ 
{% if age >= 18 %}
    <p>You are an adult.</p>
{% else %}
    <p>You are a minor.</p>
{% endif %}

3. Loops: You can use the `` directive to loop over a set of elements. For example:

TwiQ 
<ul>
    {% for fruit in fruits %}
        <li>{{ fruit }}</li>
    {% endfor %}
</ul>

4. Comments: Comments are useful for documenting and aiding in the understanding of your templates. Any content between {# and #} will be ignored and will not be visible in the output:

TwiQ 
{# This comment will not appear in the final output #}
<p>Welcome to our website!</p>

Including Other Templates

You can include other templates within a template using the [% include 'template.html' %] directive. For example:

TwiQ 
{% include 'header.html' %}

Here, the content of header.html will be included at this location in the template.

Including a Template with new variables

The include with directive allows you to include a template while passing variables to the template

Here's how to use the include with syntax:

TwiQ 
{% for item in items %} 
{% include 'template.html' with
  myVariable = value
  elements = item.children
 %}
{% endfor %}

The variables available in the included template will be the variables specified with the with option: here myVariable with the value value and elements with the value item.children. Variables defined in the parent context will also be available.