mirror of https://github.com/mitsuhiko/flask.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.2 KiB
70 lines
2.2 KiB
.. _template-inheritance: |
|
|
|
Template Inheritance |
|
==================== |
|
|
|
The most powerful part of Jinja is template inheritance. Template inheritance |
|
allows you to build a base "skeleton" template that contains all the common |
|
elements of your site and defines **blocks** that child templates can override. |
|
|
|
Sounds complicated but is very basic. It's easiest to understand it by starting |
|
with an example. |
|
|
|
|
|
Base Template |
|
------------- |
|
|
|
This template, which we'll call ``layout.html``, defines a simple HTML skeleton |
|
document that you might use for a simple two-column page. It's the job of |
|
"child" templates to fill the empty blocks with content: |
|
|
|
.. sourcecode:: html+jinja |
|
|
|
<!doctype html> |
|
<html> |
|
<head> |
|
{% block head %} |
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> |
|
<title>{% block title %}{% endblock %} - My Webpage</title> |
|
{% endblock %} |
|
</head> |
|
<body> |
|
<div id="content">{% block content %}{% endblock %}</div> |
|
<div id="footer"> |
|
{% block footer %} |
|
© Copyright 2010 by <a href="http://domain.invalid/">you</a>. |
|
{% endblock %} |
|
</div> |
|
</body> |
|
</html> |
|
|
|
In this example, the ``{% block %}`` tags define four blocks that child templates |
|
can fill in. All the `block` tag does is tell the template engine that a |
|
child template may override those portions of the template. |
|
|
|
Child Template |
|
-------------- |
|
|
|
A child template might look like this: |
|
|
|
.. sourcecode:: html+jinja |
|
|
|
{% extends "layout.html" %} |
|
{% block title %}Index{% endblock %} |
|
{% block head %} |
|
{{ super() }} |
|
<style type="text/css"> |
|
.important { color: #336699; } |
|
</style> |
|
{% endblock %} |
|
{% block content %} |
|
<h1>Index</h1> |
|
<p class="important"> |
|
Welcome on my awesome homepage. |
|
{% endblock %} |
|
|
|
The ``{% extends %}`` tag is the key here. It tells the template engine that |
|
this template "extends" another template. When the template system evaluates |
|
this template, first it locates the parent. The extends tag must be the |
|
first tag in the template. To render the contents of a block defined in |
|
the parent template, use ``{{ super() }}``.
|
|
|