Toggle navigation

Tips and Tricks

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

Null-Master Fallback

Jinja2 supports dynamic inheritance and does not distinguish between parent and child template as long as no [UNKNOWN NODE title_reference] tag is visited. While this leads to the surprising behavior that everything before the first [UNKNOWN NODE title_reference] tag including whitespace is printed out instead of being ignored, it can be used for a neat trick.

Usually child templates extend from one template that adds a basic HTML skeleton. However it’s possible to put the [UNKNOWN NODE title_reference] tag into an [UNKNOWN NODE title_reference] tag to only extend from the layout template if the [UNKNOWN NODE title_reference] 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 [UNKNOWN NODE title_reference] set to [UNKNOWN NODE title_reference] a very basic HTML skeleton is added:

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

Alternating Rows

If you want to have different styles for each row of a table or list you can use the [UNKNOWN NODE title_reference] method on the [UNKNOWN NODE title_reference] object:

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

[UNKNOWN NODE title_reference] can take an unlimited amount of strings. Each time this tag 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 navigation item. This is really simple to achieve. Because assignments outside of [UNKNOWN NODE title_reference]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:

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

The layout template can then access [UNKNOWN NODE title_reference]. Additionally it makes sense to define a default for that variable:

{% set navigation_bar = [
    ('/', 'index', 'Index'),
    ('/downloads/', 'downloads', 'Downloads'),
    ('/about/', 'about', 'About')
] -%}
{% set active_page = active_page|default('index') -%}
<ul id="navigation">
{% for href, id, caption in navigation_bar %}
  <li{% if id == active_page %} class="active"{% endif
  %}><a href="{{ href|e }}">{{ caption|e }}</a></li>
{% endfor %}

Accessing the parent Loop

The special [UNKNOWN NODE title_reference] variable always points to the innermost loop. If it’s desired to have access to an outer loop it’s possible to alias it:

{% for row in table %}
  {% set rowloop = loop %}
  {% for cell in row %}
    <td id="cell-{{ rowloop.index }}-{{ loop.index }}">{{ cell }}</td>
  {% endfor %}
{% endfor %}