1-33

Symfony2 – Franz Jordán 2011
This section will teach you the philosophy behind including stylesheet and Javascript assets in
Symfony. Symfony also packages another library, called assetic, which follows this philosophy
but allows you to do much more interesting things with those assets. For more information on
using assetic see How to Use Assetic for Asset Management.
Start by adding two blocks to your base template that will hold your assets: one
called stylesheetsinside the head tag and another called javascripts just above the
closing body tag. These blocks will contain all of the stylesheets and Javascripts that you'll need
throughout your site:
{# 'app/Resources/views/base.html.twig' #}
{# ... #}
{% block stylesheets %}
{% endblock %}
{# ... #}
{% block javascripts %}
{% endblock %}
That's easy enough! But what if you need to include an extra stylesheet or Javascript from a child
template? For example, suppose you have a contact page and you need to include
a contact.cssstylesheet just on that page. From inside that contact page's template, do the
following:
{# src/Acme/DemoBundle/Resources/views/Contact/contact.html.twig #}
{# extends '::base.html.twig' #}
{% block stylesheets %}
{{ parent() }}
{% endblock %}
{# ... #}
In the child template, you simply override the stylesheets block and put your new stylesheet
tag inside of that block. Of course, since you want to add to the parent block's content (and not
actuallyreplace it), you should use the parent() Twig function to include everything from
the stylesheetsblock of the base template.
The end result is a page that includes both the main.css and contact.css stylesheets.
77