编辑文章

文章标题

正文

## 引言
在博客开发中，文章列表是核心展示模块，既要保证**多设备适配的美观性**，又要兼顾**开发效率和后期可维护性**。Bootstrap作为前端主流的响应式框架，其栅格系统和卡片组件能快速实现布局需求，而Django作为后端框架，可高效提供数据并完成模板渲染。本文将结合Django+Bootstrap技术栈，从核心布局原理出发，手把手教你搭建`row + col-md-6 + .card`的全响应式文章列表，同时涵盖**数据关联、模板优化、交互提升、边界处理**等实战细节，最终实现一个适配手机、平板、电脑的高可用文章列表，所有代码可直接复用到你的Django博客项目中。

## 一、核心技术原理：为什么选择`row + col-md-6 + .card`？
在开始编码前，先理解这套组合的设计逻辑，知其然更知其所以然，后续可根据需求灵活调整。
### 1. Bootstrap栅格系统：响应式的核心
Bootstrap的栅格系统基于**12列布局**设计，将页面宽度划分为12等份，通过`row`（行）和`col-*`（列）类实现元素的灵活排布，核心优势是**无需手写媒体查询**，框架内置了多屏幕尺寸的适配规则。
- `row`：行容器，用于包裹列元素，自动清除列的浮动，避免布局错乱，同时自带左右内边距抵消，保证内容对齐。
- `col-md-6`：中等屏幕（≥768px，如平板、电脑）下，每个列占6列宽度（即12列的1/2），因此一行可显示2个文章卡片；小屏幕（<768px，如手机）下，列会自动堆叠为100%宽度，一行仅显示1个卡片，完美实现**大屏两列、小屏单列**的响应式效果。
- 补充：Bootstrap还提供了`col-sm-*`（小屏）、`col-lg-*`（大屏）、`col-xl-*`（超大屏）等类，可根据需求组合，如`col-sm-12 col-md-6 col-lg-4`实现**手机单列、平板两列、电脑三列**。

### 2. Bootstrap卡片组件（`.card`）：轻量化内容容器
`.card`是Bootstrap专为**独立内容块**设计的组件，替代了传统的DIV+CSS布局，内置了边框、内边距、阴影等基础样式，可快速实现文章卡片的视觉效果，核心优势是：
- 样式统一：自带基础的卡片结构，无需手动定义边框、圆角、间距，保证页面风格一致；
- 扩展性强：提供`.card-body`（内容区）、`.card-header`（头部）、`.card-footer`（底部）等子组件，可灵活添加标题、摘要、时间、操作按钮；
- 适配性好：与栅格系统完美兼容，随列宽自动缩放，无布局冲突。

### 3. Django+Bootstrap的组合优势
Django负责**后端数据处理**（从数据库查询文章列表、处理分页、传递数据到模板），Bootstrap负责**前端响应式渲染**，二者结合实现：
- 开发效率翻倍：前端无需手写响应式CSS，后端无需关注前端布局细节，各司其职；
- 维护成本降低：Bootstrap的类名语义化强，Django模板语法简洁，后续修改布局或数据逻辑更轻松；
- 兼容性优秀：Bootstrap兼容所有现代浏览器，Django保证后端数据处理的稳定性，适合个人博客和小型项目快速落地。

## 二、前置准备：确认项目基础环境
本文所有实战代码基于Django博客项目（`My_Blog`），需提前确认以下基础环境已配置完成，避免后续踩坑：
1. Django项目已创建，且包含博客核心APP（如`blog`），APP已添加到`settings.py`的`INSTALLED_APPS`中；
2. 已定义文章模型（`Post`），至少包含`title`（标题）、`content`（内容）、`created_at`（创建时间）、`author`（作者）等核心字段；
3. 已在`base.html`中引入Bootstrap的CSS和JS CDN（**核心，保证Bootstrap样式生效**）；
4. 已配置基础URL和视图，确保项目能正常启动，无基础报错。

