AnQiCMS如何实现文章列表的分页显示，并自定义分页导航的样式和逻辑？

AnQiCMS 作为一个高效灵活的内容管理系统，在处理文章列表和分页显示方面提供了直观而强大的功能，让内容呈现既贴合用户需求，又能满足各种自定义场景。如果您正在使用 AnQiCMS 构建网站，并希望实现文章列表的分页功能，同时精细化控制分页导航的样式和逻辑，那么以下内容将为您详细解读其实现方式。

核心功能：文章列表与分页标签的联动

在 AnQiCMS 中，文章列表的分页显示主要依赖于两个核心模板标签的紧密协作：archiveList 用于获取文章数据，而 pagination 则负责生成分页导航。

获取文章列表：archiveList 标签

archiveList 标签是 AnQiCMS 中用于获取各类文档（包括文章、产品等自定义模型内容）的强大工具。要实现分页显示，您需要将 archiveList 标签的 type 参数明确设置为 page。这会告诉系统，您期望它返回分页所需的数据，而不仅仅是固定数量的列表项。

在配置 archiveList 时，一些常用参数可以帮助您精确控制文章的获取逻辑：

• moduleId：指定您要获取哪个内容模型的文章列表，例如文章模型（moduleId="1"）或产品模型等。
• categoryId：根据分类 ID 获取文章。您可以指定单个分类 ID，也可以用逗号分隔多个 ID。如果希望标签自动识别当前页面的分类 ID，则无需设置此参数；若要完全忽略分类，可以设置为 categoryId="0"。
• limit：这决定了每页显示的文章数量，例如 limit="10" 表示每页显示 10 篇文章。
• order：控制文章的排序方式，例如按最新发布时间排序 (order="id desc") 或按浏览量排序 (order="views desc")。
• q：用于搜索功能，当 type 为 page 时，q 参数会自动从 URL 中读取搜索关键词，从而实现搜索结果的分页。

一个基础的文章列表获取示例，不包含分页导航部分，看起来会是这样：

{# 假设我们正在获取文章模型下的文章列表，每页显示10篇 #}
{% archiveList archives with type="page" moduleId="1" limit="10" order="id desc" %}
    {% for item in archives %}
    <li>
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            <p>{{ item.Description|truncatechars:100 }}</p>
            <div>
                <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量：{{ item.Views }}</span>
            </div>
        </a>
    </li>
    {% empty %}
    <li>暂无相关文章。</li>
    {% endfor %}
{% endarchiveList %}

构建分页导航：pagination 标签

pagination 标签是 AnQiCMS 用于生成分页导航的专用工具。它会处理复杂的页码计算和链接生成逻辑，您只需在模板中调用并传入由 archiveList 标签（设置为 type="page" 时）生成的 pages 变量即可。

pagination 标签本身支持的参数相对较少，但其内部的 pages 变量包含了丰富的分页信息：

• show：控制分页导航中最多显示多少个页码按钮，例如 show="5" 会显示当前页附近的最多 5 个页码。
• pages.TotalItems：总的文章数量。
• pages.TotalPages：总的页码数量。
• pages.CurrentPage：当前访问的页码。
• pages.FirstPage、pages.LastPage、pages.PrevPage、pages.NextPage：这些是对象，分别代表首页、末页、上一页和下一页的链接信息，包括 Name（链接文本）和 Link（链接地址），以及 IsCurrent（是否为当前页）。
• pages.Pages：一个包含中间页码列表的数组，每个元素也是一个对象，包含 Name、Link 和 IsCurrent。

一个基础的分页导航生成示例，它会生成页码链接：

<div class="pagination">
    {% pagination pages with show="5" %}
        <ul>
            {# 首页链接 #}
            <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>

组合与自定义：实现完整的文章列表分页

将 archiveList 和 pagination 这两个标签组合起来，并结合 HTML 结构和 CSS 样式，就能实现一个完整且可定制的文章列表分页功能。通常，这些代码会放在您的列表模板文件（如 archive/list.html）中。

以下是一个将文章列表和分页导航结合的完整示例，展示了如何组织 HTML 结构并利用 IsCurrent 属性来高亮当前页码：

”`twig

<ul class="article-items">
    {# 使用 archiveList 获取文章数据，并指定为分页类型 #}
    {% archiveList archives with type="page" moduleId="1" limit="10" order="id desc" %}
        {% for item in archives %}
        <li class="article-item">
            <a href="{{ item.Link }}" class="article-link">
                {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">{% endif %}
                <div class="article-info">
                    <h3 class="article-title">{{ item.Title }}</h3>
                    <p class="article-description">{{ item.Description|truncatechars:150 }}</p>
                    <div class="article-meta">
                        <span class="category">分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span class="date">发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span class="views">浏览量：{{ item.Views }}</span>
                    </div>
                </div>
            </a>
        </li>
        {% empty %}
        <li class="no-content">很抱歉，当前分类或搜索条件下暂无文章内容。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

{# 分页导航区域 #}
<nav class="pagination-nav">
    {% pagination pages with show="7" %} {# 设置最多显示 7 个页码按钮 #}
        <ul class="pagination-list">
            {# 显示总页数和总条目数，方便用户了解列表规模 #}
            <li class="page-info">共 {{ pages.TotalPages }} 页 / {{ pages.TotalItems }} 条</li>

            {# 首页链接，如果当前是首页则添加 active 类 #}
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{ pages.FirstPage.Link }}" class="page-link">{{ pages.FirstPage.Name }}</a>
            </li>
            {# 上一页链接，仅当存在上一页时显示 #}
            {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{ pages.PrevPage.Link }}" class="page-link">{{ pages.PrevPage.Name }}</a>
            </li>
            {% endif %}
            {# 中间页码链接，遍历 pages.Pages 数组 #}