AnQiCMS中如何为文章列表正确添加基础的分页标签功能？

在内容为王的数字时代，网站的内容列表承载着用户探索信息、了解产品的首要入口。一个设计合理、体验流畅的文章列表不仅能有效提升用户在网站的停留时间，更能通过精准的导航指引，帮助用户快速找到所需信息。安企CMS（AnQiCMS）作为一款高效、灵活的内容管理系统，深谙此道，为网站运营者提供了强大且易用的模板标签功能，其中，为文章列表添加基础的分页功能，是提升用户体验和网站可访问性的关键一环。

本文将围绕安企CMS的核心功能，深入浅出地讲解如何在文章列表页中正确地引入和配置分页标签，确保您的网站内容能够以最友好的方式呈现给访客。

洞察安企CMS的分页哲学

在安企CMS的模板体系中，分页功能的实现并非一个独立的、静态的元素，而是与内容列表标签紧密配合的动态过程。它遵循着“先取数据，再显分页”的逻辑。这意味着，我们需要首先通过特定的标签获取需要分页展示的文章数据，然后才能在此基础上构建分页导航。

安企CMS的模板语法借鉴了Django模板引擎的简洁风格，核心在于两种标签的使用：

• 变量标签 {{ 变量名 }}：用于输出数据。
• 逻辑标签 {% 标签名 参数 %}：用于控制流程（如循环、条件判断）或调用特定功能模块。

理解了这一点，我们就可以开始着手为文章列表添加分页功能了。

第一步：运用 archiveList 标签获取分页数据

要实现分页，我们首先需要告诉安企CMS要获取哪些文章，并且这些文章是需要分页展示的。这时，archiveList 标签就派上了用场。

archiveList 是安企CMS中一个万能的内容列表标签，它能够根据多种条件筛选并输出文章、产品等内容。对于分页功能，它的一个关键参数是 type="page"。当 type 设置为 page 时，archiveList 不仅仅返回文章数据，还会自动生成用于分页导航的必要信息。

让我们通过一个简单的例子来理解如何使用它：

{# 假设我们正在一个分类列表页，希望展示该分类下的文章，并进行分页 #}
{% archiveList archives with type="page" limit="10" %}
    {# articles 是一个数组，包含了当前页的所有文章 #}
    {% for item in archives %}
    <div class="article-item">
        <h2 class="article-title"><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>
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
        </div>
    </div>
    {% empty %}
    <p>当前分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

在上面的代码块中：

• 我们通过 {% archiveList archives with type="page" limit="10" %} 告诉安企CMS，我们想要获取文章列表，并且是以分页的形式（type="page"），每页显示10篇文章（limit="10"）。
• archives 是我们自定义的一个变量名，它将承载当前页的文章数据。
• for item in archives 循环遍历了当前页的每一篇文章，item 变量则代表了单篇文章对象，你可以通过 item.Title、item.Link 等方式访问文章的各项属性。
• {% empty %} 块是一个非常实用的特性，当 archives 列表为空时，会显示 empty 块内的内容，避免页面空白。

archiveList 还有许多其他参数，例如 moduleId（指定模型ID）、categoryId（指定分类ID）、order（排序方式）等，您可以根据实际需求灵活配置。但请记住，只要涉及到分页，type="page" 是不可或缺的。

第二步：利用 pagination 标签构建分页导航

当 archiveList 以 type="page" 的形式被调用后，安企CMS会在后台默默地准备好所有与分页相关的数据，并将其传递给模板。这时，我们就可以使用 pagination 标签来将这些数据以用户友好的方式展现出来。

pagination 标签专门用于渲染分页导航条。它会接收一个包含分页信息的 pages 对象，并根据您的配置生成“首页”、“上一页”、“下一页”以及中间的页码链接。

以下是 pagination 标签的典型用法：

{# 承接上一步的 archiveList 标签，分页标签通常紧随其后 #}
<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul>
            {# 显示总条数、总页数和当前页 #}
            <li>总数：{{pages.TotalItems}} 条，共 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

            {# 首页链接 #}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            </li>

            {# 上一页链接 #}
            {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            </li>
            {% endif %}

            {# 中间页码链接 #}
            {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
            {% endfor %}

            {# 下一页链接 #}
            {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            </li>
            {% endif %}

            {# 末页链接 #}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
            </li>
        </ul>
    {% endpagination %}
</div>

在这个示例中：

• {% pagination pages with show="5" %}：我们定义了一个名为 pages 的变量来接收分页信息，并指定 show="5"，表示最多显示5个中间页码链接。
• pages 对象包含了丰富的分页元数据：
  • pages.TotalItems：文章总数。
  • pages.TotalPages：总页数。
  • pages.CurrentPage：当前页码。
  • pages.FirstPage、pages.LastPage、pages.PrevPage、pages.NextPage：分别代表首页、末页、上一页和下一页的对象，它们都包含 Name (链接文本，如“首页”)、Link (链接地址) 和 IsCurrent (是否是当前页) 等属性。
  • pages.Pages：这是一个数组，包含了所有需要显示的中间页码链接，每个元素同样具有 Name、Link 和 IsCurrent 属性。
• 通过 {% if pages.PrevPage %} 这样的条件判断，我们可以智能地控制“上一页”和“下一页”按钮的显示，避免在第一页或最后一页出现无效链接。
• {% if item.IsCurrent %}active{% endif %} 这种模式常用于为当前页码添加特殊的CSS类，以高亮显示用户所在的页面。

完整示例：将分页功能应用于文章列表

现在，让我们将 `archiveList