### 2.1 文章模型（`Post`）核心代码
```python
# blog/models.py
from django.db import models
from django.contrib.auth.models import User

class Post(models.Model):
    title = models.CharField(max_length=200, verbose_name="文章标题")
    content = models.TextField(verbose_name="文章内容")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")
    updated_at = models.DateTimeField(auto_now=True, verbose_name="更新时间")
    author = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name="作者")

class Meta:
        verbose_name = "文章"
        verbose_name_plural = "文章"
        ordering = ["-created_at"]  # 按创建时间倒序，最新文章在前

def __str__(self):
        return self.title

# 自定义方法：获取文章摘要（前100个字符，超出加省略号）
    def get_excerpt(self):
        if len(self.content) > 100:
            return self.content[:100] + "..."
        return self.content
```

### 2.2 Bootstrap基础引入（`base.html`）
```html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}我的博客{% endblock %}</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    
    <nav class="navbar navbar-expand-md navbar-light bg-light mb-4">
        <div class="container">
            <a class="navbar-brand" href="{% url 'home' %}">我的博客</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="{% url 'home' %}">首页</a></li>
                </ul>
            </div>
        </div>
    </nav>

<div class="container">
        {% block content %}{% endblock %}
    </div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
```

## 三、实战步骤1：编写Django视图——获取文章列表+分页处理
视图是Django连接后端数据库和前端模板的桥梁，核心需求是**查询文章列表**并**传递到模板**，同时添加**分页功能**（避免文章过多导致页面过长），Django内置`Paginator`类可快速实现分页，无需手动处理页码逻辑。

### 3.1 列表视图函数（`views.py`）
```python
# blog/views.py
from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from .models import Post

# 文章列表视图（首页）
def post_list(request):
    # 查询所有文章（模型已配置ordering，按创建时间倒序）
    post_list = Post.objects.all()
    # 分页配置：每页6篇（适配col-md-6，2列×3行=6篇，布局更整齐）
    paginator = Paginator(post_list, 6)
    # 获取前端页码参数，默认为1
    page = request.GET.get('page', 1)
    
    try:
        # 获取当前页文章数据
        posts = paginator.page(page)
    except PageNotAnInteger:
        # 页码非整数，返回第一页
        posts = paginator.page(1)
    except EmptyPage:
        # 页码超出范围，返回最后一页
        posts = paginator.page(paginator.num_pages)
    
    # 传递数据到模板
    context = {'posts': posts}
    return render(request, 'blog/post_list.html', context)

# 文章详情视图（保留原有代码即可）
def post_detail(request, pk):
    from django.shortcuts import get_object_or_404
    post = get_object_or_404(Post, pk=pk)
    return render(request, 'blog/post_detail.html', {'post': post})
```

### 3.2 URL路由配置
#### 博客APP路由（`blog/urls.py`）
```python
# blog/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.post_list, name='home'),  # 文章列表（首页）
    path('post/<int:pk>/', views.post_detail, name='post-detail'),  # 文章详情
    path('post/<int:pk>/update/', views.post_update, name='post-update'),  # 编辑
    path('post/<int:pk>/delete/', views.post_delete, name='post-delete'),  # 删除
]
```

#### 项目根路由（`My_Blog/urls.py`）
```python
# My_Blog/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls')),  # 包含博客APP路由
]
```

## 四、实战步骤2：编写模板——实现`row + col-md-6 + .card`响应式布局
基于Django模板继承（继承`base.html`），结合Bootstrap核心组合实现布局，同时添加**数据渲染、时间格式化、摘要显示、空数据处理**等实战功能，保证代码的健壮性和用户体验。

