Skip to content

Commit 4d472c2

Browse files
committed
Added a reference about including JS and CSS files in PHP templates
1 parent 3293286 commit 4d472c2

File tree

1 file changed

+57
-24
lines changed

1 file changed

+57
-24
lines changed

book/templating.rst

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1059,43 +1059,76 @@ one called ``stylesheets`` inside the ``head`` tag and another called ``javascri
10591059
just above the closing ``body`` tag. These blocks will contain all of the
10601060
stylesheets and JavaScripts that you'll need throughout your site:
10611061

1062-
.. code-block:: html+jinja
1062+
.. code-configuration::
10631063

1064-
{# app/Resources/views/base.html.twig #}
1065-
<html>
1066-
<head>
1067-
{# ... #}
1064+
.. code-block:: html+jinja
10681065

1069-
{% block stylesheets %}
1070-
<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
1071-
{% endblock %}
1072-
</head>
1073-
<body>
1074-
{# ... #}
1066+
{# app/Resources/views/base.html.twig #}
1067+
<html>
1068+
<head>
1069+
{# ... #}
10751070

1076-
{% block javascripts %}
1077-
<script src="{{ asset('js/main.js') }}"></script>
1078-
{% endblock %}
1079-
</body>
1080-
</html>
1071+
{% block stylesheets %}
1072+
<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
1073+
{% endblock %}
1074+
</head>
1075+
<body>
1076+
{# ... #}
1077+
1078+
{% block javascripts %}
1079+
<script src="{{ asset('js/main.js') }}"></script>
1080+
{% endblock %}
1081+
</body>
1082+
</html>
1083+
1084+
.. code-block:: php
1085+
1086+
// app/Resources/views/base.html.php
1087+
<html>
1088+
<head>
1089+
<?php ... ?>
1090+
1091+
<?php $view['slots']->start('stylesheets') ?>
1092+
<link href="<?php echo $view['assets']->getUrl('css/main.css') ?>" rel="stylesheet" />
1093+
<?php $view['slots']->stop() ?>
1094+
</head>
1095+
<body>
1096+
<?php ... ?>
1097+
1098+
<?php $view['slots']->start('javascripts') ?>
1099+
<script src="<?php echo $view['assets']->getUrl('js/main.js') ?>"></script>
1100+
<?php $view['slots']->stop() ?>
1101+
</body>
1102+
</html>
10811103
10821104
That's easy enough! But what if you need to include an extra stylesheet or
10831105
JavaScript from a child template? For example, suppose you have a contact
10841106
page and you need to include a ``contact.css`` stylesheet *just* on that
10851107
page. From inside that contact page's template, do the following:
10861108

1087-
.. code-block:: html+jinja
1109+
.. code-configuration::
10881110

1089-
{# app/Resources/views/Contact/contact.html.twig #}
1090-
{% extends 'base.html.twig' %}
1111+
.. code-block:: html+jinja
10911112

1092-
{% block stylesheets %}
1093-
{{ parent() }}
1113+
{# app/Resources/views/Contact/contact.html.twig #}
1114+
{% extends 'base.html.twig' %}
10941115

1095-
<link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
1096-
{% endblock %}
1116+
{% block stylesheets %}
1117+
{{ parent() }}
10971118

1098-
{# ... #}
1119+
<link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
1120+
{% endblock %}
1121+
1122+
{# ... #}
1123+
1124+
.. code-block:: php
1125+
1126+
// app/Resources/views/Contact/contact.html.twig
1127+
<?php $view->extend('base.html.php') ?>
1128+
1129+
<?php $view['slots']->start('stylesheets') ?>
1130+
<link href="<?php echo $view['assets']->getUrl('css/contact.css') ?>" rel="stylesheet" />
1131+
<?php $view['slots']->stop() ?>
10991132
11001133
In the child template, you simply override the ``stylesheets`` block and
11011134
put your new stylesheet tag inside of that block. Of course, since you want

0 commit comments

Comments
 (0)