diff options
author | Sebastian Silva <sebastian@sugarlabs.org> | 2011-10-12 00:54:31 (GMT) |
---|---|---|
committer | Sebastian Silva <sebastian@sugarlabs.org> | 2011-10-12 00:54:31 (GMT) |
commit | fe1a1eb79bf0f1df8bbc56d2402e32061af79d06 (patch) | |
tree | d39e3b7780e4b6949250d490a4a7a874f788981c /studio/static/doc/flask-docs/_sources/patterns/templateinheritance.txt | |
parent | 5861585e94a32b3032ac473804bf90c6e1363940 (diff) |
Tidy up code a bit - added documentation
Diffstat (limited to 'studio/static/doc/flask-docs/_sources/patterns/templateinheritance.txt')
-rw-r--r-- | studio/static/doc/flask-docs/_sources/patterns/templateinheritance.txt | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/studio/static/doc/flask-docs/_sources/patterns/templateinheritance.txt b/studio/static/doc/flask-docs/_sources/patterns/templateinheritance.txt new file mode 100644 index 0000000..70015ec --- /dev/null +++ b/studio/static/doc/flask-docs/_sources/patterns/templateinheritance.txt @@ -0,0 +1,69 @@ +.. _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> + +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() }}``. |