@@ -3,31 +3,26 @@ The View
3
3
4
4
After reading the first part of this tutorial, you have decided that Symfony2
5
5
was worth another 10 minutes. Great choice! In this second part, you will
6
- learn more about the Symfony2 template engine, ` Twig `_ . Twig is a flexible,
6
+ learn more about ` Twig `_, the Symfony2 template engine. Twig is a flexible,
7
7
fast, and secure template engine for PHP. It makes your templates more
8
8
readable and concise; it also makes them more friendly for web designers.
9
9
10
- .. note ::
11
-
12
- Instead of Twig, you can also use :doc: `PHP </cookbook/templating/PHP >`
13
- for your templates. Both template engines are supported by Symfony2.
14
-
15
10
Getting familiar with Twig
16
11
--------------------------
17
12
18
- .. tip ::
13
+ The official Twig `documentation `_ is the best resource to learn everything
14
+ abut this new template engine. This section just gives you a quick overview of
15
+ its main concepts.
19
16
20
- If you want to learn Twig, it's highly recommended you read its official
21
- `documentation `_. This section is just a quick overview of the main
22
- concepts.
17
+ A Twig template is a text file that can generate any type of content (HTML, CSS,
18
+ JavaScript, XML, CSV, LaTeX, ...). Twig defines three kinds of delimiters:
23
19
24
- A Twig template is a text file that can generate any type of content (HTML,
25
- XML, CSV, LaTeX, ...). Twig defines two kinds of delimiters:
20
+ * ``{{ ... }} ``: prints the content of a variable or the result of an expression;
26
21
27
- * ``{{ ... }} ``: Prints a variable or the result of an expression;
22
+ * ``{% ... %} ``: controls the logic of the template; it is used to execute
23
+ ``for `` loops and ``if `` statements, for example;
28
24
29
- * ``{% ... %} ``: Controls the logic of the template; it is used to execute
30
- ``for `` loops and ``if `` statements, for example.
25
+ * ``{# ... #} ``: allows to include comments inside templates.
31
26
32
27
Below is a minimal template that illustrates a few basics, using two variables
33
28
``page_title `` and ``navigation ``, which would be passed into the template:
@@ -50,10 +45,6 @@ Below is a minimal template that illustrates a few basics, using two variables
50
45
</body>
51
46
</html>
52
47
53
- .. tip ::
54
-
55
- Comments can be included inside templates using the ``{# ... #} `` delimiter.
56
-
57
48
To render a template in Symfony, use the ``render `` method from within a controller
58
49
and pass it any variables needed in the template::
59
50
@@ -87,24 +78,17 @@ variable with the dot (``.``) notation:
87
78
{# pass arguments to a method #}
88
79
{{ user.date('Y-m-d') }}
89
80
90
- .. note ::
91
-
92
- It's important to know that the curly braces are not part of the variable
93
- but the print statement. If you access variables inside tags don't put the
94
- braces around.
95
-
96
81
Decorating Templates
97
82
--------------------
98
83
99
84
More often than not, templates in a project share common elements, like the
100
- well-known header and footer. In Symfony2, you think about this problem
101
- differently: a template can be decorated by another one. This works exactly
102
- the same as PHP classes: template inheritance allows you to build a base
103
- "layout" template that contains all the common elements of your site and
104
- defines "blocks" that child templates can override.
85
+ well-known header and footer. Twig solves this problem elegantly with a concept
86
+ called "template inheritance". This feature allows you to build a base "layout"
87
+ template that contains all the common elements of your site and defines "blocks"
88
+ that child templates can override.
105
89
106
- The ``hello.html.twig `` template inherits from ``layout.html.twig ``, thanks to
107
- the `` extends `` tag :
90
+ The ``hello.html.twig `` template uses the ``extends `` tag to indicate that it
91
+ inherits from the common `` layout.html.twig `` template :
108
92
109
93
.. code-block :: html+jinja
110
94
@@ -120,24 +104,24 @@ the ``extends`` tag:
120
104
The ``AcmeDemoBundle::layout.html.twig `` notation sounds familiar, doesn't it?
121
105
It is the same notation used to reference a regular template. The ``:: `` part
122
106
simply means that the controller element is empty, so the corresponding file
123
- is directly stored under the ``Resources/views/ `` directory.
107
+ is directly stored under the ``Resources/views/ `` directory of the bundle .
124
108
125
109
Now, simplify the ``layout.html.twig `` template:
126
110
127
111
.. code-block :: jinja
128
112
129
113
{# src/Acme/DemoBundle/Resources/views/layout.html.twig #}
130
- <div class="symfony-content" >
114
+ <div>
131
115
{% block content %}
132
116
{% endblock %}
133
117
</div>
134
118
135
119
The ``{% block %} `` tags define blocks that child templates can fill in. All
136
- the block tag does is to tell the template engine that a child template may
137
- override those portions of the template.
120
+ the `` {% block %} `` tag does is to tell the template engine that a child
121
+ template may override those portions of the template.
138
122
139
123
In this example, the ``hello.html.twig `` template overrides the ``content ``
140
- block, meaning that the "Hello Fabien" text is rendered inside the ``div.symfony-content ``
124
+ block, meaning that the "Hello Fabien" text is rendered inside the ``< div> ``
141
125
element.
142
126
143
127
Using Tags, Filters, and Functions
@@ -203,7 +187,7 @@ new request) and are made available to the controller::
203
187
$object = ...;
204
188
205
189
return $this->render('AcmeDemoBundle:Demo:fancy.html.twig', array(
206
- 'name' => $name,
190
+ 'name' => $name,
207
191
'object' => $object,
208
192
));
209
193
}
@@ -214,8 +198,8 @@ new request) and are made available to the controller::
214
198
Creating Links between Pages
215
199
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
216
200
217
- Speaking of web applications, creating links between pages is a must. Instead
218
- of hardcoding URLs in templates, the ``path `` function knows how to generate
201
+ Creating links between pages is a must for web applications . Instead of
202
+ hardcoding URLs in templates, the ``path `` function knows how to generate
219
203
URLs based on the routing configuration. That way, all your URLs can be easily
220
204
updated by just changing the configuration:
221
205
@@ -225,7 +209,7 @@ updated by just changing the configuration:
225
209
226
210
The ``path `` function takes the route name and an array of parameters as
227
211
arguments. The route name is the main key under which routes are referenced
228
- and the parameters are the values of the placeholders defined in the route
212
+ and the parameters are the values of the variables defined in the route
229
213
pattern::
230
214
231
215
// src/Acme/DemoBundle/Controller/DemoController.php
@@ -245,8 +229,9 @@ pattern::
245
229
246
230
.. tip ::
247
231
248
- The ``url `` function generates *absolute * URLs: ``{{ url('_demo_hello', {
249
- 'name': 'Thomas'}) }} ``.
232
+ The ``url `` function is very similar to the ``path `` function, but generates
233
+ *absolute * URLs, which is very handy when rendering emails and RSS files:
234
+ ``{{ url('_demo_hello', {'name': 'Thomas'}) }} ``.
250
235
251
236
Including Assets: images, JavaScripts, and stylesheets
252
237
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -265,13 +250,6 @@ Thanks to this function, you can move the application root directory anywhere
265
250
under your web root directory without changing anything in your template's
266
251
code.
267
252
268
- Escaping Variables
269
- ------------------
270
-
271
- Twig is configured to automatically escape all output by default. Read Twig
272
- `documentation `_ to learn more about output escaping and the Escaper
273
- extension.
274
-
275
253
Final Thoughts
276
254
--------------
277
255
0 commit comments