如何对文章列表进行分页显示，并自定义分页导航的样式和页码数量？

在网站内容日益丰富的今天，如何高效地展示大量文章，同时确保用户浏览体验的流畅性，是每一个网站运营者需要思考的问题。安企CMS（AnQiCMS）提供了强大且灵活的文章列表分页功能，不仅能帮助网站优化内容呈现，还能通过自定义样式和页码数量，更好地融入网站整体设计，提升用户交互体验。

接下来，我们将深入探讨如何在安企CMS中实现文章列表的分页显示，并详细讲解如何根据您的需求自定义分页导航的样式和页码数量。

一、实现文章列表的分页显示

在安企CMS中，要对文章列表进行分页显示，核心在于使用模板标签 archiveList 来获取数据，并指定其为分页模式。

首先，您需要在模板文件中（通常是列表页模板，如 {模型table}/list.html 或自定义的列表模板）使用 archiveList 标签来检索文章数据。这个标签非常灵活，可以根据分类ID、模型ID、推荐属性等多种条件来筛选文章。

关键在于为 archiveList 标签设置 type="page" 参数。一旦设置了这个参数，安企CMS就会自动处理当前页面的分页逻辑，根据您指定的 limit 参数（每页显示的文章数量）来返回当前页的文章数据。

例如，如果您想在当前分类下显示每页10篇文章，可以这样编写代码：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            <h4>{{item.Title}}</h4>
            <p>{{item.Description}}</p>
            <div class="meta">
                <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 src="{{item.Thumb}}" alt="{{item.Title}}">
        </a>
        {% endif %}
    </div>
    {% empty %}
    <p>抱歉，当前分类暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中：

• archiveList archives with type="page" limit="10" 会获取当前页码对应的10篇文章，并将结果存储在 archives 变量中。
• {% for item in archives %} 循环遍历这些文章，item 变量包含了每篇文章的详细信息，如标题 (item.Title)、链接 (item.Link)、描述 (item.Description) 等。
• {% empty %} 块用于在没有任何文章数据时显示一条友好提示，避免页面空白。

通过这种方式，您已经成功地让文章列表进入了分页模式。接下来，我们需要为用户提供导航到不同页码的工具。

二、渲染分页导航

文章列表数据准备好后，就需要使用 pagination 标签来生成并显示分页导航。pagination 标签通常紧随 archiveList 标签之后使用，它会根据 archiveList 提供的分页信息，自动生成页码链接和导航按钮。

pagination 标签会将分页数据组织成一个 pages 对象，这个对象包含了当前分页状态的各种有用信息，如总文章数、总页数、当前页码、首页链接、上一页链接、下一页链接、尾页链接以及一个包含所有可见页码的数组。

一个基础的分页导航实现可能看起来像这样：

<div class="pagination-container">
    {% 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>
    <p>总共有 {{pages.TotalItems}} 篇文章，分为 {{pages.TotalPages}} 页，当前在第 {{pages.CurrentPage}} 页。</p>
    {% endpagination %}
</div>

在这段代码中：

• {% pagination pages with show="5" %} 告诉系统生成分页导航，并将分页数据存储在 pages 变量中。show="5" 参数在这里起到了关键作用，它表示在页码列表中，除了首页、尾页、上一页、下一页按钮外，最多只显示5个中间页码（例如，当总页数很多时，会显示 1...3 4 5 6 7...100）。
• pages.FirstPage、pages.PrevPage、pages.NextPage、pages.LastPage 分别代表首页、上一页、下一页和尾页的对象，它们的 Link 属性提供了对应的链接，Name 属性提供了按钮文本。
• pages.Pages 是一个数组，包含了中间的页码项。通过 {% for item in pages.Pages %} 循环遍历，item.Link 提供页码链接，item.Name 提供页码数字。
• item.IsCurrent 或 pages.FirstPage.IsCurrent 等布尔值可以判断当前页码是否为当前正在浏览的页面，这对于高亮显示当前页码至关重要。

三、自定义分页导航的样式和页码数量

安企CMS的分页标签提供了足够的灵活性，让您可以通过控制标签参数和搭配CSS来实现完全自定义的样式。

1. 自定义页码数量： 如前所述，pagination 标签的 show 参数直接控制了中间页码按钮的数量。

• show="5"：最多显示5个中间页码。
• show="7"：最多显示7个中间页码。 您可以根据页面布局的宽度、用户习惯等因素，调整这个数值，以达到**显示效果。如果省略 show 参数，系统会有一个默认值，但为了精确控制，建议明确设置。

2. 自定义分页导航样式： 通过在HTML结构中添加自定义的CSS类，您可以完全掌控分页导航的视觉呈现。

在上面的示例中，我们使用了 pagination-container、page-item 和 active 等类名。您可以在您的CSS文件中为这些类编写样式规则，例如：

/* pagination-container 整体布局 */
.pagination-container {
    margin-top: 30px;
    text-align: center;
}

.pagination-container ul {
    list-style: none;
    padding: 0;
    display: inline-flex; /* 使页码水平排列 */
    margin: 0;
}

/* page-item 单个页码或按钮 */
.page-item {
    margin: 0 5px; /* 页码间距 */
}

.page-item a {
    display: block;
    padding: 8px 12px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.page-item a:hover {
    background-color: #f5f5f5;
    color: #007bff;
    border-color: #007bff;
}

/* active 当前页高亮 */
.page-item.active a {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    pointer-events: none; /* 禁用当前页的点击事件 */
}

/* 隐藏不必要的文字（如首页/尾页按钮的默认文本在某些设计中可能不显示） */
.page-item:first-child a,
.page-item:last-child a {
    font-weight: bold;
}

通过修改这些CSS规则，您可以改变分页按钮的背景色、文字颜色、边框、圆角、大小，甚至添加动画效果等，使其完美匹配您的网站设计风格。

四、进阶技巧与注意事项

• 搜索结果的分页： archiveList 标签的 q 参数在 type="page" 模式下同样生效。这意味着，如果您在搜索结果页使用该标签，它会自动识别URL中的搜索关键词 q，并