[Twig] Template configuration and usage (include / extends)

0

When using a template engine, I think that it is rare to operate with one template for each screen to be displayed.
You want to create a base template and customize it on each page (extends).
You want to cut out common parts and call them in the required template (include).
I think there are such things. I would like to introduce how to use include extends, which is necessary for configuring a Twig template.

How to use include

You can create a template for each common part and reuse it in other templates.

Basic usage 

// contents of test.twig
<div>this is test</div>

// index.twig include test.twig
<div>include test</div>
{{ include('test.twig') }}

// result
<div>include test</div>
<div>this is test</div>

The root of the file path is the twig directory specified in the file system.
It can also be used in a file that includes the variable that is active in the include source.

// index.twig include test.twig
{% set test_class = 'product_text' %}
<div>include test</div>
{{ include('test.twig') }}

// contents of test.twig
<div class="{{ test_class }}">this is test</div>

// result
<div>include test</div>
<div class="product_text">this is test</div>

The above is used in test.twig which reads a variable called test_class.
That’s all for basic usage.

Example of using include

I would like to introduce some of the detailed usage of include.

Pass variables that can be used in the included file

{{ include('test.twig', {foo: 'bar'}) }}

In the above example, the variable foo will be available in test.twig.

Make the include variable inaccessible

{{ include('test.twig', with_context = false) }}

Disable the include variable in test.twig.

Returns empty if no include file

{{ include('test.twig', ignore_missing = true) }}

If ignore_missing is not set, it will be treated as an exception.

How to use extends

extends allows you to create a base template.

// base.twig

<!DOCTYPE html>
<html>
    <head>
        {% block head %}
            <link rel="stylesheet" href="style.css"/>
            <title>{{ title|default('extends test page') }}</title>
        {% endblock %}
    </head>
    <body>
        <div id="content">
            {% block content %}{% endblock %}
        </div>
        <div id="footer">
            {% block footer %}
                Copyright
            {% endblock %}
        </div>
    </body>
</html>

Suppose you have created a base twig file like the one above. It is possible to overwrite block and variables with a file that extends this file. You can use the base value as is.

{% extends "base.html" %}

{% set title = 'this is child page extends sample' %}
{% block head %}
    {{ parent() }}
    <style type="text/css">
        .text-red { color: #990000; }
    </style>
{% endblock %}
{% block content %}
    <h1>Test Content</h1>
{% endblock %}

In the above example, the variable title is overwritten and used.
Since block content is newly set and block footer is not set, the base block is used as it is.
It is also possible to call and use the base data by using {{ parent ()}} like the block head part.