def index(request):
    # request.GET 是一个类似字典的对象
    # .get('key', '默认值') 安全获取参数，不存在时返回默认值
    category_slug = request.GET.get('category', '')   # 分类筛选
    keyword = request.GET.get('q', '')                 # 搜索关键词
    print(f'分类：{category_slug}, 搜索：{keyword}')

# 文件路径：blog/views.py 更新 index 函数
from django.shortcuts import render
from django.db.models import Q           # Q 对象用于组合复杂查询条件
from .models import Post, Category

def index(request):
    """博客首页：展示文章列表，支持分类筛选 + 关键词搜索"""
    posts = Post.objects.all().order_by('-created_at')

    # 1. 获取查询参数
    category_slug = request.GET.get('category', '')
    keyword = request.GET.get('q', '')

    # 2. 按分类筛选
    if category_slug:
        # category__slug：通过外键访问分类表的 slug 字段（双下划线）
        posts = posts.filter(category__slug=category_slug)

    # 3. 按关键词搜索（标题或摘要）
    if keyword:
        # Q(title__icontains=...) | Q(summary__icontains=...)：OR 组合
        # icontains：大小写不敏感的包含查询
        posts = posts.filter(
            Q(title__icontains=keyword) | Q(summary__icontains=keyword)
        )

    # 4. 获取所有分类（用于渲染筛选导航）
    categories = Category.objects.all()

    context = {
        'posts': posts,
        'categories': categories,
        'category_slug': category_slug,   # 传给模板，用于高亮当前选中
        'keyword': keyword,               # 回显搜索关键词
        'title': 'RUNOOB 博客 - 首页',
    }
    return render(request, 'blog/index.html', context)

<!-- 文件路径：blog/templates/blog/index.html -->
{% extends 'blog/base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<h2 class="section-title">最新文章</h2>

<!-- 搜索框 -->
<div class="search-bar">
    <!-- 表单 method="get"：提交后参数出现在 URL 中（/search/?q=xxx） -->
    <form method="get" action="{% url 'index' %}">
        <input
            type="text"
            name="q"
            value="{{ keyword }}"
            placeholder="搜索文章标题或摘要..."
            class="search-input"
        />
        {% if keyword %}
        <a href="{% url 'index' %}" class="clear-btn">✕</a>
        {% endif %}
    </form>
</div>

<!-- 分类筛选导航 -->
<div class="category-bar">
    <!-- 「全部」按钮：不带 category 参数 -->
    <a href="{% url 'index' %}"
       class="{% if not category_slug %}active{% endif %}">全部</a>

    {% for cat in categories %}
    <a href="{% url 'index' %}?category={{ cat.slug }}{% if keyword %}&q={{ keyword }}{% endif %}"
       class="{% if category_slug == cat.slug %}active{% endif %}">
        {{ cat.name }}
    </a>
    {% endfor %}
</div>

<!-- 筛选结果统计 -->
<p class="result-info">
    共 {{ posts.count }} 篇
    {% if keyword %}，搜索「{{ keyword }}」{% endif %}
</p>

{% if posts %}
    <div class="article-grid">
        {% for post in posts %}
        <a href="{% url 'post_detail' post.pk %}" class="card-link">
            <div class="article-card">
                <div class="card-content">
                    <span class="card-category">{{ post.category.name }}</span>
                    <h3>{{ post.title }}</h3>
                    <p>{{ post.summary|truncatechars:80 }}</p>
                    <span class="card-date">{{ post.created_at|date:"Y-m-d" }}</span>
                </div>
            </div>
        </a>
        {% endfor %}
    </div>
{% else %}
    <p class="empty-tip">没有找到匹配的文章</p>
{% endif %}
{% endblock %}

/* 在 base.html style 中追加 */
.search-bar {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.search-input:focus {
    border-color: #2c3e50;
}

.clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    text-decoration: none;
    font-size: 18px;
}

.category-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.category-bar a {
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.2s;
}

.category-bar a.active {
    background: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}

.category-bar a:hover {
    border-color: #2c3e50;
}

.result-info {
    color: #999;
    font-size: 14px;
    margin-bottom: 16px;
}

.card-link {
    text-decoration: none;
    color: inherit;
}