@@ -860,25 +860,30 @@ In practice, the ``base.html.twig`` template would look like this:
860
860
<head>
861
861
<meta charset="UTF-8">
862
862
<title>{% block title %}My Application{% endblock %}</title>
863
+ {% block stylesheets %}
864
+ <link rel="stylesheet" type="text/css" href="/css/base.css"/>
865
+ {% endblock
863
866
</head>
864
867
<body>
865
- <div id="sidebar">
866
- {% block sidebar %}
867
- <ul>
868
- <li><a href="{{ path('homepage') }}">Home</a></li>
869
- <li><a href="{{ path('blog_index') }}">Blog</a></li>
870
- </ul>
871
- {% endblock %}
872
- </div>
873
-
874
- <div id="content">
875
- {% block body %}{% endblock %}
876
- </div>
868
+ {% block body %}
869
+ <div id="sidebar">
870
+ {% block sidebar %}
871
+ <ul>
872
+ <li><a href="{{ path('homepage') }}">Home</a></li>
873
+ <li><a href="{{ path('blog_index') }}">Blog</a></li>
874
+ </ul>
875
+ {% endblock %}
876
+ </div>
877
+
878
+ <div id="content">
879
+ {% block content %}{% endblock %}
880
+ </div>
881
+ {% endblock %}
877
882
</body>
878
883
</html>
879
884
880
885
The `Twig block tag `_ defines the page sections that can be overridden in the
881
- child templates. They can be empty, like the ``body `` block or define a default
886
+ child templates. They can be empty, like the ``content `` block or define a default
882
887
content, like the ``title `` block, which is displayed when child templates don't
883
888
override them.
884
889
@@ -889,14 +894,14 @@ The ``blog/layout.html.twig`` template could be like this:
889
894
{# templates/blog/layout.html.twig #}
890
895
{% extends 'base.html.twig' %}
891
896
892
- {% block body %}
897
+ {% block content %}
893
898
<h1>Blog</h1>
894
899
895
- {% block content %}{% endblock %}
900
+ {% block page_contents %}{% endblock %}
896
901
{% endblock %}
897
902
898
903
The template extends from ``base.html.twig `` and only defines the contents of
899
- the ``body `` block. The rest of the parent template blocks will display their
904
+ the ``content `` block. The rest of the parent template blocks will display their
900
905
default contents. However, they can be overridden by the third-level inheritance
901
906
template, such as ``blog/index.html.twig ``, which displays the blog index:
902
907
@@ -907,22 +912,38 @@ template, such as ``blog/index.html.twig``, which displays the blog index:
907
912
908
913
{% block title %}Blog Index{% endblock %}
909
914
910
- {% block content %}
915
+ {% block page_contents %}
911
916
{% for article in articles %}
912
917
<h2>{{ article.title }}</h2>
913
918
<p>{{ article.body }}</p>
914
919
{% endfor %}
915
920
{% endblock %}
916
921
917
922
This template extends from the second-level template (``blog/layout.html.twig ``)
918
- but overrides blocks of different parent templates: ``content `` from
923
+ but overrides blocks of different parent templates: ``page_contents `` from
919
924
``blog/layout.html.twig `` and ``title `` from ``base.html.twig ``.
920
925
921
926
When you render the ``blog/index.html.twig `` template, Symfony uses three
922
927
different templates to create the final contents. This inheritance mechanism
923
928
boosts your productivity because each template includes only its unique contents
924
929
and leaves the repeated contents and HTML structure to some parent templates.
925
930
931
+ .. caution ::
932
+
933
+ When using ``extends ``, a child template is forbidden to define template
934
+ parts outside of a block. The following code throws a ``SyntaxError ``:
935
+
936
+ .. code-block :: html+twig
937
+
938
+ {# app/Resources/views/blog/index.html.twig #}
939
+ {% extends 'base.html.twig' %}
940
+
941
+ {# the line below is not captured by a "block" tag #}
942
+ <div class="alert">Some Alert</div>
943
+
944
+ {# the following is valid #}
945
+ {% block content %}My cool blog posts{% endblock %}
946
+
926
947
Read the `Twig template inheritance `_ docs to learn more about how to reuse
927
948
parent block contents when overriding templates and other advanced features.
928
949
0 commit comments