1Template Inheritance 2==================== 3 4The most powerful part of Jinja is template inheritance. Template inheritance 5allows you to build a base "skeleton" template that contains all the common 6elements of your site and defines **blocks** that child templates can override. 7 8Sounds complicated but is very basic. It's easiest to understand it by starting 9with an example. 10 11 12Base Template 13------------- 14 15This template, which we'll call :file:`layout.html`, defines a simple HTML skeleton 16document that you might use for a simple two-column page. It's the job of 17"child" templates to fill the empty blocks with content: 18 19.. sourcecode:: html+jinja 20 21 <!doctype html> 22 <html> 23 <head> 24 {% block head %} 25 <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> 26 <title>{% block title %}{% endblock %} - My Webpage</title> 27 {% endblock %} 28 </head> 29 <body> 30 <div id="content">{% block content %}{% endblock %}</div> 31 <div id="footer"> 32 {% block footer %} 33 © Copyright 2010 by <a href="http://domain.invalid/">you</a>. 34 {% endblock %} 35 </div> 36 </body> 37 </html> 38 39In this example, the ``{% block %}`` tags define four blocks that child templates 40can fill in. All the `block` tag does is tell the template engine that a 41child template may override those portions of the template. 42 43Child Template 44-------------- 45 46A child template might look like this: 47 48.. sourcecode:: html+jinja 49 50 {% extends "layout.html" %} 51 {% block title %}Index{% endblock %} 52 {% block head %} 53 {{ super() }} 54 <style type="text/css"> 55 .important { color: #336699; } 56 </style> 57 {% endblock %} 58 {% block content %} 59 <h1>Index</h1> 60 <p class="important"> 61 Welcome on my awesome homepage. 62 {% endblock %} 63 64The ``{% extends %}`` tag is the key here. It tells the template engine that 65this template "extends" another template. When the template system evaluates 66this template, first it locates the parent. The extends tag must be the 67first tag in the template. To render the contents of a block defined in 68the parent template, use ``{{ super() }}``. 69