trAvis - MANAGER
Edit File: 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="Content-Type" content="text/html; charset=utf-8" /> <title>Tips and Tricks — Jinja2 2.7.2 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"> var DOCUMENTATION_OPTIONS = { URL_ROOT: '', VERSION: '2.7.2', 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="Jinja2 2.7.2 documentation" href="index.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"> <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="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><a href="index.html">Jinja2 2.7.2 documentation</a> »</li> </ul> </div> <div class="document"> <div class="documentwrapper"> <div class="bodywrapper"> <div class="body"> <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 igored, 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 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"><div class="highlight"><pre><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">'master.html'</span> <span class="cp">%}{%</span> <span class="k">endif</span> -<span class="cp">%}</span> <span class="cp"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></span> <span class="nt"><title></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="nt"></title></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span> <span class="na">type=</span><span class="s">"text/css"</span><span class="nt">></span> <span class="cp">{%</span> <span class="k">block</span> <span class="nv">body</span> <span class="cp">%}</span> <span class="nt"><p></span>This is the page body.<span class="nt"></p></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"><div class="highlight"><pre><span class="nt"><ul></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="nt"><li</span> <span class="na">class=</span><span class="s">"</span><span class="cp">{{</span> <span class="nb">loop</span><span class="nv">.cycle</span><span class="o">(</span><span class="s1">'odd'</span><span class="o">,</span> <span class="s1">'even'</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="nt">></span><span class="cp">{{</span> <span class="nv">row</span> <span class="cp">}}</span><span class="nt"></li></span> <span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span> <span class="nt"></ul></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"><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">set</span> <span class="nv">active_page</span> <span class="o">=</span> <span class="s2">"index"</span> <span class="cp">%}</span> </pre></div> </div> <p>The layout template can then access <cite>active_page</cite>. Additionally it makes sense to defined a default for that variable:</p> <div class="highlight-html+jinja"><div class="highlight"><pre><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">'/'</span><span class="o">,</span> <span class="s1">'index'</span><span class="o">,</span> <span class="s1">'Index'</span><span class="o">),</span> <span class="o">(</span><span class="s1">'/downloads/'</span><span class="o">,</span> <span class="s1">'downloads'</span><span class="o">,</span> <span class="s1">'Downloads'</span><span class="o">),</span> <span class="o">(</span><span class="s1">'/about/'</span><span class="o">,</span> <span class="s1">'about'</span><span class="o">,</span> <span class="s1">'About'</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">'index'</span><span class="o">)</span> -<span class="cp">%}</span> ... <span class="nt"><ul</span> <span class="na">id=</span><span class="s">"navigation"</span><span class="nt">></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="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="s">"active"</span><span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"</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">"</span><span class="nt">></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="nt"></a></li></span> <span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span> <span class="nt"></ul></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"><div class="highlight"><pre><span class="nt"><table></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="nt"><tr></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="nt"><td</span> <span class="na">id=</span><span class="s">"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="nt">></span><span class="cp">{{</span> <span class="nv">cell</span> <span class="cp">}}</span><span class="nt"></td></span> <span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span> <span class="nt"></tr></span> <span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span> <span class="nt"></table></span> </pre></div> </div> </div> </div> </div> </div> </div> <div class="sphinxsidebar"> <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> <h3>This Page</h3> <ul class="this-page-menu"> <li><a href="_sources/tricks.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 2008, Armin Ronacher. Created using <a href="http://sphinx.pocoo.org/">Sphinx</a>. </div> </body> </html>