テンプレートファイル を作ろう¶
共通パーツを作ろう¶
まず、ページネーターで使うパーツを作ります。このパーツは本アプリ以外でも使えるので、独立したファイルに作っておきましょう。
templates/pagination.html を作成します。
{# ページネーター #}
<nav class="col-sm-8">
<ul class="pager">
{# ページ送りボタン(1) - 新しい投稿を表示する #}
{% if page.has_previous %}
<li class="previous">
<a href="?page={{ page.previous_page_number }}"><span aria-hidden="true">←</span> Newer</a>
</li>
{% else %}
<li class="previous disabled">
<a href="#"><span aria-hidden="true">←</span> Newer</a>
</li>
{% endif %}
{# ページ情報 #}
<li>Page {{ page.number }} of {{ page.paginator.num_pages }}.</li>
{# ページ送りボタン(2) - 古い投稿を表示する #}
{% if page.has_next %}
<li class="next">
<a href="?page={{ page.next_page_number }}">Older <span aria-hidden="true">→</span></a>
</li>
{% else %}
<li class="next disabled">
<a href="#">Older <span aria-hidden="true">→</span></a>
</li>
{% endif %}
</ul>
</nav>
続いて templates/guestboard/base.html を作成します。
<!doctype html>
<html>
{% load staticfiles %}
<head lang="ja">
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% block css %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'css/common.css' %}" >
{% endblock %}
</head>
<body>
<div class="container">
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li class="{{ message.tags }}">{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block body %}
{% endblock %}
</div>
{% block js %}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
{% endblock %}
</body>
</html>
この中で見慣れないURLが3つ登場しています。
- //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
- //code.jquery.com/jquery-1.11.3.min.js
- //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
これらのファイルは、CDN ( コンテンツ・デリバリー・ネットワーク )から bootstrap と jQuery を読み込んでいます。
注釈
通常、CDNはファイルを配信するサーバーを分散させることを目的として使いますが、
今回はファイルをダウンロードする手間を省略する為に使っています。
これらのファイルをダウンロードして、静的ファイルを格納するフォルダーに配置しても問題ありません。
ゲストボード用のテンプレートファイルを作ろう¶
最後に templates/guestboard/index.html を作成します。
この中で {% include 「pagination.html」 %} と言うブロックが存在します。 これは別のファイルを読み込むブロックになります。今回はページネーター用のパーツを読み込んでいます。
{% extends "guestboard/base.html" %}
{% block title %}Guest Board{% endblock %}
{% block body %}
<div class="page-header">
<h1>Guest Board</h1>
</div>
{# 画面上段 - 入力フォームを定義する #}
<form action="{% url 'guestboard:index' %}" method="post">
<div class="row">
{% for field in form %}
<div class="form-group">
{% if field.errors %}
<div class="col-sm-10">
<span class="col-sm-10">{{ field.errors }}</span>
</div>
{% endif %}
<div class="col-sm-10">
<label class="col-sm-3 control-label">{{ field.label_tag }}</label>
<label class="label col-sm-7">{{ field }}</label>
</div>
</div>
{% endfor %}
<div class="col-sm-10">
<div class="form-group">
<label class="col-sm-2 control-label"><input type="submit" class="btn btn-primary" value="登録"></label>
{% csrf_token %}
</div>
</div>
</div>
</form>
<hr>
{# 画面下段 - 投稿内容とページネーター用のパーツを表示する #}
{% include "pagination.html" %}{# ページネーター用のパーツ #}
<div class="container">
<div class="row">
<div class="col-sm-8">
{% for posting in page %}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">{{ posting.name }} <label class="small">投稿日時:{{ posting.created_at }}</label></h3>
</div>
<div class="panel-body">
{{ posting.message }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% include "pagination.html" %}{# ページネーター用のパーツ #}
{% endblock %}