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

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

Django

「Djangoで始めるブログ作成講座」の第七回です。
前回はDjangoで作成したブログに月別投稿一覧ページを追加しました。

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

「Djangoで始めるブログ作成講座」の第六回です。前回はDjangoで作成したブログにカテゴリー機能を追加しました。 [sitecard subtitle=関連記事 url=https://freemas.stepupkarao[…]

今回はブログにサイドバーを追加していきます。
これまでブログの右側に余計な空白があって気持ち悪かったと思いますが、今回でサイドバーを追加するための空間でした。

今回で、ブログに以下のようなサイドバーを追加しましょう。

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

DjangoでのViewの共通関数の作成方法
Viewでの関数の使用方法

すでにあるものをサイドバーに表示するだけですので、今回も簡単にさっくりと実装可能です。
ですがその中にも新しいテクニックが出てくるので、学びにしてください。

1 Djangoで始めるブログ作成講座⑦：サイドバーを作ろう！
2 おわりに

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

views.pyにサイドバー用の共通関数を追加する

サイドバーはどの画面でも表示される項目となっています。
そのため、views.pyでは共通の関数として定義し、それを各クラスビューで使用するという流れを取ることができます。

views.pyの末尾に、以下のように追記してください。

views.py

def get_common_data():
    #サイドバーのカテゴリー一覧
    category_list = Category.objects.all()
    #サイドバーの月別投稿ー一覧
    post_month_list = Post.objects.dates('created_at', 'month', order='DESC')
    return {'category_list': category_list, 'post_month_list': post_month_list}

def get_common_data():

#サイドバーのカテゴリー一覧

category_list = Category.objects.all()

#サイドバーの月別投稿ー一覧

post_month_list = Post.objects.dates('created_at', 'month', order='DESC')

return {'category_list': category_list, 'post_month_list': post_month_list}

サイドバーにはカテゴリーの一覧と月別の一覧を表示します。
そのため全てのカテゴリーと存在する投稿の月までのデータを降順に並べたものを取得しました。

この関数をそれぞれのクラスベースビューのcontextに追加してあげるだけで、サイドバーが表示できるようになります。
具体的には以下のような形で全てのクラスに追加します。

views.py

class PostListView(ListView):
    -- 省略 --
    #コンテキストを追加
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context.update(get_common_data())
        return context

class PostDetailView(DetailView):
    -- 省略--

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        comments = self.object.comments.all()
        form = CommentForm()
        context.update({
            'comments': comments, 
            'form': form,
        })
        #コンテキストを追加
        context.update(get_common_data()) 
        return context<br>

class PostListView(ListView):

-- 省略 --

#コンテキストを追加

def get_context_data(self, **kwargs):

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

context.update(get_common_data())

return context

class PostDetailView(DetailView):

-- 省略--

def get_context_data(self, **kwargs):

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

comments = self.object.comments.all()

form = CommentForm()

context.update({

'comments': comments,

'form': form,

})

#コンテキストを追加

context.update(get_common_data())

return context<br>

コンテキストを追加

共通の関数を使用する場合は、上記のようにcontext.updateの引数に関数を直接指定します。
こうすることで、関数内で取得していたカテゴリーと投稿月別の一覧がTemplateに渡されることになります。

また上記のコードではPostListViewとPostDetailViewしか追記していません。
カテゴリー別投稿一覧と、月別投稿一覧では表示されないかと思うかもしれませんが、これらはPostListViewを継承しているのでサイドバーが表示されます。

ここでも継承の強みが出ていますね。
Viewの準備ができたので、Templateも作成しましょう。

サイドバー表示用にTemplateに追記する

全画面に渡って表示するといえばblog_base.htmlです。
このファイルに追記することで、どの画面からでもサイドバーを表示するようにします。

blog_base.html

<div class="col-md-8 mt-4">
    {% block content %}
    {% endblock %}
    {% block pagination %}
    <div class="pagination justify-content-center">
          -- ページネーション処理 --
    </div>
   {% endblock %}
</div>
<div class="col-md-4 mt-4">
    <h2 class="mb-4">管理者</h2>
    <ul class="list-unstyled mb-4">
        <li><a href="#">管理者プロフィール</a></li>
    </ul>

    <!-- ループでカテゴリ一覧と月別一覧を作成 -->
    <h2 class="mb-4">カテゴリー</h2>
    <ul class="list-unstyled mb-4">
        {% for category_name in category_list %}
            <li><a href="{% url 'post_list_by_category' slug=category_name.slug %}">{{ category_name }}</a></li>
        {% endfor %}
    </ul>
    
    <h2 class="mb-4">月別アーカイブ</h2>
    <ul class="list-unstyled mb-0">
        {% for post_month in post_month_list %}
            <li><a href="{% url 'post_list_by_month' year=post_month.year month=post_month.month %}">
                    {{ post_month|date:"Y年m月" }}
                </a></li>
        {% endfor %}
    </ul>
</div>

{% block content %}

{% endblock %}

{% block pagination %}

-- ページネーション処理 --

</div>

{% endblock %}

</div>

<li><a href="#">管理者プロフィール</a></li>

</ul>

<h2 class="mb-4">カテゴリー</h2>

{% for category_name in category_list %}

<li><a href="{% url 'post_list_by_category' slug=category_name.slug %}">{{ category_name }}</a></li>

{% endfor %}

</ul>

<h2 class="mb-4">月別アーカイブ</h2>

{% for post_month in post_month_list %}

</a></li>

{% endfor %}

</ul>

</div>

ループでカテゴリー一覧と月別一覧を作成

for文を用いて、カテゴリーと月の一覧を表示しています。
それぞれの一覧はcontextに格納されています。

またそれぞれの一覧にはリンクを貼り付けるようにし、カテゴリのslugや年、月の値で遷移先を調整するようにしました。

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

さて、実装は完了したので開発環境を立ち上げて確認してみましょう。
投稿一覧ページにて、サイドバーが表示されていれば成功です。

管理者欄はイメージとして追加しています。
専用のページを作ってリンクを飛ばしたりするのが良いでしょう。

またカテゴリーと月別のアーカイブのリンク先をクリックして、遷移先でもサイドバーが表示されていることも合わせて確認してみましょう。

おわりに

今回はTemplateのみならず、Viewも共通化する手法を紹介しました。
アプリケーションの規模が大きくなればなるほど、共通化は威力を発揮するということも覚えておきましょう。

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

Githubリンク（BLOGーサイドバー作成）