When using a template engine, it's uncommon to manage each display screen with a single template.
You'll likely want to create a base template and customize it for each page (extends).
You'll also want to extract common parts and call them within necessary templates (include).
There are various scenarios like these. I'd like to introduce how to use `include` and `extends`, which are essential for structuring Twig templates.
HOW TO USE INCLUDE
You can templatize common parts and reuse them across different 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 file path is relative to the Twig directory specified by the file system.
Furthermore, variables active in the including file can also be used within the included file.
// 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 example above uses the `test_class` variable within `test.twig`, which is being included.
INCLUDE USAGE EXAMPLES
Passing Variables for Use in the Included File
{{ include('test.twig', {foo: 'bar'}) }}In the example above, the `foo` variable becomes available for use within `test.twig`.
Preventing Access to Variables from the Including File
{{ include('test.twig', with_context = false) }}This makes variables from the including file unavailable within `test.twig`.
Return Empty if Included File is Missing
{{ 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've created a base Twig file like the one above. Files that `extend` this base can then override blocks and variables. It's also possible to use the base values as they are.
{% 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 %}Here, `block content` is newly set, but `block footer` is not, so the base block is used as is.
As shown in the `block head` section, you can also call and use the base data by using `{{ parent() }}`.
RECOMMENDED TWIG BOOKS
Although I haven't read any books exclusively dedicated to Twig, I found one on Amazon Kindle.
📦