@@ -860,25 +860,30 @@ In practice, the ``base.html.twig`` template would look like this:
860860 <head>
861861 <meta charset="UTF-8">
862862 <title>{% block title %}My Application{% endblock %}</title>
863+ {% block stylesheets %}
864+ <link rel="stylesheet" type="text/css" href="/css/base.css"/>
865+ {% endblock
863866 </head>
864867 <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 %}
877882 </body>
878883 </html>
879884
880885The `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
882887content, like the ``title `` block, which is displayed when child templates don't
883888override them.
884889
@@ -889,14 +894,14 @@ The ``blog/layout.html.twig`` template could be like this:
889894 {# templates/blog/layout.html.twig #}
890895 {% extends 'base.html.twig' %}
891896
892- {% block body %}
897+ {% block content %}
893898 <h1>Blog</h1>
894899
895- {% block content %}{% endblock %}
900+ {% block page_contents %}{% endblock %}
896901 {% endblock %}
897902
898903The 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
900905default contents. However, they can be overridden by the third-level inheritance
901906template, such as ``blog/index.html.twig ``, which displays the blog index:
902907
@@ -907,22 +912,38 @@ template, such as ``blog/index.html.twig``, which displays the blog index:
907912
908913 {% block title %}Blog Index{% endblock %}
909914
910- {% block content %}
915+ {% block page_contents %}
911916 {% for article in articles %}
912917 <h2>{{ article.title }}</h2>
913918 <p>{{ article.body }}</p>
914919 {% endfor %}
915920 {% endblock %}
916921
917922This 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
919924``blog/layout.html.twig `` and ``title `` from ``base.html.twig ``.
920925
921926When you render the ``blog/index.html.twig `` template, Symfony uses three
922927different templates to create the final contents. This inheritance mechanism
923928boosts your productivity because each template includes only its unique contents
924929and leaves the repeated contents and HTML structure to some parent templates.
925930
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+
926947Read the `Twig template inheritance `_ docs to learn more about how to reuse
927948parent block contents when overriding templates and other advanced features.
928949
0 commit comments