Djangoブログにて、記事のカテゴリソート機能を追加したい

###前提
Python3.8.3、Django2.2.210でDjangoブログを作成しております。
Djangoブログにて、カテゴリ（カテゴリが予め定まっており、管理者以外の追加・削除が出来ないもの）を用いた記事ソート機能の実装方法がわからないため、ご教示いただけますと幸いです。

###実現したいこと
現在カテゴリはform.pyのカテゴリ辞書に以下の形で格納されています。

python
1    category_data = Category.objects.all()
2    category_choice = {}
3    for category in category_data:
4        category_choice[category] = category
5
6    #print(category_choice)
7　　#{<Category:全て>：<Category:全て>, <Category:カテゴリ1>：<Category:カテゴリ1>, <Category:カテゴリ2>：<Category:カテゴリ2>}

上記各カテゴリをhtmlの3つのボタンに振り分け、ボタンを押した時に対応するカテゴリの記事だけを表示させるようにしたいと考えております。
htmlのボタンのコードは以下の通りです。

html
1{% extends "app/base.html" %}
2{% load static %}
3
4{% block content %}
5<div class="picmenu">
6    <ul class="table-ul">
7        <li>
8            <a href="#">
9                <img src="{% static 'img/box.png' %}" alt="全て" class="icon-category">
10                <p>全て</p>
11            </a>
12        </li>
13        <li>
14            <a href="#">
15                <img src="{% static 'img/category1.png' %}" alt="カテゴリ1" class="icon-category">
16                <p>カテゴリ1</p>
17            </a>
18        </li>
19        <li>
20            <a href="#">
21                <img src="{% static 'img/category2.png' %}" alt="カテゴリ2" class="icon-category">
22                <p>カテゴリ2</p>
23            </a>
24        </li>
25    </ul>
26</div>
27    
28{% for post in post_data %}
29<div class="row">
30    <div class="col-md-4">
31        <a href="#">
32        {% if post.image %}
33            <img class="img-fluid rounded mb-3 mb-md-0" src="{{ post.image.url }}" alt="">
34        {% endif %}
35        </a>
36    </div>
37    <div class="col-md-8">
38        <div class="author-created">
39            <h7 class="text_left">{{ post.author }}</h7>
40            <h7 class="text_right">{{ post.created }}</h7>
41        </div>
42        <h3>{{ post.title }}</h3>
43        <p>{{ post.content|truncatechars:100 }}</p>
44        <a style="float:right;" href="#">続きを読む</a>
45    </div>
46</div>
47<hr>
48{% endfor %}
49{% endblock %}

###試したこと
ボタンのhrefに辞書のキーを指定すれば、キーに対応した値でカテゴリ検索できるかと考え、以下のコードに書き換えましたが、ボタンを押してもトップページに移動するだけでした。

html
1        <li>
2            <a href="{% url '<Category:全て>' category %}">
3            <!-- <a href="#"> -->
4                <img src="{% static 'img/box.png' %}" alt="全て" class="icon-category">
5                <p>全て</p>
6            </a>
7        </li>

###その他関連コード
関連すると思われるコードのみ記載しております。必要以上に省略してしまいましたらご指摘いただけますと幸いです。

urls.py

python
1from django.urls import path
2from app import views
3
4urlpatterns = [
5    path('', views.IndexView.as_view(), name='index'),
6    path('post/<int:pk>/', views.PostDetailView.as_view(), name='post_detail'),
7    path('post/<int:pk>/edit/', views.PostEditView.as_view(), name='post_edit'),
8    path('category/<str:category>/', views.CategoryView.as_view(), name='category')
9]

views.py

python
1rom django.views.generic import View
2from django.shortcuts import render,redirect
3from .models import Post
4from .models import Post, Area, Attraction, Category
5from .forms import PostForm
6from django.contrib.auth.mixins import LoginRequiredMixin
7
8class IndexView(View):
9    def get(self, request, *args, **kwargs):
10        post_data = Post.objects.order_by("-id")
11        return render(request, 'app/index.html', {
12            'post_data': post_data,
13        })
14
15class PostDetailView(View):
16    def get(self, request, *args, **kwargs):
17        post_data = Post.objects.get(id=self.kwargs['pk'])
18        return render(request, 'app/post_detail.html', {
19            'post_data': post_data
20        })
21
22class CreatePostView(LoginRequiredMixin, View):
23    def get(self, request, *args, **kwargs):
24        form = PostForm(request.POST or None)
25        return render(request, 'app/post_form.html', {
26            'form': form
27        })
28    
29    def post(self, request, *args, **kwargs):
30        form = PostForm(request.POST or None)
31
32        if form.is_valid():
33            post_data = Post()
34            post_data.author = request.user
35            post_data.title = form.cleaned_data['title']
36            category = form.cleaned_data['category']
37            post_data.category = Category.objects.get(name=category)
38            post_data.content = form.cleaned_data['content']
39            if request.FILES:
40                post_data.image = request.FILES.get('image')
41            return render(request, 'app/post_preview.html', {
42                'post_data' : post_data
43            })
44
45        return render(request, 'app/post_form.html', {
46            'form': form
47        })
48
49class CategoryView(View):
50    def get(self, request, *args, **kwargs):
51        category_data = Category.objects.get(name=self.kwargs['category'])
52        post_data = Post.objects.order_by('-id').filter(category=category_data)
53        return render(request, 'app/index.html', {
54            'post_data': post_data
55        })

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 'mypage' %}" class="nav-link">マイページ</a>
32                    </li>
33                    <li class="nav-item">
34                        <a href="{% url 'account_logout' %}" class="nav-link">ログアウト</a>
35                    </li>
36                {% else %}
37                    <li class="nav-item">
38                        <a href="{% url 'account_signup' %}" class="nav-link">マイページ（登録画面への誘導）</a>
39                    </li>
40                    <li class="nav-item">
41                        <a href="{% url 'account_signup' %}" class="nav-link">サインアップ</a>
42                    </li>
43                    <li class="nav-item">
44                        <a href="{% url 'account_login' %}" class="nav-link">ログイン</a>
45                    </li>
46                {% endif %}
47            </ul>
48        </div>
49    </nav>
50
51    <main>
52        <!-- <div class="container"> -->
53        <div class="container col-xl-el">
54            {% block content %}
55            {% endblock %}
56        </div>
57    </main>
58
59    <footer class="py-2 bg-dark">
60        <p class="m-0 text-center text-white">Copyright &copy;</p>
61    </footer>
62
63    {% block extra_js %}
64    {% endblock %}
65
66</body>

以上を踏まえ、どのようにすればカテゴリボタン押下により該当のカテゴリに対応した記事だけが表示されるか教えて頂きたく、何卒宜しくお願い致します。

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

回答1件

ベストアンサー

それぞれのaタグのhrefをこのようにしてみてください。

HTML
1<a href="{% url 'category' '全て' %}">
2
3<a href="{% url 'category' 'カテゴリ1' %}">
4
5<a href="{% url 'category' 'カテゴリ2' %}">

投稿2021/01/05 01:56

ForestSeo

総合スコア2722

minari766

2021/01/05 03:24

解決できました！本当にありがとうございます。 {% url %}の理解が不足しておりました。もう少し深堀します。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Djangoブログにて、記事のカテゴリソート機能を追加したい

関連した質問