Python Django 入門トップページ


Django によるコメント掲示板の開発:目次

  1. プロジェクトの作成
  2. Git でコミット
  3. Web サーバを起動しておく
  4. Config
  5. Comments アプリケーションを作る
  6. アプリケーションを有効にする
  7. はじめてのビューを作成する
  8. モデルを作る
  9. マイグレーション
  10. テストデータの設定
  11. データベースからコメント一覧を取得して表示してみよう
  12. Bootstrap の導入
  13. コメントの詳細表示
  14. urls.pyの書き方
  15. HTML のテンプレート化
  16. コメントの新規投稿
  17. コメントの編集機能を追加する
  18. さらにテンプレート化
  19. モデル,マイグレーションファイル,フォームの関連
  20. 入力内容の検証(バリデーション)
  21. コメントを削除する
  22. 一覧を逆順にする
  23. ページネーション
  24. フラッシュメッセージ
  25. Static コンテンツの設置
  26. 更新や削除にもフラッシュメッセージを表示
  27. テストの自動化を実現しよう
  28. デバッグツールバーを使う
  29. generic モジュールを使わずにコメント一覧を取得する
  30. コメント一覧のページネーション
  31. 一覧の表示順序を制御する
  32. generic モジュールを使わずにコメントの詳細を表示する
  33. コメント詳細にページ送り機能を作成する
  34. generic モジュールを使わずにコメント登録機能を作成する
  35. generic モジュールを使わずにコメント編集機能を作成する
  36. generic モジュールを使わずにコメント削除機能を作成する

Django によるコメント掲示板の開発

HTML のテンプレート化

先程の作業で comment_list.html と comment_detail.html の内容は多くが共通していた.特にページのデザインなどに関する部分(レイアウト)をテンプレート化しておくと,アプリケーションのデザインの変更などが1つのファイルを編集するだけでできるうようになる.若干面倒な作業になるかもしれないが,後々のことを考えるとこのあたりでテンプレート化にチャレンジしておく価値は多いにある.

まず,comments/templates/comments/comment_list.html を comments/templates/base.html としてコピーし,次のように編集する.つまり,<body> の中で,{% block content %}{% endblock content %} の中身を削除し,<title> ... </title> の中に {% block title %}{% endblock %} を入力する.

comments/templates/base.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
{% block content %}
{% endblock content %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

次に,comments/templates/comments/comment_list.html から,base.html と共通する部分を取り払い,base.html を読み込む命令と,タイトルを設定する部分を追加する.なお,5行目の {% endblock %}{% endblock title %} と記述しても良い.また逆に,最後の行の {% endblock content %}{% endblock %} でも良い.{% block content %} はその中身が長いため,{% endblock content %} と省略せずに入力した方が,あとでその範囲を確認しやすいでしょう.

comments/templates/comments/comment_list.html
{% extends "base.html" %}

{% block title %}
コメント一覧
{% endblock %}

{% block content %}
    <div class="container">
        <h1 class="my-5">コメント一覧</h1>
        {% for comment in object_list %}
            <div class="card mb-3">
              <div class="card-body">
                  <h5 class="card-title">
                      <a href="{% url 'comments:show' comment.id  %}">
                          {{ comment.title }}
                      </a>
                  </h5>
                  <p class="card-text">{{ comment.body }}</p>
              </div>
            </div>
        {% endfor %}
    </div>
{% endblock content %}

この作業によって生成される HTML ファイルには変化がなく,これまでと同じ一覧表示の結果が得られるはずです.しかし,この作業によって HTML ファイルの見通し格段に良くなりましたね.

同様に,comment_detail.html もテンプレートを使うように変更しておこう.

comments/templates/comments/comment_detail.html
{% extends "base.html" %}

{% block title %}
コメント {{ comment.id }}
{% endblock %}

{% block content %}
    <div class="container">
        <h1 class="my-5">コメント {{ comment.id }}</h1>
        <div class="card mb-3">
            <div class="card-header">
                ID : {{ comment.id }}
            </div>
            <div class="card-body">
                <p class="card-text">Title : </p>
                <h5 class="card-title">{{ comment.title }}</h5>
                <p class="card-text">Body : </p>
                <p class="card-text">{{ comment.body }}</p>
            </div>
            <div class="card-footer">
                Created at : {{ comment.created_at }}<br>
                Updated at : {{ comment.updated_at }}
            </div>
        </div>
    </div>
{% endblock content %}

目次に戻る