Part # 8 Template Inheritance with Twig and HTML5

Template Inheritance with Twig and three levels templating. Symfony supports HTML5

[Back to Learn Symfony 2]

Twig supports inheritance if you've ever used Smarty it works in a very similar way

The Main Layout


Our main template or layout has the standard common block for all pages, as Symfony 2 supports HTML 5 our base template will be HTML 5 compliant
open the file: app/Resources/views/base.html.twig




   
       
        {% block title %}Symfony 2 Tutorial{% endblock %}
       
        {% block stylesheets %}
           
        {% endblock %}
       
   
   

       
           
               


                    {% block navigation %}
                       
                           




                       
                    {% endblock %}
               



               
                   

{% block blog_title %}Symfony 2 Tutorial{% endblock %}


                   

{% block blog_tagline %}Symfony 2 Tutorial Quick Start{% endblock %}


               
           

           
                {% block body %}{% endblock %}
           
           
                {% block sidebar %}{% endblock %}
           

           


       

        {% block javascripts %}{% endblock %}
   



The javascript file: html5.js fixes the ie explore browser (previous to ie 9 version) lack of support for html5

The line

Adds some css to our template in web/css folder

In our child templates the first sentence will be:

 

{% extends '::base.html.twig' %}

 

The Blocks Layout

Now you can create a view template for a block that will appear on every page

src/My/HelloBundle/Resources/views/Default/layout.html.twig

{# src/My/HelloBundle/Resources/views/layout.html.twig #}
{% extends '::base.html.twig' %}

{% block sidebar %}
    Right Sidebar Content
{% endblock %}

The Page Layout


{# src/My/HelloBundle/Resources/views/Default/index.html.twig #}
{% extends '::base.html.twig' %}

{% block body %}
Welcome to my first FORM with Symfony 2
{% endblock %}



[Back to Learn Symfony 2]