如何在安企CMS中实现文章列表的分页显示？

在内容管理系统中，文章列表的分页显示是一项基本而重要的功能。它不仅能有效管理大量内容，提升网站的加载速度，避免用户面对无限滚动的页面而感到疲惫，更是搜索引擎优化（SEO）的关键一环，帮助搜索引擎更好地抓取和索引网站内容。对于使用安企CMS（AnQiCMS）的用户来说，实现文章列表的分页功能，得益于其灵活且类似Django的模板引擎，过程直观且强大。

安企CMS的模板系统为我们提供了两个核心标签，它们是实现文章列表分页的基石：archiveList（用于获取文章数据）和 pagination（用于生成分页导航）。接下来，我们将详细探讨如何利用这两个标签，在您的网站上优雅地实现分页效果。

一、理解文章列表数据的获取：archiveList 标签

archiveList 标签是安企CMS中用来查询和展示文章列表的主要工具。要实现分页，我们需要特别关注它的几个参数：

  1. type="page"：这是实现分页的关键指令。当您将 type 参数设置为 "page" 时，archiveList 标签就会自动启用分页模式，并将当前页面的分页信息（如当前页码、总页数等）传递给模板上下文，供 pagination 标签使用。
  2. limit：这个参数用于控制每页显示的文章数量。例如，limit="10" 意味着每页将展示10篇文章。
  3. moduleId 和 categoryId：如果您想获取特定内容模型（如“文章模型”或“产品模型”）或特定分类下的文章，可以使用这两个参数进行筛选。
  4. q (搜索关键词)：如果您的文章列表需要支持关键词搜索功能，并且搜索结果也要分页，archiveList 标签会自动处理URL中的 q 参数，将搜索结果进行分页显示。

通过组合这些参数，archiveList 能够灵活地获取您需要展示的文章数据。例如，获取“文章模型”下，每页显示10篇文章并支持分页的文章列表，可以这样写：

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        当前分类下暂无文章。
    </li>
    {% endfor %}
{% endarchiveList %}

在上面的代码中，我们使用 archiveList 获取了文章数据，并通过 for 循环遍历 archives 变量，展示每篇文章的标题、描述、分类、发布日期、浏览量和缩略图。{% empty %} 块则处理了列表为空的情况。

二、构建分页导航：pagination 标签

在 archiveList 标签启用 type="page" 后，页面上下文会自动包含一个 pages 对象，这个对象包含了所有与分页相关的信息。pagination 标签的作用就是利用这个 pages 对象，生成一套完整且可交互的分页导航。

pagination 标签的核心参数是 show，它用来控制在分页导航中，除了“首页”、“上一页”、“下一页”、“末页”之外，中间区域显示多少个相邻的页码按钮。例如，show="5" 会显示当前页码左右各2个，总计5个页码。

以下是 pagination 标签的常用结构及其 pages 对象中包含的关键属性：

  • pages.TotalItems：总文章数量。
  • pages.TotalPages：总页数。
  • pages.CurrentPage：当前页码。
  • pages.FirstPage：首页信息（包含 Name 和 Link 属性，以及 IsCurrent 判断是否为当前页）。
  • pages.PrevPage：上一页信息（同样包含 Name、Link、IsCurrent）。
  • pages.NextPage：下一页信息。
  • pages.LastPage：末页信息。
  • pages.Pages：一个数组，包含了中间部分的页码按钮信息，每个元素都有 Name、Link、IsCurrent 属性。

您可以通过遍历 pages.Pages 数组，并结合 if 语句判断 IsCurrent 属性来高亮显示当前页，从而构建一个完整的分页导航。

    {# 分页代码 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <ul class="pagination">
                {# 首页按钮 #}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a class="page-link" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>
                {# 上一页按钮 #}
                {% if pages.PrevPage %}
                <li class="page-item">
                    <a class="page-link" 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 class="page-link" href="{{item.Link}}">{{item.Name}}</a>
                </li>
                {% endfor %}
                {# 下一页按钮 #}
                {% if pages.NextPage %}
                <li class="page-item">
                    <a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
                </li>
                {% endif %}
                {# 末页按钮 #}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a class="page-link" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
                </li>
            </ul>
        {% endpagination %}
    </div>

在这个分页代码块中，我们首先使用 {% pagination pages with show="5" %} 来初始化分页数据。然后，根据 pages 对象中的属性，逐一构建“首页”、“上一页”、“中间页码”、“下一页”和“末页”链接。通过 {% if item.IsCurrent %} 判断当前页，并为其添加 active 类，以便通过CSS进行高亮显示。

三、整合：一个完整的分页列表示例

将 archiveList 和 pagination 标签结合起来，通常放置在文章列表页模板（例如 archive/list.html 或 category/list.html）中，便能实现动态的文章分页功能。

”`twig <!DOCTYPE html> 

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<style>
    .article-list { list-style: none; padding: 0; }
    .article-list li { margin-bottom: 15px