【Django】ページネーションを独立したtemplateで管理する方法が知りたいです

###実現したいこと
Djangoブログにて、ヘッダーおよびフッター部分、投稿記事を表示する部分、ページネーションを部分をそれぞれbase.html、index.html、pagination.htmlに分けて管理したいのですが、ページネーションが表示されません。

下記の通り色々試したのですが解決に至らなかったため、皆様のご知見いただきたくお願い致します。

###試したこと

ページネーション部分のコードをindex.htmlに入れたところ問題なく表示されます

　⇨ページネーションのコード自体に問題があるわけでは無いと考えます。

base.htmlとindex.htmlを{% block content %}で承継し、base.htmlとpagination.htmlを{% block pagination %}で承継

　⇨index.htmlだけ表示。pagination.htmlの独立テンプレート化に問題？

base.htmlにindex.htmlを承継後、index.htmlにpagination.htmlを承継

　⇨index.htmlだけ表示。やはりpagination.htmlの独立テンプレート化に問題か。

ただ、pagination.htmlの不備が分からず・・・

###各種コード
必要と思われる部分のみ記載しております。
情報に不足ありましたらご指摘いただけますと幸いです。

base.html

HTML
1{% load static %}
2
3<!DOCTYPE html>
4<html lang="ja">
5
6<head>
7    <meta charset="UTF-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
10    <link rel="stylesheet" href="{% static 'css/style.css' %}">
11    <script src="{% static 'javascript/javascript.js' %}"></script>
12    <title>DSS</title>
13</head>
14
15<body>
16    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
17        <div class="container">
18            <a class="navbar-brand" href="/">DSS</a>
19            <ul class="navbar-nav ml-auto">
20                <li class="nav-item">
21                    <a class="nav-link" href="/">ホーム</a>
22                </li>
23                {% if user.is_authenticated %}
24                    <li class="nav-item">
25                        <a href="{% url 'post_new' %}" class="nav-link">投稿</a>
26                    </li>
27                    <li class="nav-item">
28                        <a href="{% url 'profile' %}" class="nav-link">プロフィール</a>
29                    </li>
30                    <li class="nav-item">
31                        <a href="{% url 'account_logout' %}" class="nav-link">ログアウト</a>
32                    </li>
33                {% else %}
34                    <li class="nav-item">
35                        <a href="{% url 'account_signup' %}" class="nav-link">サインアップ</a>
36                    </li>
37                    <li class="nav-item">
38                        <a href="{% url 'account_login' %}" class="nav-link">ログイン</a>
39                    </li>
40                {% endif %}
41            </ul>
42        </div>
43    </nav>
44
45    <main>
46        <div class="container col-xl-el">
47            {% block content %}
48            {% endblock %}
49            {% block pagination %}
50            {% endblock %}
51        </div>
52    </main>
53
54    <footer class="py-2 bg-dark">
55        <p class="m-0 text-center text-white">Copyright &copy;</p>
56    </footer>
57
58    {% block extra_js %}
59    {% endblock %}
60
61</body>
62
63</html>

　　
index.html

HTML
1{% extends "app/base.html" %}
2{% load static %}
3{% load utils %}
4
5{% block content %}
6{% for post in post_data %}
7<div class="row">
8    <div class="col-md-4">
9        <a href="#">
10        {% if post.image %}
11            <img class="img-fluid rounded mb-3 mb-md-0" src="{{ post.image.url }}" alt="">
12        {% endif %}
13        </a>
14    </div>
15    <div class="col-md-8">
16        <div class="author-created">
17            <h7 class="text_left">{{ post.author }}</h7>
18            <h7 class="text_right">{{ post.created }}</h7>
19        </div>
20        <h3>{{ post.title }}</h3>
21        <p>{{ post.content|truncatechars:100 }}</p>
22        <a style="float:right;" href="{% url 'post_detail' post.id %}">続きを読む</a>
23    </div>
24</div>
25<hr>
26{% endfor %}
27<div class="text-right">
28    <a href="{% url 'post_new' %}" class="btn btn-info">新しい記事を投稿</a>
29</div>
30{% endblock %}

　
pagination.html

