在安企CMS中，网站内容的分页功能是提升用户体验、优化站点结构不可或缺的一部分。无论是博客文章列表、产品展示页还是其他动态内容，合理的分页能让用户更方便地浏览大量信息，也能帮助搜索引擎更好地理解和抓取网站内容。今天，我们就来深入了解如何在AnQiCMS中实现分页功能，并按自己的需求定制页码的显示样式。

为什么需要分页？

想象一下，您的网站上有成百上千篇精彩的文章。如果没有分页，所有文章会堆积在一个页面上，不仅加载缓慢，用户也难以找到他们感兴趣的内容，从而很快离开。分页的作用就在于将这些内容合理地拆分成多个小页面，让页面加载更快，导航更清晰，用户体验自然也会更好。同时，对于搜索引擎优化（SEO）来说，清晰的分页结构也有助于搜索引擎理解网站内容的层次，提高收录效率。

AnQiCMS如何实现分页

AnQiCMS提供了一套直观且灵活的模板标签来处理内容列表和分页显示。核心在于两个标签的配合使用：内容列表标签（如archiveList）和分页标签（pagination）。

第一步：准备需要分页的内容列表

在您的模板文件中（例如 list.html 或 index.html），首先需要使用内容列表标签来获取需要分页的内容。这里我们以获取文章列表为例，使用 archiveList 标签。关键在于设置 type="page" 参数，这会告诉AnQiCMS准备好为这个列表生成分页数据。同时，通过 limit 参数来控制每页显示多少条内容。

一个典型的内容列表获取方式可能如下：

{# 假设我们正在获取ID为1的文章分类下的内容，每页显示10条 #}
{% archiveList archives with categoryId="1" type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <div class="meta">
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量：{{item.Views}}</span>
            </div>
        </div>
        {% empty %}
        <p>抱歉，目前该分类下没有任何文章。</p>
        {% endfor %}
    </div>
{% endarchiveList %}

在上面的代码中，archives 是我们定义的变量，它包含了当前页的所有文章数据。type="page" 是启用分页的关键，limit="10" 则指定了每页展示10篇文章。

第二步：插入分页标签并理解其提供的变量

在内容列表的下方，紧接着使用 pagination 标签来渲染分页导航。这个标签会根据之前 archiveList 生成的分页数据，自动输出页码信息。

<div class="pagination-container">
    {% pagination pages with show="5" %}
        {# 在这里构建您的分页样式 #}
    {% endpagination %}
</div>

这里的 pages 也是一个自定义的变量名，它包含了所有与分页相关的数据。show="5" 这个参数表示在当前页码前后最多显示5个页码按钮，让分页导航看起来更简洁。

pages 变量提供了丰富的数据，让您可以灵活地定制分页样式：

  • pages.TotalItems: 内容总条数。
  • pages.TotalPages: 总页码数。
  • pages.CurrentPage: 当前页码。
  • pages.FirstPage: 首页对象，包含 Name（如“首页”或“1”）、Link（链接地址）和 IsCurrent（是否当前页）。
  • pages.LastPage: 末页对象，结构与 FirstPage 类似。
  • pages.PrevPage: 上一页对象，结构与 FirstPage 类似，如果当前是第一页，则为空。
  • pages.NextPage: 下一页对象，结构与 FirstPage 类似，如果当前是最后一页，则为空。
  • pages.Pages: 一个数组，包含了中间的页码列表，每个元素都是一个对象，同样包含 Name（页码数字）、Link 和 IsCurrent。

第三步：自定义页码的显示样式

有了 pages 变量提供的这些数据，您就可以利用HTML和CSS来构建任何您想要的分页样式了。通常，我们会使用 for 循环遍历 pages.Pages 来显示中间页码，并结合 if 语句来判断当前页、首页、末页、上一页和下一页的状态，添加不同的CSS类。

下面是一个常用的分页样式代码示例，您可以根据自己的网站设计修改其中的HTML结构和CSS类名：

{# 假设我们已经通过 archiveList 获取了内容，现在开始渲染分页 #}
<div class="pagination-wrapper">
    {% pagination pages with show="5" %}
    <ul class="pagination">
        {# 显示总页数和当前页码信息，这部分您可以选择显示或隐藏 #}
        <li class="info">总数：{{pages.TotalItems}}条，共{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>

        {# 首页链接 #}
        <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 %}

        {# 中间页码列表 #}
        {% for item in pages.Pages %}
        <li class="page-item {% if item.IsCurrent %}active{% endif %}">
            <a href="{{item.Link}}" class="page-link">{{item.Name}}</a>
        </li>
        {% endfor %}

        {# 下一页链接 #}
        {% if pages.NextPage %}
        <li class="page-item">
            <a href="{{pages.NextPage.Link}}" class="page-link">{{pages.NextPage.Name}}</a>
        </li>
        {% endif %}

        {# 末页链接 #}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
            <a href="{{pages.LastPage.Link}}" class="page-link">{{pages.LastPage.Name}}</a>
        </li>
    </ul>
    {% endpagination %}
</div>

通过为 li 或 a 标签添加 active、disabled 等CSS类，您就可以在您的样式表（例如 public/static/css/style.css）中定义它们的视觉表现，例如改变背景色、字体颜色等，从而实现完全符合您网站风格的分页样式。

综合示例：文章列表与分页

将上述两个部分结合起来，一个完整的文章列表页面的分页功能就实现了。

”`twig <!DOCTYPE html> 

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
<style>
    /* 简单的分页样式示例，您可以根据需要进行扩展和修改 */
    .pagination-wrapper {
        margin-top: 30px;
        text-align: center;
    }
    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;
    }
    .pagination > li {