如何在AnQiCMS模板中实现文章或产品列表的分页功能?

对于任何内容管理系统而言,有效管理和展示大量内容都是核心需求。当网站的文章或产品数量日渐增多时,如果没有合理的分页机制,用户在浏览时会感到疲惫,网站的加载速度也可能受到影响。AnQiCMS作为一个高效的内容管理系统,提供了简洁而强大的模板标签,帮助我们轻松实现文章或产品列表的分页功能,从而极大地提升用户体验和网站性能。

在AnQiCMS中实现分页功能主要涉及两个核心模板标签的配合使用:用于获取列表数据的 archiveList(或其他类似的列表标签,如 categoryListtagDataList)和专门用于生成分页导航的 pagination。理解它们的工作原理和参数设置,是构建流畅分页体验的关键。

第一步:准备列表数据——使用 archiveList 标签

首先,我们需要在模板中调用相应的列表标签来获取文章或产品数据。以最常用的文章或产品列表为例,我们会用到 archiveList 标签。这个标签不仅能查询内容,还能通过特定参数告诉AnQiCMS系统,我们需要对这些内容进行分页处理。

在使用 archiveList 时,有两个关键参数是实现分页不可或缺的:

  • type="page": 这是最重要的参数,它明确告诉系统,当前这个列表是需要进行分页展示的。如果没有这个参数,archiveList 标签将只会获取指定数量的列表数据,而不会提供任何分页信息。
  • limit: 这个参数用来设定每页希望显示的文章或产品数量。例如,limit="10" 表示每页显示10条内容。

一个基本的 archiveList 使用示例可能如下,它会获取文章模型(假设 moduleId="1")下的内容,并为每页10条内容进行分页:

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h3>{{item.Title}}</h3>
            <p>{{item.Description}}</p>
        </a>
    </li>
    {% empty %}
    <li>暂时没有更多内容。</li>
    {% endfor %}
{% endarchiveList %}

在这段代码中,archives 是我们自定义的变量名,它将包含当前页的所有文章或产品数据。通过 for 循环遍历 archives,我们可以逐一展示每条内容的标题、链接、简介等信息。{% empty %} 块则提供了一个友好的提示,当没有内容时显示。

第二步:插入分页导航——使用 pagination 标签

在获取了列表数据之后,下一步就是生成用户可点击的分页导航链接。AnQiCMS提供了 pagination 标签来完成这项任务。这个标签能够自动识别 archiveList 生成的分页数据,并渲染出包括首页、上一页、下一页和具体页码在内的导航条。

pagination 标签通常需要配合 show 参数来控制在页面上显示多少个页码按钮。例如,show="5" 表示最多显示5个页码。

pagination 标签会将所有分页相关的信息封装在一个名为 pages 的变量中(这个变量名可以自定义,但通常习惯用 pages)。pages 对象包含了许多有用的属性,例如:

  • pages.TotalItems: 总内容条数。
  • pages.TotalPages: 总页数。
  • pages.CurrentPage: 当前页码。
  • pages.FirstPage: 首页信息(包含 NameLink)。
  • pages.LastPage: 尾页信息(包含 NameLink)。
  • pages.PrevPage: 上一页信息(包含 NameLink)。
  • pages.NextPage: 下一页信息(包含 NameLink)。
  • pages.Pages: 一个包含中间页码信息的数组,每个元素也包含 Name(页码)和 Link(链接),以及 IsCurrent(是否当前页)布尔值。

一个标准的分页导航结构示例通常会像这样:

<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>
    <p>当前第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页 (总共 {{pages.TotalItems}} 条)</p>
    {% endpagination %}
</div>

通过检查 IsCurrent 属性,我们可以为当前页码添加特定的CSS样式,例如 active 类,以提供视觉反馈。

第三步:整合到实际模板

archiveListpagination 结合起来,我们就可以在实际的模板文件中(例如,文章分类列表页的 article/list.html 或产品列表页的 product/list.html)实现完整的分页功能。通常,列表内容会放在页面的主要区域,而分页导航则置于列表的下方。

<div class="content-list">
    {# 第一步:文章或产品列表内容 #}
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for item in archives %}
        <div class="item">
            <a href="{{item.Link}}">
                <h2>{{item.Title}}</h2>
                <p>{{item.Description}}</p>
                <span class="meta">{{item.CreatedTime|stampToDate:"2006-01-02"}} - {{item.Views}} 浏览</span>
            </a>
        </div>
        {% empty %}
        <p class="no-content">抱歉,当前分类下还没有内容。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 第二步:分页导航 #}
    <div class="pagination-area">
        {% pagination pages with show="7" %}
        <ul class="pagination-controls">
            <li class="{% if pages.FirstPage.IsCurrent %}disabled{% endif %}">
                <a href="{{pages.FirstPage.Link}}">首页</a>
            </li>
            {% if pages.PrevPage %}
            <li>
                <a href="{{pages.PrevPage.Link}}">上一页</a>
            </li>
            {% endif %}
            {% for pageItem in pages.Pages %}
            <li class="{% if pageItem.IsCurrent %}active{% endif %}">
                <a href="{{pageItem.Link}}">{{pageItem.Name}}</a>
            </li>
            {% endfor %}
            {% if pages.NextPage %}
            <li>
                <a href="{{pages.NextPage.Link}}">下一页</a>
            </li>
            {% endif %}
            <li class="{% if pages.LastPage.IsCurrent %}disabled{% endif %}">
                <a href="{{pages.LastPage.Link}}">尾页</a>
            </li>
        </ul>
        <p class="pagination-info">当前第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页 (总共 {{pages.TotalItems}} 条)</p>
        {% endpagination %}
    </div>
</div>

通过上述步骤,我们不仅实现了内容的有效展示,还为用户提供了便捷的导航方式。AnQiCMS的分页功能设计得非常直观,只要掌握了 type="page"pagination 标签的用法,就可以轻松驾驭各类列表的分页需求。

常见问题 (