diff options
Diffstat (limited to 'app/static/doc/flask-docs/patterns/templateinheritance.html')
-rw-r--r-- | app/static/doc/flask-docs/patterns/templateinheritance.html | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/app/static/doc/flask-docs/patterns/templateinheritance.html b/app/static/doc/flask-docs/patterns/templateinheritance.html new file mode 100644 index 0000000..6075905 --- /dev/null +++ b/app/static/doc/flask-docs/patterns/templateinheritance.html @@ -0,0 +1,173 @@ + +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> + + +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + + <title>Template Inheritance — Flask 0.8 documentation</title> + + <link rel="stylesheet" href="../_static/flasky.css" type="text/css" /> + <link rel="stylesheet" href="../_static/pygments.css" type="text/css" /> + + <script type="text/javascript"> + var DOCUMENTATION_OPTIONS = { + URL_ROOT: '../', + VERSION: '0.8', + COLLAPSE_INDEX: false, + FILE_SUFFIX: '.html', + HAS_SOURCE: true + }; + </script> + <script type="text/javascript" src="../_static/jquery.js"></script> + <script type="text/javascript" src="../_static/underscore.js"></script> + <script type="text/javascript" src="../_static/doctools.js"></script> + <link rel="top" title="Flask 0.8 documentation" href="../index.html" /> + <link rel="up" title="Patterns for Flask" href="index.html" /> + <link rel="next" title="Message Flashing" href="flashing.html" /> + <link rel="prev" title="Form Validation with WTForms" href="wtforms.html" /> + + + <link rel="apple-touch-icon" href="../_static/touch-icon.png" /> + + <link media="only screen and (max-device-width: 480px)" href="../_static/small_flask.css" type= "text/css" rel="stylesheet" /> + + </head> + <body> + <div class="related"> + <h3>Navigation</h3> + <ul> + <li class="right" style="margin-right: 10px"> + <a href="../genindex.html" title="General Index" + accesskey="I">index</a></li> + <li class="right" > + <a href="flashing.html" title="Message Flashing" + accesskey="N">next</a> |</li> + <li class="right" > + <a href="wtforms.html" title="Form Validation with WTForms" + accesskey="P">previous</a> |</li> + <li><a href="../index.html">Flask 0.8 documentation</a> »</li> + <li><a href="index.html" accesskey="U">Patterns for Flask</a> »</li> + </ul> + </div> + + <div class="document"> + <div class="documentwrapper"> + <div class="bodywrapper"> + <div class="body"> + + <div class="section" id="template-inheritance"> +<span id="id1"></span><h1>Template Inheritance<a class="headerlink" href="#template-inheritance" title="Permalink to this headline">¶</a></h1> +<p>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 <strong>blocks</strong> that child templates can override.</p> +<p>Sounds complicated but is very basic. It’s easiest to understand it by starting +with an example.</p> +<div class="section" id="base-template"> +<h2>Base Template<a class="headerlink" href="#base-template" title="Permalink to this headline">¶</a></h2> +<p>This template, which we’ll call <tt class="docutils literal"><span class="pre">layout.html</span></tt>, 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:</p> +<div class="highlight-html+jinja"><div class="highlight"><pre><span class="cp"><!doctype html></span> +<span class="nt"><html></span> + <span class="nt"><head></span> + <span class="cp">{%</span> <span class="k">block</span> <span class="nv">head</span> <span class="cp">%}</span> + <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">'static'</span><span class="o">,</span> <span class="nv">filename</span><span class="o">=</span><span class="s1">'style.css'</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="nt">></span> + <span class="nt"><title></span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}{%</span> <span class="k">endblock</span> <span class="cp">%}</span> - My Webpage<span class="nt"></title></span> + <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> + <span class="nt"></head></span> +<span class="nt"><body></span> + <span class="nt"><div</span> <span class="na">id=</span><span class="s">"content"</span><span class="nt">></span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="nt"></div></span> + <span class="nt"><div</span> <span class="na">id=</span><span class="s">"footer"</span><span class="nt">></span> + <span class="cp">{%</span> <span class="k">block</span> <span class="nv">footer</span> <span class="cp">%}</span> + <span class="ni">&copy;</span> Copyright 2010 by <span class="nt"><a</span> <span class="na">href=</span><span class="s">"http://domain.invalid/"</span><span class="nt">></span>you<span class="nt"></a></span>. + <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> + <span class="nt"></div></span> +<span class="nt"></body></span> +</pre></div> +</div> +<p>In this example, the <tt class="docutils literal"><span class="pre">{%</span> <span class="pre">block</span> <span class="pre">%}</span></tt> tags define four blocks that child templates +can fill in. All the <cite>block</cite> tag does is tell the template engine that a +child template may override those portions of the template.</p> +</div> +<div class="section" id="child-template"> +<h2>Child Template<a class="headerlink" href="#child-template" title="Permalink to this headline">¶</a></h2> +<p>A child template might look like this:</p> +<div class="highlight-html+jinja"><div class="highlight"><pre><span class="cp">{%</span> <span class="k">extends</span> <span class="s2">"layout.html"</span> <span class="cp">%}</span> +<span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>Index<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> +<span class="cp">{%</span> <span class="k">block</span> <span class="nv">head</span> <span class="cp">%}</span> + <span class="cp">{{</span> <span class="nb">super</span><span class="o">()</span> <span class="cp">}}</span> + <span class="nt"><style </span><span class="na">type=</span><span class="s">"text/css"</span><span class="nt">></span> + <span class="nc">.important</span> <span class="p">{</span> <span class="k">color</span><span class="o">:</span> <span class="m">#336699</span><span class="p">;</span> <span class="p">}</span> + <span class="nt"></style></span> +<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> +<span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span> + <span class="nt"><h1></span>Index<span class="nt"></h1></span> + <span class="nt"><p</span> <span class="na">class=</span><span class="s">"important"</span><span class="nt">></span> + Welcome on my awesome homepage. +<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span> +</pre></div> +</div> +<p>The <tt class="docutils literal"><span class="pre">{%</span> <span class="pre">extends</span> <span class="pre">%}</span></tt> 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 <tt class="docutils literal"><span class="pre">{{</span> <span class="pre">super()</span> <span class="pre">}}</span></tt>.</p> +</div> +</div> + + + </div> + </div> + </div> + <div class="sphinxsidebar"> + <div class="sphinxsidebarwrapper"><p class="logo"><a href="../index.html"> + <img class="logo" src="../_static/flask.png" alt="Logo"/> +</a></p> + <h3><a href="../index.html">Table Of Contents</a></h3> + <ul> +<li><a class="reference internal" href="#">Template Inheritance</a><ul> +<li><a class="reference internal" href="#base-template">Base Template</a></li> +<li><a class="reference internal" href="#child-template">Child Template</a></li> +</ul> +</li> +</ul> +<h3>Related Topics</h3> +<ul> + <li><a href="../index.html">Documentation overview</a><ul> + <li><a href="index.html">Patterns for Flask</a><ul> + <li>Previous: <a href="wtforms.html" title="previous chapter">Form Validation with WTForms</a></li> + <li>Next: <a href="flashing.html" title="next chapter">Message Flashing</a></li> + </ul></li> + </ul></li> +</ul> + <h3>This Page</h3> + <ul class="this-page-menu"> + <li><a href="../_sources/patterns/templateinheritance.txt" + rel="nofollow">Show Source</a></li> + </ul> +<div id="searchbox" style="display: none"> + <h3>Quick search</h3> + <form class="search" action="../search.html" method="get"> + <input type="text" name="q" /> + <input type="submit" value="Go" /> + <input type="hidden" name="check_keywords" value="yes" /> + <input type="hidden" name="area" value="default" /> + </form> + <p class="searchtip" style="font-size: 90%"> + Enter search terms or a module, class or function name. + </p> +</div> +<script type="text/javascript">$('#searchbox').show(0);</script> + </div> + </div> + <div class="clearer"></div> + </div> + <div class="footer"> + © Copyright 2010, Armin Ronacher. + Created using <a href="http://sphinx.pocoo.org/">Sphinx</a>. + </div> + </body> +</html>
\ No newline at end of file |