Django記事詳細・カテゴリ・キーワード検索ページの実装【AIと一緒に作るDjangoブログ入門 #5】

touch ~/myblog/blog/templates/blog/detail.html

{% extends 'blog/base.html' %}

{% block title %}{{ post.title }} - My Blog{% endblock %}

{# SEO: 記事ごとの説明文として要約を使う #}
{% block meta_description %}{{ post.summary }}{% endblock %}

{# OGP: 記事ページは og:type を article にする #}
{% block og_title %}{{ post.title }}{% endblock %}
{% block og_description %}{{ post.summary }}{% endblock %}
{% block og_type %}article{% endblock %}

{# 構造化データ（JSON-LD）：Google検索結果でのリッチ表示用 #}
{% block structured_data %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "{{ post.title|escapejs }}",
    "description": "{{ post.summary|escapejs }}",
    "datePublished": "{{ post.published_at|date:'c' }}",
    "dateModified": "{{ post.updated_at|date:'c' }}",
    "author": {
        "@type": "Person",
        "name": "管理者"
    },
    "publisher": {
        "@type": "Organization",
        "name": "My Blog"
    },
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "{{ request.scheme }}://{{ request.get_host }}{{ request.path }}"
    }
}
</script>
{% endblock %}

{% block content %}

    {# パンくずリスト #}
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'blog:index' %}">ホーム</a></li>
            {% if post.category %}
            <li class="breadcrumb-item"><a href="{% url 'blog:category' post.category.slug %}">{{ post.category.name }}</a></li>
            {% endif %}
            <li class="breadcrumb-item active" aria-current="page">{{ post.title }}</li>
        </ol>
    </nav>

    {# 記事本体 #}
    <article class="blog-post">
        <h1 class="display-5 link-body-emphasis mb-2">{{ post.title }}</h1>

        <p class="blog-post-meta">
            {{ post.published_at|date:"Y年n月j日" }}
            {% if post.category %}
                ・ <a href="{% url 'blog:category' post.category.slug %}">{{ post.category.name }}</a>
            {% endif %}
            ・ {{ post.view_count }} views
        </p>

        {# 要約 #}
        {% if post.summary %}
        <div class="lead mb-4 p-3 bg-body-tertiary rounded">{{ post.summary }}</div>
        {% endif %}

        {# 本文。いまは改行だけ反映する素の表示。第6章でMarkdown整形に差し替える #}
        <div class="blog-post-body">
            {{ post.body|linebreaks }}
        </div>
    </article>

    {# 前後の記事 #}
    <nav class="d-flex justify-content-between border-top pt-4 mb-5" aria-label="前後の記事">
        {% if prev_post %}
        <a href="{% url 'blog:detail' prev_post.slug %}" class="btn btn-outline-primary rounded-pill">
            &larr; {{ prev_post.title|truncatechars:20 }}
        </a>
        {% else %}
        <span></span>
        {% endif %}

        {% if next_post %}
        <a href="{% url 'blog:detail' next_post.slug %}" class="btn btn-outline-primary rounded-pill">
            {{ next_post.title|truncatechars:20 }} &rarr;
        </a>
        {% endif %}
    </nav>

    {# 関連記事 #}
    {% if related_posts %}
    <section class="mb-5">
        <h3 class="pb-3 mb-4 fst-italic border-bottom">関連記事</h3>
        <div class="row g-4">
            {% for related in related_posts %}
            <div class="col-md-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        {% if related.category %}
                        <span class="badge bg-secondary mb-2">{{ related.category.name }}</span>
                        {% endif %}
                        <h5 class="card-title">
                            <a href="{% url 'blog:detail' related.slug %}" class="text-decoration-none link-body-emphasis">{{ related.title }}</a>
                        </h5>
                        <p class="card-text text-muted small">{{ related.summary|truncatechars:60 }}</p>
                    </div>
                    <div class="card-footer text-muted small">
                        {{ related.published_at|date:"Y年n月j日" }}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

{% endblock %}

from django.db.models import F
from django.shortcuts import get_object_or_404, render


def detail(request, slug):
    """記事詳細ページを表示する。"""

    # 公開済みの記事のみ表示。未公開はURL直打ちでも404
    # ただし管理者（is_staff）はログインしていれば未公開記事もプレビューできる
    # （公開ボタンを押す前に「本物のページでどう見えるか」を必ず確認するため）
    if request.user.is_authenticated and request.user.is_staff:
        post = get_object_or_404(Post, slug=slug)
    else:
        post = get_object_or_404(Post, slug=slug, is_published=True)

    # 閲覧数を1加算する
    # F()式を使うことで、同時アクセスでもカウントがズレない
    # （DBレベルでアトミックに +1 する）
    Post.objects.filter(pk=post.pk).update(view_count=F('view_count') + 1)

    # 前後の記事：公開日時を基準に検索する
    # 未公開（プレビュー時）は published_at が None なので前後記事なし
    prev_post = None
    next_post = None
    if post.published_at:
        prev_post = Post.objects.filter(
            is_published=True, published_at__lt=post.published_at
        ).order_by('-published_at').first()

        next_post = Post.objects.filter(
            is_published=True, published_at__gt=post.published_at
        ).order_by('published_at').first()

    related_posts = []
    if post.category:
        related_posts = Post.objects.filter(
            is_published=True, category=post.category
        ).exclude(pk=post.pk).order_by('-published_at')[:3]

    context = {
        'post': post,
        'prev_post': prev_post,
        'next_post': next_post,
        'related_posts': related_posts,
    }
    return render(request, 'blog/detail.html', context)

post.view_count += 1
post.save()

ユーザーA: 取得（view_count=10）→ +1 → 保存（11）
ユーザーB: 取得（view_count=10）→ +1 → 保存（11）  ← 12になるはずが11

Post.objects.filter(pk=post.pk).update(view_count=F('view_count') + 1)

def category(request, slug):
    """カテゴリ別の記事一覧ページを表示する。"""

    # URLのslugでカテゴリを取得。存在しなければ404
    category = get_object_or_404(Category, slug=slug)

    # このカテゴリに属する公開済み記事を新しい順に取得する
    post_list = Post.objects.filter(
        is_published=True, category=category
    ).order_by('-published_at')

    context = {
        'page_title': f'カテゴリ：{category.name}',
        'post_list': post_list,
    }
    return render(request, 'blog/list.html', context)

from django.db.models import Q


def search(request):
    """キーワード検索ページを表示する。"""

    # GETパラメータ q を取得（未指定なら空文字）
    query = request.GET.get('q', '').strip()

    if query:
        # Qオブジェクトで title・summary・body の OR検索を実現する
        post_list = Post.objects.filter(is_published=True).filter(
            Q(title__icontains=query)
            | Q(summary__icontains=query)
            | Q(body__icontains=query)
        ).order_by('-published_at')
    else:
        post_list = Post.objects.none()

    context = {
        'page_title': f'検索結果：{query}' if query else '検索',
        'query': query,
        'post_list': post_list,
    }
    return render(request, 'blog/list.html', context)

# AND（普通のfilter）
Post.objects.filter(title__icontains='django', is_published=True)

# OR（Qオブジェクトが必要）
Post.objects.filter(Q(title__icontains='django') | Q(body__icontains='django'))

touch ~/myblog/blog/templates/blog/list.html

{% extends 'blog/base.html' %}

{% block title %}{{ page_title }} - My Blog{% endblock %}

{% block content %}

    {# ページタイトル #}
    <h2 class="pb-4 mb-4 fst-italic border-bottom">{{ page_title }}</h2>

    {# 検索ページのときだけ表示するヒット件数 #}
    {% if query %}
    <p class="text-muted">「{{ query }}」の検索結果：{{ post_list|length }}件</p>
    {% endif %}

    {# 記事一覧 #}
    {% for post in post_list %}
    <article class="blog-post">
        <h2 class="h3 link-body-emphasis mb-1">
            <a href="{% url 'blog:detail' post.slug %}" class="text-decoration-none link-body-emphasis">{{ post.title }}</a>
        </h2>
        <p class="blog-post-meta">
            {{ post.published_at|date:"Y年n月j日" }}
            {% if post.category %}
                ・ <a href="{% url 'blog:category' post.category.slug %}">{{ post.category.name }}</a>
            {% endif %}
        </p>
        <p>{{ post.summary }}</p>
    </article>
    {% empty %}
    <p class="text-muted">該当する記事がありません。</p>
    {% endfor %}

{% endblock %}

urlpatterns = [
    path('', views.index, name='index'),

    # 検索（例: /search/?q=docker）
    # 詳細ページの slug パターンに飲まれないよう posts/<slug>/ より前に置く
    path('search/', views.search, name='search'),

    # カテゴリ別一覧（例: /category/django/）
    path('category/<slug:slug>/', views.category, name='category'),

    # 記事詳細ページ（例: /posts/django-blog-intro/）
    path('posts/<slug:slug>/', views.detail, name='detail'),
]

{# 特集バナー #}
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis bg-body-secondary">
    <div class="col-lg-6 px-0">
        <h1 class="display-4 fst-italic">{{ featured.title }}</h1>
        <p class="lead my-3">{{ featured.summary }}</p>
        {# ここを追加：特集記事の詳細ページへ飛ぶ #}
        <a href="{% url 'blog:detail' featured.slug %}" class="text-body-emphasis fw-bold">続きを読む...</a>
    </div>
</div>

{# 記事一覧（DBの公開記事。特集・ピックアップを除いた残り） #}
{% for post in post_list %}
<article class="blog-post mb-4">
    <h2 class="display-5 mb-1">
        <a href="{% url 'blog:detail' post.slug %}" class="text-decoration-none link-body-emphasis">{{ post.title }}</a>
    </h2>
    <p class="blog-post-meta text-secondary">
        {{ post.published_at|date:"Y年n月j日" }}
        {% if post.category %}・<a href="{% url 'blog:category' post.category.slug %}">{{ post.category.name }}</a>{% endif %}
    </p>
    <p>{{ post.summary }}</p>
    <a href="{% url 'blog:detail' post.slug %}" class="icon-link gap-1">続きを読む &rarr;</a>
</article>
{% empty %}
<p>まだ記事がありません。</p>
{% endfor %}

{# いまの base.html のヘッダー（第3章で作成） #}
<header class="border-bottom lh-1 py-3">
    <div class="row justify-content-center">
        <div class="col-4 text-center">
            <a class="blog-header-logo text-body-emphasis text-decoration-none"
               href="{% url 'blog:index' %}">My Blog</a>
        </div>
    </div>
</header>

<header class="border-bottom lh-1 py-3">
    <div class="row flex-nowrap justify-content-between align-items-center">
        {# 左カラム：今は空。左右の幅を揃えてロゴを中央に保つためのスペーサー #}
        <div class="col-4 pt-1"></div>

        {# 中央カラム：サイトロゴ #}
        <div class="col-4 text-center">
            <a class="blog-header-logo text-body-emphasis text-decoration-none"
               href="{% url 'blog:index' %}">My Blog</a>
        </div>

        {# 右カラム：検索フォーム。GETでsearchビューに送る #}
        <div class="col-4 d-flex justify-content-end align-items-center">
            <form class="d-flex" action="{% url 'blog:search' %}" method="get" role="search">
                <input class="form-control form-control-sm" type="search" name="q"
                       placeholder="検索" value="{{ request.GET.q|default:'' }}" aria-label="検索">
            </form>
        </div>
    </div>
</header>

cd ~/myblog
docker compose up

トップページ
  ↓ クリック
詳細ページ
  ↓ カテゴリ・検索
一覧ページ
  ↓ クリック
詳細ページ...