ヒントとコツ¶

ドキュメントのこの部分は、Jinja テンプレートのヒントとコツを示します。

Null-デフォルトフォールバック¶

Jinja は動的な継承をサポートし、extends タグが呼び出されない限り、親テンプレートと子テンプレートを区別しません。これは、最初の extends タグより前のすべてが、空白文字を含めて無視されるのではなく、代わりに印刷されるという意外な動作につながりますが、巧妙な裏技として使用できます。

通常、子テンプレートは、基本的な HTML スケルトンを追加する 1 つのテンプレートから拡張されます。ただし、if タグの中に extends タグを挿入し、standalone 変数が false に評価される場合にのみレイアウトテンプレートから拡張することができます。この変数は、定義されていない場合はデフォルトで false に設定されます。さらに、standalone が True に設定されてレンダリングされた場合に、非常に基本的な HTML スケルトンがファイルに追加されるように、ファイルに非常に基本的なスケルトンが追加されます。

{% if not standalone %}{% extends 'default.html' %}{% endif -%}
<!DOCTYPE html>
<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 %}

交互の行¶

テーブルまたはリストの各行に対して異なるスタイルを使用する場合は、loop オブジェクトで cycle メソッドを使用できます。

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

cycle は無制限の数の文字列を受け取ることができます。このタグが呼び出されるたびに、リストから次のアイテムがレンダリングされます。

アクティブなメニュー項目の強調表示¶

多くの場合、アクティブなナビゲーション項目を含むナビゲーションバーが必要になります。これは非常に簡単です。子テンプレートの block 外での代入はグローバルであり、レイアウトテンプレートが評価される前に実行されるため、子テンプレートでアクティブなメニュー項目を定義できます。

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

次に、レイアウトテンプレートで active_page にアクセスできます。さらに、その変数にデフォルトを定義するのが適切です。

{% 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 %}
</ul>
...

親ループへのアクセス¶

特殊loop変数は常にもっとも内側のループを指します。外側のループにアクセスしたい場合には、名前を付けることが可能です

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

ヒントとコツ¶

Null-デフォルト フォールバック¶

交互の行¶

アクティブなメニュー項目の強調表示¶

親ループへのアクセス¶

Null-デフォルトフォールバック¶