• 使用 bootstrap3

      • BootCDN免费CDN加速服务
        1. <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        2. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    • article.html ```html <!DOCTYPE html>

        {% 这些是内容 %} {% for article in articles %}
      • {{ article.title }} {{ article.content }}
        • {% endfor %}
        {# 要求该类 #} {# 上一页 #} {% if page_obj.has_previous %} {# 如果有上一页 #}
      • 上一页
        • {% else %}
      • 上一页
        • {# 禁用 #} {% endif %} {# 中间页码 #} {% for page in paginator.page_range %} {% if page_obj.number == page %}
      • {{ page }}
        • {# 当前按钮点击无反应且有阴影 #} {% else %}
      • {{ page }}
        • {# 跳转下一页 #} {% endif %} {% endfor %} {# 下一页 #} {% if page_obj.has_next %}
      • 下一页
        • {% else %}
      • 下一页
        • {% endif %} 

    2. - `urls.py`
    3. ```python
    4. from django.urls import path
    5. from . import views
    7. app_name = 'front'
    9. urlpatterns = [
    10.     path('', views.ArticleListView.as_view(), name='listview'),
    11. ]
    • views.py ```python from django.views.generic import ListView from .models import Article

    class ArticleListView(ListView): model = Article template_name = “article.html” paginate_by = 25 context_object_name = “articles” ordering = “create_time” page_kwarg = “page”

    1. def get_context_data(self, *, object_list=None, **kwargs):
    2.     context = super(ArticleListView, self).get_context_data(**kwargs)
    3.     return context

    ```

    • 运行效果
      添加分页 - 图1