如何在内容列表中实现分页功能？

在管理网站内容时，尤其是当内容数量日益增多的时候，一个直观且高效的分页功能就显得尤为重要。它不仅能让访客更快地找到所需信息，提升浏览体验，还能避免单页加载过多内容导致的性能问题。在安企CMS中，实现内容列表的分页功能既灵活又直接，只需简单几步即可配置完成。

安企CMS采用Django模板引擎语法，让您可以通过清晰的标签来控制内容的展示逻辑。要为您的内容列表添加分页，我们主要会用到两个核心标签：用于获取内容列表的 archiveList（或其他类似的内容列表标签），以及专门用于生成分页导航的 pagination 标签。

准备您的内容列表标签

首先，我们需要在模板文件中确定哪个列表需要分页显示。以最常见的文章列表为例，您会用到 archiveList 标签来从数据库中检索内容。关键在于，您需要告诉 archiveList 这是一个需要分页的列表，并且指定每页显示多少条内容。

您可以通过将 type 参数设置为 "page"，并利用 limit 参数来定义每页的内容数量。例如，如果您想每页展示10篇文章，可以这样设置：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <time>{{stampToDate(item.CreatedTime, "2006-01-02")}}</time>
        </article>
    {% empty %}
        <p>抱歉，目前没有内容可以显示。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中，archiveList 标签将内容列表数据存储在 archives 变量中，供 for 循环遍历显示。而 type="page" 的设置，会同时生成一个名为 pages 的分页对象，这个对象就是我们接下来实现分页导航的关键。

引入分页标签

有了内容列表的数据和分页对象，接下来就可以在页面底部或合适的位置添加分页导航了。您需要使用 pagination 标签，并将 archiveList 生成的 pages 对象传递给它。

pagination 标签非常智能，它会自动根据当前的页码、总页数以及内容列表标签的URL结构来生成正确的翻页链接。您可以利用 show 参数来控制在分页导航中显示多少个页码按钮，例如 show="5" 会显示当前页附近的5个页码。

pages 对象包含了一系列有用的属性，比如 FirstPage（首页）、PrevPage（上一页）、Pages（中间页码列表）、NextPage（下一页）和 LastPage（尾页）。每个页码元素（包括 FirstPage、PrevPage 等）都拥有 Name（显示文本）、Link（链接地址）和 IsCurrent（是否为当前页）等属性，方便您进行灵活的样式控制。

以下是一个基本的分页导航示例：

<nav class="pagination-nav">
    {% pagination pages with show="5" %}
        {# 首页按钮，当处于首页时会应用active样式 #}
        <a href="{{pages.FirstPage.Link}}" class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>

        {# 上一页按钮，只有当存在上一页时才显示 #}
        {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}" class="page-link">上一页</a>
        {% endif %}

        {# 中间页码列表，遍历显示每个页码 #}
        {% for item in pages.Pages %}
            <a href="{{item.Link}}" class="page-link {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
        {% endfor %}

        {# 下一页按钮，只有当存在下一页时才显示 #}
        {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}" class="page-link">下一页</a>
        {% endif %}

        {# 尾页按钮，当处于尾页时会应用active样式 #}
        <a href="{{pages.LastPage.Link}}" class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>
        
        {# 您还可以显示总条数、总页数和当前页码 #}
        <span class="page-info">共 {{pages.TotalItems}} 条，{{pages.CurrentPage}}/{{pages.TotalPages}} 页</span>
    {% endpagination %}
</nav>

整合代码片段

将上述两个部分的标签放在同一个模板文件中，就可以实现一个完整的分页内容列表了。通常，内容列表（archiveList 循环的部分）会放在页面的主体区域，而分页导航（pagination 部分）则会放置在内容列表的下方。

例如，一个典型的 list.html 模板文件结构可能是这样的：

{# 假设这是您的文章列表页面模板 #}
{% extends 'base.html' %} {# 继承基础模板 #}

{% block content %}
    <div class="articles-list">
        {# 内容列表区域 #}
        {% archiveList archives with type="page" limit="10" %}
            {% for item in archives %}
                <article class="article-item">
                    <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
                    <p class="article-description">{{item.Description}}</p>
                    <div class="article-meta">
                        <span>发布时间：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>浏览量：{{item.Views}}</span>
                    </div>
                </article>
            {% empty %}
                <p class="no-content">抱歉，目前没有内容可以显示。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>

    {# 分页导航区域 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <nav class="pagination-nav">
                <a href="{{pages.FirstPage.Link}}" class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>
                {% if pages.PrevPage %}
                    <a href="{{pages.PrevPage.Link}}" class="page-link">上一页</a>
                {% endif %}
                {% for item in pages.Pages %}
                    <a href="{{item.Link}}" class="page-link {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
                {% endfor %}
                {% if pages.NextPage %}
                    <a href="{{pages.NextPage.Link}}" class="page-link">下一页</a>
                {% endif %}
                <a href="{{pages.LastPage.Link}}" class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>
            </nav>
            <div class="page-summary">
                当前第 {{pages.CurrentPage}} 页，共 {{pages.TotalPages}} 页，总计 {{pages.TotalItems}} 条内容。
            </div>
        {% endpagination %}
    </div>
{% endblock %}

{# 您还需要在样式文件中为 .pagination-nav 和 .page-link, .active 等类添加样式，以美化分页按钮 #}

通过上面这些简单的步骤，您就可以在安企