### 4.1 核心模板代码（`post_list.html`）
```django
{% extends 'blog/base.html' %}

{% block title %}首页 - 我的博客{% endblock %}

{% block content %}
    
    <h2 class="mb-4 fw-bold">最新文章</h2>
    
    
    <div class="row g-4">
        
        {% for post in posts %}
            <div class="col-md-6">
                
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        
                        <h5 class="card-title mb-3">
                            <a href="{% url 'post-detail' post.pk %}" class="text-decoration-none text-dark hover:text-primary">
                                {{ post.title }}
                            </a>
                        </h5>
                        
                        <p class="card-text text-muted lh-base">
                            {{ post.get_excerpt }}
                        </p>
                    </div>
                    
                    <div class="card-footer bg-transparent d-flex justify-content-between align-items-center border-top">
                        
                        <small class="text-muted">
                            作者：{{ post.author.username }} | 
                            {{ post.created_at|date:"Y-m-d H:i" }}
                        </small>
                        
                        <div class="btn-group btn-group-sm">
                            <a href="{% url 'post-update' post.pk %}" class="btn btn-outline-secondary">
                                <i class="bi bi-pencil"></i> 编辑
                            </a>
                            <a href="{% url 'post-delete' post.pk %}" class="btn btn-outline-danger">
                                <i class="bi bi-trash"></i> 删除
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        {% empty %}
            
            <div class="col-12 text-center py-8 bg-light rounded-3">
                <h5 class="text-muted mb-3">暂无文章，快来发布你的第一篇博客吧！</h5>
                <a href="{% url 'post-create' %}" class="btn btn-primary px-4">
                    <i class="bi bi-pen"></i> 发布文章
                </a>
            </div>
        {% endfor %}
    </div>
{% endblock %}
```

### 4.2 关键模板优化点（核心避坑）
1. **`row g-4`**：替代`row + col-md-6 mb-4`，**统一设置栅格左右+上下间距**，布局更均匀，无需单独为每个卡片加底部间距；
2. **`card h-100`**：强制同一行所有卡片高度100%，解决因标题/摘要长度不同导致的**卡片高度参差不齐**问题；
3. **`card-footer bg-transparent`**：卡片底部透明背景，与主体风格统一，避免突兀的底色差异；
4. **Flex布局工具类**：`d-flex justify-content-between align-items-center`实现底部“作者时间左对齐、按钮右对齐”且**垂直居中**，无需手写浮动；
5. **`{% empty %}`**：Django模板特有的空数据处理，避免无文章时页面空白，提升用户体验；
6. **时间格式化**：通过`|date:"Y-m-d H:i"`将Django的`DateTimeField`转为用户易读格式，替代原始时间戳。

## 五、实战步骤3：添加分页组件——实现页码跳转功能
结合Django分页对象和Bootstrap分页组件，实现**上一页/下一页、页码高亮、边界禁用**功能，仅当文章超过1页时显示，避免无意义的分页渲染。

### 5.1 分页代码（添加到`post_list.html`的`{% endblock %}`上方）
```django

{% if posts.paginator.num_pages > 1 %}
    <nav class="mt-6 d-flex justify-content-center">
        <ul class="pagination">
            
            <li class="page-item {% if not posts.has_previous %}disabled{% endif %}">
                <a class="page-link" href="?page={{ posts.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            
            {% for num in posts.paginator.page_range %}
                {% if posts.number == num %}
                    
                    <li class="page-item active"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                {% elif num > posts.number|add:-2 and num < posts.number|add:2 %}
                    
                    <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                {% endif %}
            {% endfor %}
            
            <li class="page-item {% if not posts.has_next %}disabled{% endif %}">
                <a class="page-link" href="?page={{ posts.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
{% endif %}
```

### 5.2 分页组件关键逻辑
1. **条件渲染**：`{% if posts.paginator.num_pages > 1 %}`确保仅多页时显示分页，单页隐藏；
2. **边界禁用**：通过`{% if not posts.has_previous %}disabled{% endif %}`为无前置/后置页的按钮添加`disabled`类，Bootstrap自动置灰并禁止点击；
3. **页码优化**：仅显示当前页**前后各2个页码**（如当前第3页，显示1、2、3、4、5），避免文章过多时页码列表过长；
4. **当前页高亮**：通过`active`类标记当前页码，让用户清晰定位所处位置。

