在安企CMS中管理网站内容，文章列表页通常是用户浏览信息的主要入口之一。为了提供更流畅的用户体验并优化页面加载性能，实现动态分页和灵活控制每页显示数量显得尤为重要。安企CMS提供了强大且易于使用的模板标签，让我们可以轻松实现这些功能。

核心概念：动态分页与每页数量控制的基石

在安企CMS中，实现文章列表的动态分页主要依赖于两个核心模板标签：

  1. archiveList 标签：负责从数据库中获取符合条件的文章数据。通过设定其 type="page" 参数，我们可以告诉系统为这些文章数据生成分页所需的信息。同时，limit 参数则直接控制了每页显示的文章数量。
  2. pagination 标签：这个标签的作用是根据 archiveList 生成的分页数据，构建并显示出实际的分页导航链接，例如“上一页”、“下一页”以及具体的页码数字。

这两个标签协同工作，使得文章列表不仅能显示数据，还能根据页码请求动态加载不同页的内容，并让用户直观地进行页面跳转。

准备工作：理解模板结构

在安企CMS中，文章列表页的模板文件通常位于您当前使用模板包的相应目录下。根据系统约定，这些文件可能命名为 {模型table}/list.html 或更具体的 {模型table}/list-{分类ID}.html。例如，如果您在文章模型下创建了一个名为“新闻”的分类，那么其列表页模板可能是 article/list.html 或 article/list-新闻分类ID.html。理解这些模板文件的位置，有助于您精准地修改和添加分页逻辑。

第一步：获取文章列表数据（archiveList标签）

首先，我们需要在模板中调用 archiveList 标签来获取文章数据。这个标签的功能非常灵活，可以根据多种条件筛选文章。

要实现分页，关键在于为 type 参数赋值为 "page"。而 limit 参数则用于设置每页希望显示的文章数量。例如，如果您希望每页显示10篇文章，可以这样设置：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>{{item.Description}}</p>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
        </a>
    </li>
    {% empty %}
    <li>暂无文章内容。</li>
    {% endfor %}
{% endarchiveList %}

在上面的代码中：

  • archives 是我们自定义的一个变量名，用于存储获取到的文章列表数据。
  • type="page" 明确告知系统，这是一次分页查询，系统会同时准备分页所需的数据。
  • limit="10" 设置了每页显示10篇文章。您可以根据需要调整这个数字。
  • {% for item in archives %} 循环遍历并显示每篇文章的标题、描述、发布日期和浏览量等信息。

除了 type 和 limit，archiveList 标签还支持许多其他有用的参数，例如 moduleId（指定模型ID）、categoryId（指定分类ID）、order（指定排序方式，如 id desc 按ID倒序）、q（根据URL中的搜索关键词自动筛选）等，这些参数都可以帮助您构建更精细化的文章列表。

第二步：构建分页导航（pagination标签）

在 archiveList 标签生成了分页数据之后，我们就可以使用 pagination 标签来渲染分页导航了。这个标签会接收 archiveList 内部生成的分页信息，并将其转化为用户友好的链接集合。

<div class="pagination-controls">
    {% 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>

在上述代码中：

  • pages 是一个自定义变量名，用于接收 pagination 标签提供给我们的分页对象。
  • show="5" 参数控制了分页导航中一次性显示多少个页码数字（不包括“首页”、“上一页”等）。您可以根据页面布局调整这个值。
  • pages 对象包含了丰富的分页信息，如 TotalItems（总记录数）、TotalPages（总页数）、CurrentPage（当前页码）以及指向各个分页链接的子对象 (FirstPage, PrevPage, NextPage, LastPage) 和页码数组 (Pages)。通过遍历这些子对象和数组，您可以灵活地构建出各种样式的分页导航。

整合实践：完整代码示例

将上述两个标签结合起来，一个具备动态分页和每页数量控制的文章列表页就基本完成了。完整的模板代码大致如下：

”`twig {# article/list.html 或其他文章列表模板文件 #} <!DOCTYPE html> 

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %} - 文章列表</title>
<style>
    .article-list ul { list-style: none; padding: 0; }
    .article-list li { margin-bottom: 15px; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
    .article-list li a { text-decoration: none; color: #333; display: block; }
    .article-list li h5 { font-size: 18px; margin-bottom: 5px; }
    .article-list li p { font-size: 14px; color: #666; margin-bottom: 5px; }
    .article-list li span { font-size: 12px; color: #999; margin-right: 10px; }
    .pagination-controls ul { list-style: none; padding: 0; display: flex; justify-content: center; margin-top: 20px; }
    .pagination-controls li { margin: 0 5px; }
    .pagination-controls li a { display: block; padding: 8px 12px; border: 1px solid #ddd; text-decoration: none; color: #333; border-radius: 4px; }
    .pagination-controls li.active a, .pagination-controls li a:hover { background-color: #007bff; color: #fff; border-color: #007bff; }
</style>


<div class="container">
    <h1>最新文章</h1>
    <div class="article-list">
        <ul>
            {% archiveList archives with type="page" limit="10" moduleId="1" order="id desc" %}
                {% for item in archives %}
                <li>
                    <a href="{{item.Link}}">
                        <h5>{{item.Title}}</h5>
                        <p>{{item.Description}}</p>
                        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>浏览量：{{item.Views}}</span>
                    </a>
                </li>
                {% empty %}
                <li>暂无文章内容。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>