Djangoで始めるブログ作成講座⑥：月別投稿一覧ページを作ろう！

2023年5月23日
2023年5月26日
Django
Django, wordpress

Django

「Djangoで始めるブログ作成講座」の第六回です。
前回はDjangoで作成したブログにカテゴリー機能を追加しました。

Djangoで始めるブログ作成講座⑤：カテゴリー機能を導入しよう！

「Djangoで始めるブログ作成講座」の第五回です。前回はDjangoでページング機能を実装しました。 [sitecard subtitle=関連記事 url=https://freemas.stepupkaraoke.com/p[…]

今回もブログによくある機能として月別投稿一覧ページを作成していきます。
2023年6月、のようにサイドバーに並んでいるリンク先から飛べるページですね。

この記事を読んで取り組むことで、Djangoの以下の基本的な使い方を習得することができます。

Djangoでの年月URLの作成方法
クラスベースビューの継承の仕方

月別投稿一覧ページはModelの改修が必要なく、容易に作れるページとなっています。
これまでのおさらいも兼ねながら、さっくり作成していきましょう。

1 Djangoで始めるブログ作成講座⑥：月別記事ページを作ろう！
2 おわりに

Djangoで始めるブログ作成講座⑥：月別記事ページを作ろう！

urls.pyに月別投稿一覧ページのルーティングを記述

urls.py

from django.urls import path
from .views import PostListView,PostDetailView,PostListByCategoryView,PostListByMonthView

urlpatterns = [
    path('', PostListView.as_view(), name='post_list'),
    path('post/<int:pk>/', PostDetailView.as_view(), name='post_detail'),
    path('category/<slug:slug>/', PostListByCategoryView.as_view(), name='post_list_by_category'),
    path('archive/<int:year>/<int:month>/', PostListByMonthView.as_view(), name='post_list_by_month'), #追加
]

from django.urls import path

from .views import PostListView,PostDetailView,PostListByCategoryView,PostListByMonthView

urlpatterns = [

path('', PostListView.as_view(), name='post_list'),

path('post/<int:pk>/', PostDetailView.as_view(), name='post_detail'),

path('category/<slug:slug>/', PostListByCategoryView.as_view(), name='post_list_by_category'),

path('archive/<int:year>/<int:month>/', PostListByMonthView.as_view(), name='post_list_by_month'), #追加

]

新たにルーティングを追加しました。URLは「/archive/2023/5」のように分かりやすく設定しています。
次に、ここから呼び出されるPostListByMonthViewを作成しましょう。

月別投稿一覧ページ表示用のViewを作成する

views.pyの末尾に付け加えてください。

views.py

-- 省略 --

#PostListViewを継承して作成
class PostListByMonthView(PostListView):
    template_name = 'post_by_month.html'

    def get_queryset(self):
        queryset = super().get_queryset()
        year = self.kwargs.get('year')
        month = self.kwargs.get('month')
        #取得した年月で投稿を絞り込み
        if year and month:
            queryset = queryset.filter(created_at__year=year, created_at__month=month)
        return queryset
    
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        #取得した年月をそのままコンテキストに登録
        year = self.kwargs.get('year')
        month = self.kwargs.get('month')
        context.update({
            'year': year,
            'month': month,
        })
        return context

-- 省略 --

#PostListViewを継承して作成

class PostListByMonthView(PostListView):

template_name = 'post_by_month.html'

def get_queryset(self):

queryset = super().get_queryset()

year = self.kwargs.get('year')

month = self.kwargs.get('month')

#取得した年月で投稿を絞り込み

if year and month:

queryset = queryset.filter(created_at__year=year, created_at__month=month)

return queryset

def get_context_data(self, **kwargs):

context = super().get_context_data(**kwargs)

#取得した年月をそのままコンテキストに登録

year = self.kwargs.get('year')

month = self.kwargs.get('month')

context.update({

'year': year,

'month': month,

})

return context

PostListViewを継承して作成

前回のカテゴリー記事と同様に、月別記事一覧も全記事一覧とほとんど変わらないページです。
それゆえに、同じようにPostListViewを継承して作成しています。

このように、Djangoでは一つのクラスを複数のクラスで継承することも可能となっています。

取得した年月で投稿を絞り込み

基本ベースは投稿一覧のPostListViewなので、そこからの差分を記載していきます。
先ほどurls.pyでこのViewに年と月を渡したので、それを取得して投稿を絞り込んでいます。

取得した年月をそのままコンテキストに登録

ページには年月を表示したいので、URLで指定した年月をそのまま受け取ってページに渡しています。

Viewの準備ができたので、最後に月別ページのTemplateを作成しましょう。

月別投稿一覧ページのTemplateを作成する

新たにpost_by_month.htmlというファイルを作成して、以下のように記載します。

post_by_month.html

{% extends 'blog_base.html' %}

{% block content %}
    <h1>{{ year }}年{{ month }} 月の投稿一覧</h1>
    {% for post in posts %}
        <div class="card mt-4 mb-4">
            {% if post.thumbnail %}
                <img class="card-img-top" src="{{ post.thumbnail.url }}" alt="{{ post.title }}">
            {% endif %}
            <div class="card-body">
                <h2 class="card-title">{{ post.title }}</h2>
                <p class="card-text">{{ post.content|truncatechars:80 | safe }}</p>
                <a href="{% url 'post_detail' pk=post.id %}" class="btn btn-primary">Read More &rarr;</a>
            </div>
            <div class="card-footer text-muted">
                Posted on {{ post.created_at }}
            </div>
        </div>
    {% endfor %}
{% endblock %}

{% extends 'blog_base.html' %}

{% block content %}

<h1>{{ year }}年{{ month }} 月の投稿一覧</h1>

{% for post in posts %}

{% if post.thumbnail %}

{% endif %}

<h2 class="card-title">{{ post.title }}</h2>

<p class="card-text">{{ post.content|truncatechars:80 | safe }}</p>

</div>

Posted on {{ post.created_at }}

</div>

{% endfor %}

{% endblock %}

もうお気づきかもしれませんが、カテゴリー別一覧ページとほとんど同じで、違う部分はH1要素の中身のみとなります。

開発環境を立ち上げて、月別投稿一覧ページにアクセスする

さて、実装は完了したので開発環境を立ち上げて確認してみましょう。
ブラウザのURL欄に、以下を打ち込んでみてください。

http://127.0.0.1:8000/djangoblog/archive/[年]/[月]/

年と月は投稿がある年と月を指定してくださいね。
例えば「http://127.0.0.1:8000/djangoblog/archive/2023/5/」といった形です。

ちゃんとその年月の投稿のみが表示されるはずです。

おわりに

今回の記事を実践してみて、カテゴリー一覧や投稿一覧とTemplateは混ぜられるのでは？と感じた人も居るかもしれません。
ViewとTemplateの繋がりが1対1でなくなるために理解しにくくはなるものの、そういったことも可能です。

何か修正が入った場合のメンテナンスも1ページで済むので、興味がある場合は実践してみるのも手です。
（3ページくらいならば気になりませんが、50ページ越えてくると大変ですからね）

さて、今回もこの回のソースをGithubに掲載しておくので、もしも見返したい場合は確認してみてください。

Githubリンク（BLOGー月別投稿一覧ページ追加）

次の記事では、ブログにサイドバーを作成して全ページで表示させていきましょう！

Djangoで始めるブログ作成講座⑦：サイドバーを作ろう！

「Djangoで始めるブログ作成講座」の第七回です。前回はDjangoで作成したブログに月別投稿一覧ページを追加しました。 [sitecard subtitle=関連記事 url=https://freemas.stepupkar[…]