html
1{% extends "app/base.html" %}
2{% load static %}
3{% load utils %}
4
5{% block pagination %}
6<h5>Hello Pagination</h5>
7<ul class="pagination justify-content-center">
8    {% if page_obj.has_previous %}
9        <li class="page-item">
10            <a class="page-link" href="?{%  url_replace request 'page' page_obj.previous_page_number %}">
11                <span aria-hidden="true">&laquo;</span>
12            </a>
13        </li>
14    {% endif %}
15    {% for num in page_obj.paginator.page_range %}
16        {% if page_obj.number == num %}
17            <li class="page-item active">
18                <a class="page-link" href="#!">
19                    {{ num }}
20                </a>
21            </li>
22        {% else %}
23            <li class="page-item">
24                <a class="page-link" href="?{%  url_replace request 'page' num %}">
25                    {{ num }}
26                </a>
27            </li>
28        {% endif %}
29    {% endfor %}
30    {% if page_obj.has_next %}
31        <li class="page-item">
32            <a class="page-link" href="?{%  url_replace request 'page' page_obj.next_page_number %}">
33                <span aria-hidden="true">&raquo;</span>
34            </a>
35        </li>
36    {% endif %}
37</ul>
38
39{% endblock %}

###バージョン
Python3.8.3、Django2.2.16

お手数ですが宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく、やりたいことは、こういうことではないでしょうか。
↓

(1)
base.html

pagination.html を、snippetsとして include で呼び出すため、{% block pagination %} , {% endblock %} を削除。　⇒ base.html より、index.html で呼び出したほうが良いかも知れません。

HTML
1{% load static %}
2
3<!DOCTYPE html>
4<html lang="ja">
5
6<head>
7    <meta charset="UTF-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
10    <link rel="stylesheet" href="{% static 'css/style.css' %}">
11    <script src="{% static 'javascript/javascript.js' %}"></script>
12    <title>DSS</title>
13</head>
14
15<body>
16    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
17        <div class="container">
18            <a class="navbar-brand" href="/">DSS</a>
19            <ul class="navbar-nav ml-auto">
20                <li class="nav-item">
21                    <a class="nav-link" href="/">ホーム</a>
22                </li>
23                {% if user.is_authenticated %}
24                    <li class="nav-item">
25                        <a href="{% url 'post_new' %}" class="nav-link">投稿</a>
26                    </li>
27                    <li class="nav-item">
28                        <a href="{% url 'profile' %}" class="nav-link">プロフィール</a>
29                    </li>
30                    <li class="nav-item">
31                        <a href="{% url 'account_logout' %}" class="nav-link">ログアウト</a>
32                    </li>
33                {% else %}
34                    <li class="nav-item">
35                        <a href="{% url 'account_signup' %}" class="nav-link">サインアップ</a>
36                    </li>
37                    <li class="nav-item">
38                        <a href="{% url 'account_login' %}" class="nav-link">ログイン</a>
39                    </li>
40                {% endif %}
41            </ul>
42        </div>
43    </nav>
44
45    <main>
46        <div class="container col-xl-el">
47            {% block content %}
48            {% endblock %}
49
50            {% include "app/pagination.html" %}    <!-- pagination.html を load する -->
51
52        </div>
53    </main>
54
55    <footer class="py-2 bg-dark">
56        <p class="m-0 text-center text-white">Copyright &copy;</p>
57    </footer>
58
59    {% block extra_js %}
60    {% endblock %}
61
62</body>
63
64</html>

(2)
index.html

変更なし

