如何实现文章列表的分页显示并限制每页数量？

在网站运营中，尤其是管理大量内容时，文章列表的分页显示是一个不可或缺的功能。它不仅能让用户浏览内容更加便捷，避免单页加载过多数据导致速度变慢，还能提高网站的整体用户体验和SEO友好性。在安企CMS中，实现文章列表的分页显示并灵活控制每页数量，操作起来非常直观。

接下来，我们将一起探索如何在安企CMS的模板中实现文章列表的分页功能，并限制每页显示的文章数量。

高效管理内容：实现文章列表分页

安企CMS提供了强大的模板标签功能，其中archiveList标签是用来获取文章（或其他内容模型）列表的核心。要实现分页，我们首先需要告诉archiveList标签，我们想要的是一个分页列表，而不是简单的固定数量列表。

这可以通过在archiveList标签中设置type="page"参数来实现。例如，在一个分类列表页面（通常对应模板目录中的{模型table}/list.html文件），您可以使用如下方式获取文章列表：

{% archiveList archives with type="page" %}
    {% for item in archives %}
        <div class="article-item">
            <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中，archives是我们定义的变量名，用于存储获取到的文章列表数据。type="page"参数告知系统，这个列表需要支持分页。for item in archives则遍历每一篇文章，并显示其标题、描述、发布日期和阅读量等信息。empty标签是一个非常实用的特性，当列表为空时，它会显示备用内容，避免页面空白。

精细控制：限制每页文章数量

当type="page"启用分页功能后，我们还需要一个参数来控制每页显示的文章数量，这就是limit参数。limit参数允许您设置一个整数值，来精确定义每页呈现的文章条数。

例如，如果您希望每页显示10篇文章，可以在archiveList标签中添加limit="10"：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

通过调整limit的值，您可以轻松地控制每页内容的密度，以适应不同的设计风格或用户阅读习惯。例如，博客文章列表可能希望每页多显示一些（如15-20篇），而产品展示列表可能需要更少的数量以突出每个产品的细节（如6-8个）。

导航与用户体验：实现分页控制

仅仅显示文章列表和限制数量还不够，用户还需要一个直观的分页导航来切换页面。安企CMS为此提供了专门的pagination标签。这个标签能够自动根据当前的URL和archiveList生成的分页信息，渲染出完整的“首页”、“上一页”、“下一页”、“尾页”以及中间的页码链接。

pagination标签通常与archiveList标签一起使用，并且需要定义一个变量名来接收分页数据，例如pages。其中一个常用参数是show，它可以控制中间页码区域最多显示多少个页码按钮。

以下是一个完整的分页导航代码示例：

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 首页链接 #}
            <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>
        <div class="pagination-info">
            总共 <b>{{pages.TotalItems}}</b> 篇文章，当前第 <b>{{pages.CurrentPage}}</b> 页 / 共 <b>{{pages.TotalPages}}</b> 页
        </div>
    {% endpagination %}
</div>

在上述代码中，pages变量包含了所有与分页相关的信息，例如pages.FirstPage.Link获取首页的链接，pages.CurrentPage表示当前页码。IsCurrent属性是一个非常方便的布尔值，当某个页码是当前页面时，它会返回true，这允许您通过CSS为其添加active类，从而高亮显示当前页码，提升用户体验。

综合实践：完整的文章列表分页代码

将archiveList和pagination标签结合起来，您就可以在安企CMS中实现一个功能完善且易于管理的文章列表分页。通常，这些代码会放置在您网站模板中的{模型table}/list.html文件内，例如article/list.html。

以下是一个整合后的示例：

”`twig {# 假设这是文章分类列表页的模板文件，如：/template/default/article/list.html #}

{% extends ‘bash.html’ %} {# 继承基础布局文件 #}

{% block content %}

<h1 class="mb-4">
    {% categoryDetail with name="Title" %}
</h1>

<div class="article-list-wrapper">
    {% archiveList archives with type="page" limit="10" %} {# 获取分页文章列表，每页10篇 #}
        {% for item in archives %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="{{item.Link}}">{{item.Title}}</a>
                </h5>
                <p class="card-text">{{item.Description}}</p>
                <p class="card-text-sm text-muted">
                    <small>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
                    <small class="ms-3">阅读量：{{item.Views}}</small>
                </p>
            </div>
        </div>
        {% empty %}
        <div class="alert alert-info" role="alert">
            该分类下暂时没有文章。
        </div>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 分页导航区域 #}
<nav aria-label="Page navigation" class="mt-4">
    {% pagination pages with show="5" %} {# 显示5个页码按钮 #}
        <ul class="pagination justify-content-center">
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{pages.FirstPage.Link}}" aria-label="首页">首页</a>
            </li>
            {% if pages.PrevPage %}
            <li class="page-item">
                <a class="page-link" href="{{pages.PrevPage.Link}}" aria-label="上一页">上一页</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}}" aria-label="下一页">下一页</a>
            </li>
            {% endif %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{pages.Last