1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
``embed``
=========
The ``embed`` tag combines the behavior of :doc:`include<include>` and
:doc:`extends<extends>`.
It allows you to include another template's contents, just like ``include``
does. But it also allows you to override any block defined inside the
included template, like when extending a template.
Think of an embedded template as a "micro layout skeleton".
.. code-block:: twig
{% embed "teasers_skeleton.html.twig" %}
{# These blocks are defined in "teasers_skeleton.html.twig" #}
{# and we override them right here: #}
{% block left_teaser %}
Some content for the left teaser box
{% endblock %}
{% block right_teaser %}
Some content for the right teaser box
{% endblock %}
{% endembed %}
The ``embed`` tag takes the idea of template inheritance to the level of
content fragments. While template inheritance allows for "document skeletons",
which are filled with life by child templates, the ``embed`` tag allows you to
create "skeletons" for smaller units of content and re-use and fill them
anywhere you like.
Since the use case may not be obvious, let's look at a simplified example.
Imagine a base template shared by multiple HTML pages, defining a single block
named "content":
.. code-block:: text
┌─── page layout ─────────────────────┐
│ │
│ ┌── block "content" ──┐ │
│ │ │ │
│ │ │ │
│ │ (child template to │ │
│ │ put content here) │ │
│ │ │ │
│ │ │ │
│ └─────────────────────┘ │
│ │
└─────────────────────────────────────┘
Some pages ("page_1" and "page_2") share the same content structure -
two vertically stacked boxes:
.. code-block:: text
┌─── page layout ─────────────────────┐
│ │
│ ┌── block "content" ──┐ │
│ │ ┌─ block "top" ───┐ │ │
│ │ │ │ │ │
│ │ └─────────────────┘ │ │
│ │ ┌─ block "bottom" ┐ │ │
│ │ │ │ │ │
│ │ └─────────────────┘ │ │
│ └─────────────────────┘ │
│ │
└─────────────────────────────────────┘
While other pages ("page_3" and "page_4") share a different content structure -
two boxes side by side:
.. code-block:: text
┌─── page layout ─────────────────────┐
│ │
│ ┌── block "content" ──┐ │
│ │ │ │
│ │ ┌ block ┐ ┌ block ┐ │ │
│ │ │"left" │ │"right"│ │ │
│ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ └───────┘ └───────┘ │ │
│ └─────────────────────┘ │
│ │
└─────────────────────────────────────┘
Without the ``embed`` tag, you have two ways to design your templates:
* Create two "intermediate" base templates that extend the master layout
template: one with vertically stacked boxes to be used by the "page_1" and
"page_2" pages and another one with side-by-side boxes for the "page_3" and
"page_4" pages.
* Embed the markup for the top/bottom and left/right boxes into each page
template directly.
These two solutions do not scale well because they each have a major drawback:
* The first solution may indeed work for this simplified example. But imagine
we add a sidebar, which may again contain different, recurring structures
of content. Now we would need to create intermediate base templates for
all occurring combinations of content structure and sidebar structure...
and so on.
* The second solution involves duplication of common code with all its negative
consequences: any change involves finding and editing all affected copies
of the structure, correctness has to be verified for each copy, copies may
go out of sync by careless modifications etc.
In such a situation, the ``embed`` tag comes in handy. The common layout
code can live in a single base template, and the two different content structures,
let's call them "micro layouts" go into separate templates which are embedded
as necessary:
Page template ``page_1.html.twig``:
.. code-block:: twig
{% extends "layout_skeleton.html.twig" %}
{% block content %}
{% embed "vertical_boxes_skeleton.html.twig" %}
{% block top %}
Some content for the top box
{% endblock %}
{% block bottom %}
Some content for the bottom box
{% endblock %}
{% endembed %}
{% endblock %}
And here is the code for ``vertical_boxes_skeleton.html.twig``:
.. code-block:: html+twig
<div class="top_box">
{% block top %}
Top box default content
{% endblock %}
</div>
<div class="bottom_box">
{% block bottom %}
Bottom box default content
{% endblock %}
</div>
The goal of the ``vertical_boxes_skeleton.html.twig`` template being to factor
out the HTML markup for the boxes.
The ``embed`` tag takes the exact same arguments as the ``include`` tag:
.. code-block:: twig
{% embed "base" with {'name': 'Fabien'} %}
...
{% endembed %}
{% embed "base" with {'name': 'Fabien'} only %}
...
{% endembed %}
{% embed "base" ignore missing %}
...
{% endembed %}
.. warning::
As embedded templates do not have "names", auto-escaping strategies based
on the template name won't work as expected if you change the context (for
instance, if you embed a CSS/JavaScript template into an HTML one). In that
case, explicitly set the default auto-escaping strategy with the
``autoescape`` tag.
.. seealso::
:doc:`include<../tags/include>`
|
