在内容管理系统中，有效的分页功能对于提升用户体验和网站的SEO表现至关重要。当网站内容量逐渐增加时，合理地组织和展示内容列表，能让访问者更轻松地浏览信息，并帮助搜索引擎更好地抓取和索引页面。AnQiCMS作为一个高效的内容管理系统，提供了灵活且易于使用的模板标签，让您能够轻松在模板中实现分页，并根据需要自定义页码的显示方式。

要在AnQiCMS模板中实现分页，主要涉及两个核心步骤：首先是告诉系统您需要获取一份可分页的内容列表，其次是在页面上渲染出分页导航链接。

第一步：获取需要分页的内容列表

在您的AnQiCMS模板文件（例如文章列表页 archive/list.html 或自定义分类列表页 article/list.html）中，您需要使用 archiveList 或其他内容列表标签来获取文章、产品等数据。关键在于，您需要通过设置 type="page" 参数，明确告诉系统您希望这份列表是支持分页的。同时，limit 参数用于定义每页显示多少条内容。

例如，如果您想在一篇文章列表中每页显示10条内容，可以这样来获取数据：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <a href="{{item.Link}}">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
            <span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </a>
    </div>
    {% empty %}
    <p>抱歉，当前分类暂无文章内容。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中：

  • archiveList 是用于获取文档列表的标签。
  • archives 是我们定义的一个变量名，用于存放获取到的文章数据，您可以在 for 循环中通过 item 来访问每篇文章的详细信息。
  • type="page" 是启用分页的关键设置。
  • limit="10" 则指定了每页显示10条文章。

第二步：在模板中添加分页导航

在获取了支持分页的内容列表后，接下来就是在页面底部或其他合适位置显示分页导航链接了。AnQiCMS为此提供了一个专门的 pagination 标签。这个标签会根据 archiveList 标签获取到的分页数据，自动生成“首页”、“上一页”、“下一页”、“尾页”以及中间的页码链接。

最重要的是，您可以通过 show 参数来灵活控制中间页码链接的显示数量。例如，如果您希望分页导航只显示当前页码周围的5个页码链接，您可以将 show 设置为 5。

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

<div class="pagination-nav">
    {% 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 循环逐个显示 #}
        {% 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>

在这段代码中：

  • pages 是一个包含了所有分页信息的变量，它由 pagination 标签生成。
  • show="5" 指定了除了首页、上一页、下一页、尾页之外，中间部分最多显示5个页码链接。例如，如果当前是第10页，它可能会显示 “8 9 10 11 12” 这样的页码。
  • pages.FirstPage、pages.PrevPage、pages.NextPage、pages.LastPage 分别代表首页、上一页、下一页和尾页的链接对象，它们都有 Link（链接地址）和 Name（显示名称）属性。
  • pages.Pages 是一个数组，包含了中间部分的页码对象，您可以通过 for 循环遍历它们。每个页码对象同样有 Link 和 Name 属性。
  • item.IsCurrent 或 pages.FirstPage.IsCurrent 等布尔值可以用来判断当前页是否选中，从而为当前页添加 active 类或其他样式，方便用户识别。

整合示例：完整的文章列表与分页代码

将上述两部分代码结合起来，一个基本的带有分页功能的文章列表页就完成了。通常，您会将内容列表放在一个部分，然后紧接着是分页导航。

{# 您的文章列表页模板文件 (例如: template/default/archive/list.html) #}

{# 引入公共头部文件，通常包含网站标题、SEO元信息等 #}
{% include "partial/header.html" %}

<main class="container">
    <section class="article-list">
        <h2>最新文章</h2>
        {% archiveList archives with type="page" limit="10" %}
            {% for item in archives %}
            <div class="article-item">
                <a href="{{item.Link}}">
                    <h3>{{item.Title}}</h3>
                    <p>{{item.Description}}</p>
                    <span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span class="views">{{item.Views}} 阅读</span>
                </a>
            </div>
            {% empty %}
            <p>抱歉，当前分类暂无文章内容。</p>
            {% endfor %}
        {% endarchiveList %}
    </section>

    {# 分页导航区域 #}
    <nav class="pagination-nav">
        {% pagination pages with show="7" %} {# 这里我们自定义显示7个页码链接 #}
        <ul class="pagination-ul">
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}" title="首页">{{pages.FirstPage.Name}}</a>
            </li>
            {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{pages.PrevPage.Link}}" title="上一页">{{pages.PrevPage.Name}}</a>
            </li>
            {% endif %}
            {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}" title="第{{item.Name}}页">{{item.Name}}</a>
            </li>
            {% endfor %}
            {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{pages.NextPage.Link}}" title="下一页">{{pages.NextPage.Name}}</a>
            </li>
            {% endif %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}" title="尾页">{{pages.LastPage.Name}}</a>
            </li>
        </ul>
        <p class="pagination-info">总共 {{pages.TotalItems}} 条记录，当前显示第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页。</p>
        {% endpagination %}
    </nav>
</main>

{# 引入公共底部文件 #}
{% include "partial/footer.html" %}

请记住，上述代码中 class="article-item", class="pagination-nav" 等都只是示例，您需要根据您的网站设计，通过CSS来美化这些元素，使其符合您的网站风格。

进阶技巧：自定义分页 URL 模式

在某些特定需求下，您可能需要更精细地控制分页链接的URL结构，例如为了SEO目的或者与现有URL规则保持一致。AnQiCMS的 pagination 标签提供了 prefix 参数，允许您自定义分页URL的模式。

例如，如果您想让分页链接看起来像 /articles/page-{page}.html，您可以在 pagination 标签中这样设置：{% pagination pages with show="5" prefix="/articles/page-{page}.html" %}。不过