Tips and Tricks

This part of the documentation shows some tips and tricks for Jinja2templates.

Null-Master Fallback

Jinja2 supports dynamic inheritance and does not distinguish between parentand child template as long as no extends tag is visited. While this leadsto the surprising behavior that everything before the first extends tagincluding whitespace is printed out instead of being ignored, it can be usedfor a neat trick.

Usually child templates extend from one template that adds a basic HTMLskeleton. However it’s possible to put the extends tag into an if tag toonly extend from the layout template if the standalone variable evaluatesto false which it does per default if it’s not defined. Additionally a verybasic skeleton is added to the file so that if it’s indeed rendered withstandalone set to True a very basic HTML skeleton is added:

  1. {% if not standalone %}{% extends 'master.html' %}{% endif -%}
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <title>{% block title %}The Page Title{% endblock %}</title>
  4. <link rel="stylesheet" href="style.css" type="text/css">
  5. {% block body %}
  6.   <p>This is the page body.</p>
  7. {% endblock %}

Alternating Rows

If you want to have different styles for each row of a table orlist you can use the cycle method on the loop object:

  1. <ul>
  2. {% for row in rows %}
  3.   <li class="{{ loop.cycle('odd', 'even') }}">{{ row }}</li>
  4. {% endfor %}
  5. </ul>

cycle can take an unlimited amount of strings. Each time thistag is encountered the next item from the list is rendered.

Highlighting Active Menu Items

Often you want to have a navigation bar with an active navigationitem. This is really simple to achieve. Because assignments outsideof _block_s in child templates are global and executed before the layouttemplate is evaluated it’s possible to define the active menu item in thechild template:

  1. {% extends "layout.html" %}
  2. {% set active_page = "index" %}

The layout template can then access active_page. Additionally it makessense to define a default for that variable:

  1. {% set navigation_bar = [
  2.     ('/', 'index', 'Index'),
  3.     ('/downloads/', 'downloads', 'Downloads'),
  4.     ('/about/', 'about', 'About')
  5. ] -%}
  6. {% set active_page = active_page|default('index') -%}
  7. ...
  8. <ul id="navigation">
  9. {% for href, id, caption in navigation_bar %}
  10.   <li{% if id == active_page %} class="active"{% endif
  11.   %}><a href="{{ href|e }}">{{ caption|e }}</a></li>
  12. {% endfor %}
  13. </ul>
  14. ...

Accessing the parent Loop

The special loop variable always points to the innermost loop. If it’sdesired to have access to an outer loop it’s possible to alias it:

  1. <table>
  2. {% for row in table %}
  3.   <tr>
  4.   {% set rowloop = loop %}
  5.   {% for cell in row %}
  6.     <td id="cell-{{ rowloop.index }}-{{ loop.index }}">{{ cell }}</td>
  7.   {% endfor %}
  8.   </tr>
  9. {% endfor %}
  10. </table>