HTML
1{% extends "app/base.html" %}
2{% load static %}
3{% load utils %}
4
5{% block content %}
6{% for post in post_data %}
7<div class="row">
8    <div class="col-md-4">
9        <a href="#">
10        {% if post.image %}
11            <img class="img-fluid rounded mb-3 mb-md-0" src="{{ post.image.url }}" alt="">
12        {% endif %}
13        </a>
14    </div>
15    <div class="col-md-8">
16        <div class="author-created">
17            <h7 class="text_left">{{ post.author }}</h7>
18            <h7 class="text_right">{{ post.created }}</h7>
19        </div>
20        <h3>{{ post.title }}</h3>
21        <p>{{ post.content|truncatechars:100 }}</p>
22        <a style="float:right;" href="{% url 'post_detail' post.id %}">続きを読む</a>
23    </div>
24</div>
25<hr>
26{% endfor %}
27<div class="text-right">
28    <a href="{% url 'post_new' %}" class="btn btn-info">新しい記事を投稿</a>
29</div>
30{% endblock %}

(3)
pagination.html

snippets として使うため、{% extends "app/base.html" %} , {% block pagination %}, {% endblock %} は削除。
static ファイルも読んでいないため、{% load static %} も削除。
{% load utils %} の内容が不明のため残していますが、読み込む必要が無ければ削除可。

HTML
1{% load utils %}
2<h5>Hello Pagination</h5>
3<ul class="pagination justify-content-center">
4    {% if page_obj.has_previous %}
5        <li class="page-item">
6            <a class="page-link" href="?{%  url_replace request 'page' page_obj.previous_page_number %}">
7                <span aria-hidden="true">&laquo;</span>
8            </a>
9        </li>
10    {% endif %}
11    {% for num in page_obj.paginator.page_range %}
12        {% if page_obj.number == num %}
13            <li class="page-item active">
14                <a class="page-link" href="#!">
15                    {{ num }}
16                </a>
17            </li>
18        {% else %}
19            <li class="page-item">
20                <a class="page-link" href="?{%  url_replace request 'page' num %}">
21                    {{ num }}
22                </a>
23            </li>
24        {% endif %}
25    {% endfor %}
26    {% if page_obj.has_next %}
27        <li class="page-item">
28            <a class="page-link" href="?{%  url_replace request 'page' page_obj.next_page_number %}">
29                <span aria-hidden="true">&raquo;</span>
30            </a>
31        </li>
32    {% endif %}
33</ul>

投稿2021/01/09 10:54

編集2021/01/09 11:18

_whitecat_22

総合スコア1305

minari766

2021/01/09 15:24

ご回答頂いた内容で動きました！とても丁寧にご説明いただき本当に有り難うございました！共通部分を{% base context %}とincludeで呼び出す手段と目的への理解が足りませんでした。今一度復習してみます。

_whitecat_22

2021/01/09 22:36

どういたしまして！お役に立てて嬉しく思います。 {% block xxxxxxxx %} {% endblock %} の組は、同じHTMLファイル内であれば、名前（xxxxxxxx の部分）が重複しない限り、幾つも設定できます。 base.htmlで大枠を作り、その中で、別ファイルの内容を充てたい部分を、いくつか {% block xxxxxxxx %} {% endblock %} を括っておくと良いです。（xxxxxxxx の部分は、適宜、名前を変えてください） index.htmlや他のページ用の.htmlにて、必要な部分のみ {% extends "app/base.html" %} でbase.html を読み込んだのち、 {% block xxxxxxxx %} {% endblock %} で必要な記述を囲ってあげると、目的のページが作れます。 pagination のほかにも、navigation-bar や、footer なども、snippets 化してしまうという手もあります。こちらは、各.html 内の記述は、{% block xxxxxxxx %} {% endblock %}で囲う必要がありません。呼び出したい.htmlファイルから、{% include "aaaaaaaa.html"%} を記述するだけで簡単に呼び出せます。慣れるまではややこしいですが、一度覚えてしまうとスムーズにサイト設計、ページ設計がすすむと思います。 Python/Django の習得に向けて、お互いにがんばりましょう！

行動規範の内容に同意します