How to Organize Your Twig Templates Using Inheritance

One common way to use inheritance is to use a three-level approach. This method works perfectly with the three different types of templates that were just covered:

• Create an app/Resources/views/base.html.twig file that contains the main layout for your application (like in the previous example). Internally, this template is called base.html.twig;

• Create a template for each "section" of your site. For example, the blog functionality would have a template called blog/layout.html.twig that contains only blog section-specific elements;

  1
  2
  3
  4
  5
  6
  7
  8

  {# app/Resources/views/blog/layout.html.twig #}
  {% extends 'base.html.twig' %}
  
  {% block body %}
      <h1>Blog Application</h1>
  
      {% block content %}{% endblock %}
  {% endblock %}

• Create individual templates for each page and make each extend the appropriate section template. For example, the "index" page would be called something close to blog/index.html.twig and list the actual blog posts.

  1
  2
  3
  4
  5
  6
  7
  8
  9

  {# app/Resources/views/blog/index.html.twig #}
  {% extends 'blog/layout.html.twig' %}
  
  {% block content %}
      {% for entry in blog_entries %}
          <h2>{{ entry.title }}</h2>
          <p>{{ entry.body }}</p>
      {% endfor %}
  {% endblock %}

Notice that this template extends the section template (blog/layout.html.twig) which in turn extends the base application layout (base.html.twig). This is the common three-level inheritance model.

When building your application, you may choose to follow this method or simply make each page template extend the base application template directly (e.g. {% extends 'base.html.twig' %}). The three-template model is a best-practice method used by vendor bundles so that the base template for a bundle can be easily overridden to properly extend your application's base layout.