Web   ·   Wiki   ·   Activities   ·   Blog   ·   Lists   ·   Chat   ·   Meeting   ·   Bugs   ·   Git   ·   Translate   ·   Archive   ·   People   ·   Donate
summaryrefslogtreecommitdiffstats
path: root/app/static/doc/flask-docs/patterns/templateinheritance.html
diff options
context:
space:
mode:
Diffstat (limited to 'app/static/doc/flask-docs/patterns/templateinheritance.html')
-rw-r--r--app/static/doc/flask-docs/patterns/templateinheritance.html173
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 &mdash; 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> &raquo;</li>
+ <li><a href="index.html" accesskey="U">Patterns for Flask</a> &raquo;</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 &#8220;skeleton&#8221; 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&#8217;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&#8217;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&#8217;s the job of
+&#8220;child&#8221; templates to fill the empty blocks with content:</p>
+<div class="highlight-html+jinja"><div class="highlight"><pre><span class="cp">&lt;!doctype html&gt;</span>
+<span class="nt">&lt;html&gt;</span>
+ <span class="nt">&lt;head&gt;</span>
+ <span class="cp">{%</span> <span class="k">block</span> <span class="nv">head</span> <span class="cp">%}</span>
+ <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">&#39;static&#39;</span><span class="o">,</span> <span class="nv">filename</span><span class="o">=</span><span class="s1">&#39;style.css&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="nt">&gt;</span>
+ <span class="nt">&lt;title&gt;</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">&lt;/title&gt;</span>
+ <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
+ <span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+ <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;content&quot;</span><span class="nt">&gt;</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">&lt;/div&gt;</span>
+ <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;footer&quot;</span><span class="nt">&gt;</span>
+ <span class="cp">{%</span> <span class="k">block</span> <span class="nv">footer</span> <span class="cp">%}</span>
+ <span class="ni">&amp;copy;</span> Copyright 2010 by <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;http://domain.invalid/&quot;</span><span class="nt">&gt;</span>you<span class="nt">&lt;/a&gt;</span>.
+ <span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
+ <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/body&gt;</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">&quot;layout.html&quot;</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">&lt;style </span><span class="na">type=</span><span class="s">&quot;text/css&quot;</span><span class="nt">&gt;</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">&lt;/style&gt;</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">&lt;h1&gt;</span>Index<span class="nt">&lt;/h1&gt;</span>
+ <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">&quot;important&quot;</span><span class="nt">&gt;</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 &#8220;extends&#8221; 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">
+ &copy; Copyright 2010, Armin Ronacher.
+ Created using <a href="http://sphinx.pocoo.org/">Sphinx</a>.
+ </div>
+ </body>
+</html> \ No newline at end of file