テンプレートを作成していきます。

テンプレート

app フォルダの下に templates フォルダと app フォルダを作成します。

app はアプリケーションの名前になります。

app
└───templates
    └───app

Django は HTML の中にテンプレート言語という記述を用いて、データベースの値を表示したり、条件分岐やループなどの制御をすることができます。

テンプレートは、templates というディレクトリに.html 拡張子で作成する必要があります。

変数を表示

変数を表示するためには、下記を使用します。

{{ 変数名 }}

制御処理

条件分岐やループなどの制御処理は、下記を使用します。

{% タグ名 %}

デフォルトで使用可能な変数

変数 説明
user アクセスユーザー情報
object またはモデル名 ビューから渡されるモデルオブジェクト
message メッセージリスト
form フォームオブジェクト

組み込みフィルタ

変数にフィルタを使用することができます。

{{ var|default:''}}
{{ var|default_if_none:''}}
{{ var|linebreaksbr }}
{{ var|safe }}
{{ var|truncatechars:100 }}
{{ var|urlize }}
組み込みフィルタ 説明
default 変数が False の場合に表示する値を指定
default_if_none 変数が None の場合に表示する値を指定
linebreaksbr 改行コード「\n」を HTML の「br」に変換
safe 自動エスケープを無効化する
truncatechars 指定した文字数を超えた場合は...と表示する
urlize URL とメールアドレスを HTML のアンカータグ「a」で表示する

組み込みタグ

組み込みタグ 説明
autoescape 自動エスケープ機能を制御する
block 子テンプレートの内容に置き換える
extends 親テンプレートを拡張することを宣言する
for, endfor ループする
if, elif, else, endif 条件分岐する
load カスタムテンプレートタグを読み込む
url URL を逆引きする

form 変数オプション

form 変数オプション 説明
as_p p タグで各フィールドを描画
as_table テーブル形式で各フィールドを描画
as_ul リスト形式で各フィールドを描画

テンプレート作成

画面を作成するためのテンプレートを作成します。

CSS フレームワークの Bootstrap を使用して、レイアウトをしていきます。

Bootstrap

base

base.html ファイルを作成します。

動的に変わらないものは、base.html に書いておくと、同じことを書く必要がなくなります。

主にヘッダーやフッター、ナビゲーションは base ファイルに書くことが多いです。

app/templates/app/base.html

{% load static %}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>ブログチュートリアル</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="/">ブログ</a>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">ホーム</a>
          </li>
          {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="">投稿</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">ログアウト</a>
          </li>
          {% else %}
          <li class="nav-item">
            <a class="nav-link" href="">サインアップ</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="">ログイン</a>
          </li>
          {% endif %}
        </ul>
      </div>
    </nav>

    <main>
      <div class="container">{% block content %} {% endblock %}</div>
    </main>

    <footer class="py-2 bg-dark">
      <p class="m-0 text-center text-white">
        Copyright &copy; Django Startup 2020
      </p>
    </footer>

    {% block extra_js %} {% endblock %}
  </body>
</html>

コード解説

静的ファイルを読み込む場合は、{% load static %}を書く必要があります。

css を読み込む場合は、{% static 'css/style.css' %}と書きます。

{% load static %}

<link rel="stylesheet" href="{% static 'css/style.css' %}" />

ユーザーのログイン状態を判定するには、user.is_authenticatedを使用します。

{% if user.is_authenticated %} ... {% else %} ... {% endif %}

動的に変わるエリアを block で囲います。

content の名前は分かりやすい名前をつけて下さい。

{% block content %} {% endblock %}

JS を読み込むエリアも、block で囲んでおきます。

{% block extra_js %} {% endblock %}

index

動的に変わるエリアのファイルを作成します。

トップページなので、index.html とします。

このトップページでは、ブログのリストを表示するようにします。

app/templates/app/index.html

{% extends "app/base.html" %} {% block content %}

<div class="row my-4">
  <div class="col-md-8">
    {% for post in post_data %}
    <div class="card mb-4">
      <div class="card-body">
        <h2 class="card-title">{{ post.title }}</h2>
        <p class="card-text">{{ post.content|truncatechars:100 }}</p>
        <div class="btn btn-warning">詳細</div>
      </div>
      <div class="card-footer text-muted">
        {{ post.created|date }} by {{ post.author }}
      </div>
      <a class="stretched-link" href=""></a>
    </div>
    {% endfor %}
  </div>

  <div class="col-md-4">
    <div class="card">
      <h5 class="card-header">このチュートリアルについて</h5>
      <div class="card-body">
        <p>ステップ1</p>
        <p class="mb-0">
          初めてDjangoを触る方向けのチュートリアルです。
          最小限の機能を構築してDjangoを学習しましょう。
        </p>
      </div>
    </div>
  </div>
</div>

{% endblock %}

コード解説

base ファイルを読み込むための記述をします。

{% extends "app/base.html" %}

動的に変わるエリアを block で囲います。

base ファイルで書いた block の名前と同じところが書き変わります。

{% block content %} ... {% endblock %}

ビューで作成した、post_data はリスト形式なので、ループして中身を取得します。

{% for post in post_data %} ... {% endfor %

データはこのように取得します。

truncatecharsなどのフィルターを使用することで、データを処理することができます。

ここでは文字数を 100 文字に限定しています。

100 文字以上あると...と表示されます。

<h2 class="card-title">{{ post.title }}</h2>
<p class="card-text">{{ post.content|truncatechars:100 }}</p>