Django テンプレートの使用を開始する
テンプレートは、HTML や XML などのテキスト ベースの形式を生成するために使用できるテキスト ファイルです。 各テンプレートには、サイト間で共有される静的データが含まれていますが、動的データのプレースホルダーも含まれていることがあります。 テンプレートには、動作を制御する変数とタグ、および最後のページとして表示される内容が含まれています。
Django でテンプレートがどのように機能するかを見てみましょう。
変数
テンプレート内の変数は、他のプログラミング言語の場合と同様に動作します。 これらを使用して、実行時に評価される値を示すことができます。
Django は、{{ }} 構文を使用してテンプレートに変数を表示する方法を提供します。 二重中かっこ内に配置された任意の変数は、テキスト コンテンツに対して評価されてから、テンプレートに配置されます。 たとえば、犬の名前を表示する場合は、{{dog.name}} を使用します。
ビューでは、render 関数を使用してテンプレートに変数を渡します。これについては、後のモジュールで説明します。 Django ORM からの QuerySet など、値やその他のデータをテンプレートに渡すことができます。 これによって、アプリケーションのデータベースのデータを表示できます。
フィルター
フィルターは、テンプレートで要求されたときのデータの表示方法を制御するための優れた方法です。 フィルターは既に作成されているため、特別なコードを記述しなくても、簡単にデータを書式設定することができます。
たとえば、犬種の名前を出力する必要があり、すべての名前の最初の文字が大文字になるようにしたいとします。
{{ dog.name | capfirst }}
変数はパイプ記号 (|) の左側にあり、フィルターは右側にあります。 これは、Django テンプレート フィルターを使用しているときにデータを操作するために使用できる多数のフィルターの 1 つにすぎません。
タグ
タグを使用して、ループを実行したり、テキストを作成したり、テンプレート エンジン用に他の種類のコマンドを提供したりできます。 多くの場合、タグは Python 構文に似ています。 ただし、これらは (Python インタープリター内ではなく) テンプレート内で実行されるため、構文に若干の違いがあることがわかります。 Python の場合と同様に、タブを利用できない場合は、各ブロック ステートメントに対応する end が必要になります。
ブール論理には if ステートメントを使用し、反復処理には for ループを使用できます。 if ステートメントのコア構文は次のようになります。
{% if dogs %}
<h2>There are {{ dogs | length }} ready for adoption!</h2>
{% else %}
<h2>We have no dogs ready for adoption. Please check back later!</h2>
{% endif %}
注意
elif ステートメントは、Python の elif の場合と同じ方法で使用されます。
同様に、for ループを使用して、一覧内のすべての犬の名前を表示することもできます。
<ul>
{% for dog in dogs %}
<li>{{ dog.name }}</li>
{% endfor %}
<ul>
テンプレートの継承
テンプレートは、ユーザーがアプリケーションを使用しているときに表示される HTML を生成するために使用されます。 アプリケーション内のページでは通常、一般的な構造が共有されます。ナビゲーションは左側にあり、タイトルは一番上にあり、一貫性のあるスタイルシートが存在します。 Django テンプレートでは、継承によって共有構造がサポートされます。
親ページを作成する
親ページの作成は、Django HTML テンプレートの作成と同じです。 外部構造を指定してから、{% block %} プレースホルダーを含めます。 これらのプレースホルダーを使用すると、子は、これらのプレースホルダーに配置するコンテンツを提供できます。
スタイルシートをインポートする親ページを作成し、既定のタイトルを指定して、すべてのページに表示するヘッダーを指定しましょう。
<html>
<head>
<link rel="stylesheet" href="site.css">
<title>{% block title %}Shelter site{% endblock %}</title>
</head>
<body>
<h1>Shelter site</h1>
{% block content %}
{% endblock %}
</body>
</html>
子ページを作成する
extends キーワードを使用して、親から子ページを作成できます。 このキーワードを使用して、親テンプレートの HTML ファイルの名前を指定します。 次に、適切な {% block %} ステートメントを使用して、そのページに固有のコンテンツを追加します。
{% extends "parent.html" %}
{% block title %}
Welcome to the Shelter site!
{% endblock %}
{% block content %}
Thank you for visiting our site!
{% endblock %}
ページが表示されると、次のようになります。
<html>
<head>
<link rel="stylesheet" href="site.css">
<title>Welcome to the shelter site</title>
</head>
<body>
<h1>Shelter site</h1>
Thank you for visiting our site!
</body>
</html>
子ページのコンテンツによってプレースホルダーがどのように置き換えられるかに注目してください。
注意
この例では、静的テキストを使用しています。 ご覧のように、動的なコンテンツを使用することもできます。