当网站内容日益丰富，如何高效地展示大量信息，同时确保用户友好的浏览体验，是网站运营中不可或缺的一环。在AnQiCMS中，通过强大的模板标签系统，我们可以轻松实现内容的分页显示，并灵活定制页码导航的样式，让网站内容既丰富又整洁。

高效组织内容：实现内容列表的分页显示

在AnQiCMS的模板中，要实现内容的分页显示，核心在于使用archiveList标签来获取文档列表。这个标签功能强大，不仅能列出指定分类或模型的文档，还能直接配置为分页模式。

首先，在您的列表页模板（例如，针对文章模型的列表页通常是article/list.html，或者自定义的分类列表模板）中，您会用到archiveList标签。要开启分页功能，需要设置type参数为"page"，并利用limit参数来定义每页显示的文章数量。例如，如果您想每页显示10篇文章，代码会是这样：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
        <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>
    </div>
    {% empty %}
    <p>当前分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中，archiveList标签会将符合条件的文章数据加载到名为archives的变量中，并自动根据limit参数进行分页处理。在for循环中，item代表每一篇文章，您可以通过item.Title、item.Link、item.Description等方式访问文章的各项属性。{% empty %}标签则非常贴心地处理了当没有任何文章可显示时的场景，避免页面空白。

精细化控制：自定义页码导航样式

内容列表呈现后，接下来就是为用户提供便捷的页码导航。AnQiCMS为此提供了pagination标签。这个标签会根据archiveList标签生成的总页数和当前页码，自动生成一个包含首页、上一页、具体页码、下一页和末页等信息的pages对象，供您在模板中灵活渲染。

在archiveList标签的下方，紧接着使用pagination标签，并可配合show参数来控制页码导航中显示的页码数量。例如，show="5"表示页码导航最多显示5个页码数字（如1、2、3、4、5）。

以下是一个结合了内容列表和页码导航的完整示例，并融入了样式定制的考量：

{% archiveList archives with type="page" limit="10" %}
    <div class="article-list">
        {% for item in archives %}
        <div class="article-item">
            <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
            <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>
        </div>
        {% empty %}
        <p>当前分类下暂时没有文章。</p>
        {% endfor %}
    </div>

    <div class="pagination-nav">
        {% pagination pages with show="5" %}
        <ul>
            {# 显示总条数和页码信息 #}
            <li>共 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>

            {# 首页链接，如果当前是第一页则高亮 #}
            <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 %}

            {# 中间页码数字，遍历 pages.Pages 数组 #}
            {% for pageItem in pages.Pages %}
            <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                <a href="{{pageItem.Link}}">{{pageItem.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>
        {% endpagination %}
    </div>
{% endarchiveList %}

在上述pagination标签的内部，pages对象提供了丰富的信息：

  • pages.TotalItems 和 pages.TotalPages 分别表示总文章数和总页数。
  • pages.CurrentPage 则是当前访问的页码。
  • pages.FirstPage、pages.LastPage、pages.PrevPage、pages.NextPage 分别代表首页、末页、上一页和下一页的导航对象，它们都包含Link（链接地址）和Name（显示文本）属性，以及一个IsCurrent布尔值来判断是否为当前页。
  • pages.Pages 是一个数组，包含了中间部分的具体页码数字，每个元素也是一个包含Link、Name和IsCurrent属性的对象。

利用这些属性，您可以轻松定制页码导航的外观。例如，通过{% if pageItem.IsCurrent %}active{% endif %}这样的条件判断，为当前页的<li>元素添加active类，然后通过CSS来设置其高亮样式。同样，{% if pages.PrevPage %}这样的判断可以确保在没有上一页或下一页时，对应的导航链接不会显示，从而保持导航的简洁性。

灵活多变：提升用户体验的实践建议

  1. CSS 定制外观：上述示例提供了HTML结构和基本的active类，具体的页码导航美化则完全取决于您的CSS设计。您可以调整字体、颜色、背景、边框等，使其与网站整体风格统一。
  2. 模板文件位置：通常，列表页的模板文件会放置在template/{您的模板目录}/{模型table}/list.html，例如template/default/article/list.html。如果您有特定的分类需要不同的列表布局，AnQiCMS也支持{模型table}/list-{分类id}.html这样的自定义模板。
  3. 结合搜索功能：如果您的网站包含搜索功能，archiveList标签在type="page"模式下，会自动读取URL中q参数作为搜索关键词，实现搜索结果的分页。您无需额外处理搜索结果