Hacked By AnonymousFox

Current Path : /usr/share/doc/python3-jinja2/html/
Upload File :
Current File : //usr/share/doc/python3-jinja2/html/tricks.html

<!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="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tips and Tricks &#8212; Jinja2 2.10.1 documentation</title>
    <link rel="stylesheet" href="_static/jinja.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <script type="text/javascript" id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></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="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Frequently Asked Questions" href="faq.html" />
    <link rel="prev" title="Switching from other Template Engines" href="switching.html" /> 
  </head><body>
    <div class="related" role="navigation" aria-label="related navigation">
      <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="py-modindex.html" title="Python Module Index"
             >modules</a> |</li>
        <li class="right" >
          <a href="faq.html" title="Frequently Asked Questions"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="switching.html" title="Switching from other Template Engines"
             accesskey="P">previous</a> |</li>
        <li class="nav-item nav-item-0"><a href="index.html">Jinja2 2.10.1 documentation</a> &#187;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <div class="section" id="tips-and-tricks">
<h1>Tips and Tricks<a class="headerlink" href="#tips-and-tricks" title="Permalink to this headline">¶</a></h1>
<p>This part of the documentation shows some tips and tricks for Jinja2
templates.</p>
<div class="section" id="null-master-fallback">
<span id="id1"></span><h2>Null-Master Fallback<a class="headerlink" href="#null-master-fallback" title="Permalink to this headline">¶</a></h2>
<p>Jinja2 supports dynamic inheritance and does not distinguish between parent
and child template as long as no <cite>extends</cite> tag is visited.  While this leads
to the surprising behavior that everything before the first <cite>extends</cite> tag
including whitespace is printed out instead of being ignored, it can be used
for a neat trick.</p>
<p>Usually child templates extend from one template that adds a basic HTML
skeleton.  However it’s possible to put the <cite>extends</cite> tag into an <cite>if</cite> tag to
only extend from the layout template if the <cite>standalone</cite> variable evaluates
to false which it does per default if it’s not defined.  Additionally a very
basic skeleton is added to the file so that if it’s indeed rendered with
<cite>standalone</cite> set to <cite>True</cite> a very basic HTML skeleton is added:</p>
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">if</span> <span class="k">not</span> <span class="nv">standalone</span> <span class="cp">%}{%</span> <span class="k">extends</span> <span class="s1">&#39;master.html&#39;</span> <span class="cp">%}{%</span> <span class="k">endif</span> -<span class="cp">%}</span>
<span class="cp">&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>The Page Title<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;style.css&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">block</span> <span class="nv">body</span> <span class="cp">%}</span>
  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>This is the page body.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</pre></div>
</div>
</div>
<div class="section" id="alternating-rows">
<h2>Alternating Rows<a class="headerlink" href="#alternating-rows" title="Permalink to this headline">¶</a></h2>
<p>If you want to have different styles for each row of a table or
list you can use the <cite>cycle</cite> method on the <cite>loop</cite> object:</p>
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">for</span> <span class="nv">row</span> <span class="k">in</span> <span class="nv">rows</span> <span class="cp">%}</span>
  <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nb">loop</span><span class="nv">.cycle</span><span class="o">(</span><span class="s1">&#39;odd&#39;</span><span class="o">,</span> <span class="s1">&#39;even&#39;</span><span class="o">)</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">row</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</pre></div>
