Symfony Templates Cookbook: Difference between revisions
No edit summary |
|||
| Line 67: | Line 67: | ||
<p>{{ entry.body }}</p> | <p>{{ entry.body }}</p> | ||
{% endfor %} | {% endfor %} | ||
{% endblock %} | |||
</syntaxhighlight> | |||
== Extending a block in a child template == | |||
For example, a base template defines a core set of JavaScript and stylesheets for the site. A child template adds one stylesheet for a specific page on the site. | |||
<syntaxhighlight lang="html4strict"> | |||
{# app/Resources/views/base.html.twig #} | |||
{% block JavaScripts %} | |||
<script src="{{ asset('js/core.js') }}"></script> | |||
<script src="{{ asset('js/more.js') }}"></script> | |||
{% endblock %} | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="html4strict"> | |||
{# app/Resources/views/child.html.twig #} | |||
{% block JavaScripts %} | |||
{{ parent() }} | |||
<script src="{{ asset('js/child.js') }}"></script> | |||
{% endblock %} | {% endblock %} | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 15:08, 28 January 2015
Template tags
`{{ ... }} enclose variables. Object properties are referenced with dot notation: {{obj.prop}}. Functions can be put in tags too.
Filters can be applied with the pipe character: {{ title|upper }}.
{% ... %}` encloses logic.
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
{# ... #} encloses comments.[1]
Headers and footers are located in base templates.
Child templates extend the base template to use the header and footers.[2]
A base template can contain default content. If the child template doesn't define a block that exists in the parent template, and the parent template contains default content in the block, the content from the parent template will be used.
Base template:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
Child template:
{# app/Resources/views/Blog/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
Extending a block in a child template
For example, a base template defines a core set of JavaScript and stylesheets for the site. A child template adds one stylesheet for a specific page on the site.
{# app/Resources/views/base.html.twig #}
{% block JavaScripts %}
<script src="{{ asset('js/core.js') }}"></script>
<script src="{{ asset('js/more.js') }}"></script>
{% endblock %}
{# app/Resources/views/child.html.twig #}
{% block JavaScripts %}
{{ parent() }}
<script src="{{ asset('js/child.js') }}"></script>
{% endblock %}
Notes
- ↑ Creating and Using Templates, Symfony documentation
- ↑ Template Inheritance and Layouts, Symfony documentation