## 六、实战步骤4：样式优化与交互提升——打造现代视觉体验
添加轻量自定义CSS，优化卡片**hover交互、文字排版、颜色搭配**，保证与Bootstrap原生样式无冲突，同时提升用户交互体验，让列表更符合现代博客设计风格。

### 6.1 自定义CSS（添加到`base.html`的`<head>`标签中）
```css
<style>
    /* 文章卡片：基础样式+过渡效果 */
    .card {
        transition: all 0.3s ease-in-out;
        border: 1px solid #e9ecef;
        border-radius: 0.5rem;
    }
    /* 卡片hover效果：轻微上浮+阴影加深，提升交互感 */
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        border-color: #dee2e6;
    }
    /* 标题链接hover变色：与Bootstrap主色统一 */
    .card-title a:hover {
        color: #0d6efd !important;
    }
    /* 摘要文本：行高优化，提升可读性 */
    .card-text {
        line-height: 1.7;
    }
    /* 分页组件：样式优化，与主色统一 */
    .pagination .page-link {
        color: #0d6efd;
        border: 1px solid #e9ecef;
    }
    .pagination .page-item.active .page-link {
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
    .pagination .page-link:hover {
        background-color: #f8f9fa;
    }
    /* 空数据提示：间距+样式优化 */
    .py-8 {
        padding: 6rem 0;
    }
    /* 按钮组：hover优化 */
    .btn-outline-secondary:hover {
        background-color: #6c757d;
        color: #fff;
    }
    .btn-outline-danger:hover {
        background-color: #dc3545;
        color: #fff;
    }
</style>
```

### 6.2 交互优化核心亮点
1. **平滑过渡**：`transition: all 0.3s ease-in-out`让卡片hover的上浮、阴影变化更平滑，无生硬切换；
2. **视觉反馈**：卡片hover轻微上浮（`transform: translateY(-5px)`）+ 阴影加深，让用户直观感知“可点击”；
3. **风格统一**：所有交互色（链接hover、分页高亮、按钮hover）均使用Bootstrap主色`#0d6efd`，保证全站视觉一致性；
4. **可读性提升**：摘要文本行高设为1.7，分页按钮添加hover背景，优化大篇幅阅读体验。

## 七、常见问题与解决方案——避坑指南
整理开发中5个高频问题，提供**精准原因分析+可落地解决方案**，帮你快速排查问题，避免踩坑。

### 问题1：Bootstrap样式不生效，列布局错乱
**核心原因**：未正确引入Bootstrap CDN/CDN失效；类名拼写错误（如`col-md6`、`row-`）；未用`.container`包裹`row`。
**解决方案**：
1. 确认`base.html`中引入的Bootstrap CSS/JS CDN为官方稳定版（本文提供的CDN可直接复用）；
2. 检查类名拼写，确保`col-md-6`、`row`、`card`等无漏写/错写；
3. 所有`row`必须包裹在`.container`或`.container-fluid`中（本文已严格遵循），否则列会溢出页面。

### 问题2：同行情报高度不一致，布局参差不齐
**核心原因**：文章标题/摘要长度不同，导致卡片自然高度不一致；未添加统一高度样式。
**解决方案**：
给`.card`添加**`h-100`类**（本文已添加），Bootstrap会自动将同一行所有卡片高度设为100%，强制对齐，彻底解决该问题。

### 问题3：分页组件不显示/页码跳转无效
**核心原因**：视图未配置`Paginator`分页；模板变量名错误（如`post`而非`posts`）；页码参数传递错误。
**解决方案**：
1. 确认视图中已创建`Paginator`对象，并将`posts = paginator.page(page)`传递到模板；
2. 检查模板分页变量名，确保与视图`context`中的键一致（本文为`posts`）；
3. 确认页码跳转URL为`?page={{ num }}`，视图通过`request.GET.get('page', 1)`正确获取页码。