</div>
<p><cite>cycle</cite> can take an unlimited amount of strings.  Each time this
tag is encountered the next item from the list is rendered.</p>
</div>
<div class="section" id="highlighting-active-menu-items">
<h2>Highlighting Active Menu Items<a class="headerlink" href="#highlighting-active-menu-items" title="Permalink to this headline">¶</a></h2>
<p>Often you want to have a navigation bar with an active navigation
item.  This is really simple to achieve.  Because assignments outside
of <cite>block</cite>s in child templates are global and executed before the layout
template is evaluated it’s possible to define the active menu item in the
child template:</p>
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><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">set</span> <span class="nv">active_page</span> <span class="o">=</span> <span class="s2">&quot;index&quot;</span> <span class="cp">%}</span>
</pre></div>
</div>
<p>The layout template can then access <cite>active_page</cite>.  Additionally it makes
sense to define a default for that variable:</p>
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">set</span> <span class="nv">navigation_bar</span> <span class="o">=</span> <span class="o">[</span>
    <span class="o">(</span><span class="s1">&#39;/&#39;</span><span class="o">,</span> <span class="s1">&#39;index&#39;</span><span class="o">,</span> <span class="s1">&#39;Index&#39;</span><span class="o">),</span>
    <span class="o">(</span><span class="s1">&#39;/downloads/&#39;</span><span class="o">,</span> <span class="s1">&#39;downloads&#39;</span><span class="o">,</span> <span class="s1">&#39;Downloads&#39;</span><span class="o">),</span>
    <span class="o">(</span><span class="s1">&#39;/about/&#39;</span><span class="o">,</span> <span class="s1">&#39;about&#39;</span><span class="o">,</span> <span class="s1">&#39;About&#39;</span><span class="o">)</span>
<span class="o">]</span> -<span class="cp">%}</span>
<span class="cp">{%</span> <span class="k">set</span> <span class="nv">active_page</span> <span class="o">=</span> <span class="nv">active_page</span><span class="o">|</span><span class="nf">default</span><span class="o">(</span><span class="s1">&#39;index&#39;</span><span class="o">)</span> -<span class="cp">%}</span>
...
<span class="p">&lt;</span><span class="nt">ul</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;navigation&quot;</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">for</span> <span class="nv">href</span><span class="o">,</span> <span class="nv">id</span><span class="o">,</span> <span class="nv">caption</span> <span class="k">in</span> <span class="nv">navigation_bar</span> <span class="cp">%}</span>
  <span class="p">&lt;</span><span class="nt">li</span><span class="cp">{%</span> <span class="k">if</span> <span class="nv">id</span> <span class="o">==</span> <span class="nv">active_page</span> <span class="cp">%}</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;active&quot;</span><span class="cp">{%</span> <span class="k">endif</span>
  <span class="cp">%}</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nv">href</span><span class="o">|</span><span class="nf">e</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">caption</span><span class="o">|</span><span class="nf">e</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
<span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
...
</pre></div>
</div>
</div>
<div class="section" id="accessing-the-parent-loop">
<span id="id2"></span><h2>Accessing the parent Loop<a class="headerlink" href="#accessing-the-parent-loop" title="Permalink to this headline">¶</a></h2>
<p>The special <cite>loop</cite> variable always points to the innermost loop.  If it’s
desired to have access to an outer loop it’s possible to alias it:</p>
<div class="highlight-html+jinja notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">table</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">for</span> <span class="nv">row</span> <span class="k">in</span> <span class="nv">table</span> <span class="cp">%}</span>
  <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
  <span class="cp">{%</span> <span class="k">set</span> <span class="nv">rowloop</span> <span class="o">=</span> <span class="nb">loop</span> <span class="cp">%}</span>
  <span class="cp">{%</span> <span class="k">for</span> <span class="nv">cell</span> <span class="k">in</span> <span class="nv">row</span> <span class="cp">%}</span>
    <span class="p">&lt;</span><span class="nt">td</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;cell-</span><span class="cp">{{</span> <span class="nv">rowloop.index</span> <span class="cp">}}</span><span class="s">-</span><span class="cp">{{</span> <span class="nb">loop</span><span class="nv">.index</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="p">&gt;</span><span class="cp">{{</span> <span class="nv">cell</span> <span class="cp">}}</span><span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
  <span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
  <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
<span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper"><p class="logo"><a href="index.html">
  <img class="logo" src="_static/jinja-small.png" alt="Logo"/>
</a></p>
  <h3><a href="index.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">Tips and Tricks</a><ul>
<li><a class="reference internal" href="#null-master-fallback">Null-Master Fallback</a></li>
<li><a class="reference internal" href="#alternating-rows">Alternating Rows</a></li>
<li><a class="reference internal" href="#highlighting-active-menu-items">Highlighting Active Menu Items</a></li>
<li><a class="reference internal" href="#accessing-the-parent-loop">Accessing the parent Loop</a></li>
</ul>
</li>
</ul>
<h3>Related Topics</h3>
<ul>
  <li><a href="index.html">Documentation overview</a><ul>
      <li>Previous: <a href="switching.html" title="previous chapter">Switching from other Template Engines</a></li>
      <li>Next: <a href="faq.html" title="next chapter">Frequently Asked Questions</a></li>
  </ul></li>
</ul>
  <div role="note" aria-label="source link">
    <h3>This Page</h3>
    <ul class="this-page-menu">
      <li><a href="_sources/tricks.rst.txt"
            rel="nofollow">Show Source</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <div class="searchformwrapper">
    <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>
    </div>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="footer">
      &copy; Copyright 2008, Armin Ronacher.
      Created using <a href="http://sphinx.pocoo.org/">Sphinx</a>.
    </div>
  </body>
</html>

Hacked By AnonymousFox1.0, Coded By AnonymousFox