### 问题4：文章摘要无省略号/显示不全
**核心原因**：模型未定义`get_excerpt`方法/方法逻辑错误；直接渲染`post.content`未做截断。
**解决方案**：
1. 确认`Post`模型中已添加`get_excerpt`方法（本文2.1节代码），逻辑为“内容超100字符则截断加省略号，否则显示全部”；
2. 模板中调用`{{ post.get_excerpt }}`，而非直接调用`{{ post.content }}`。

### 问题5：小屏幕下列间距过大/卡片贴边
**核心原因**：栅格间距类使用不当；未用`.container`包裹内容，无左右内边距。
**解决方案**：
1. 用`row g-4`替代`row + col-md-6 mb-4`，`g-4`的间距会根据屏幕尺寸自动适配，小屏幕下无过大间距；
2. 所有内容包裹在`.container`中（本文`base.html`已配置），Bootstrap会自动添加左右内边距，避免卡片贴边。

## 八、扩展功能：按需升级你的文章列表
本文实现的是基础版响应式列表，可根据博客需求添加以下扩展功能，打造更强大、更实用的博客系统，所有扩展均基于现有代码无缝衔接。

### 1. 文章分类/标签筛选
- 模型层：添加`Category`（分类）和`Tag`（标签）模型，与`Post`分别建立**外键**和**多对多**关系；
- 视图层：添加筛选逻辑，根据前端传递的分类/标签ID查询对应文章；
- 模板层：添加分类/标签导航栏，点击后触发筛选，显示对应文章列表。

### 2. 文章搜索功能
- 视图层：使用Django的`Q`对象实现**模糊搜索**，接收前端搜索关键词，查询`title`和`content`中包含关键词的文章；
- 模板层：在页面顶部添加搜索框，通过GET请求传递关键词，实现无刷新搜索。

### 3. 阅读量统计
- 模型层：在`Post`模型中添加`views`字段（`IntegerField(default=0)`），用于存储阅读量；
- 视图层：在文章详情视图`post_detail`中，添加`post.views += 1`并`post.save()`，实现“每次访问阅读量+1”；
- 模板层：在文章卡片中添加阅读量显示，如`<i class="bi bi-eye"></i> {{ post.views }}`。

### 4. 精细化权限控制
- 视图层：使用Django的`@login_required`装饰器，限制未登录用户无法编辑/删除文章；
- 模板层：通过`{% if user == post.author %}`判断，**仅文章作者可见编辑/删除按钮**，其他用户仅能查看。

### 5. 文章点赞/收藏功能
- 模型层：添加`Like`和`Collect`模型，与`Post`和`User`均建立外键关系，记录用户的点赞/收藏行为；
- 视图层：添加点赞/收藏接口，实现点击后计数+1/取消计数；
- 模板层：在卡片中添加点赞/收藏按钮，显示当前点赞/收藏数，点击后触发交互。

## 九、总结
本文围绕Django+Bootstrap技术栈，从**原理讲解→前置准备→视图开发→模板渲染→样式优化→问题解决**，完整实现了基于`row + col-md-6 + .card`的全响应式博客文章列表，核心收获如下：
1. 掌握Bootstrap栅格系统`row + col-md-6`的响应式原理，能根据需求灵活调整列数（如三列`col-md-4`、四列`col-md-3`）；
2. 学会Bootstrap卡片组件`.card`的实战用法，掌握`h-100`、`g-4`等核心类的避坑技巧，解决布局错乱问题；
3. 掌握Django视图中**数据查询**和**分页处理**的核心逻辑，能高效将后端数据传递到前端模板；
4. 学会Django模板的实战技巧，包括数据遍历、空数据处理、时间格式化、URL反向解析、分页渲染；
5. 积累了响应式布局、卡片开发、分页实现等高频场景的**避坑经验**，能快速排查和解决开发中的常见问题。

取消