在内容管理系统中,如何有效地展示大量信息同时又不牺牲用户体验,始终是一个值得深思的问题。AnQiCMS 提供了强大且灵活的分页功能,让网站管理者能够精细地控制列表内容的显示方式,确保网站既美观又高效。

要实现对列表内容的分页控制,我们需要理解 AnQiCMS 中两个核心模板标签的协同作用:首先是负责获取和准备列表数据的标签,例如 archiveList(文档列表)、tagDataList(标签文档列表)或 commentList(评论列表);其次,就是专门用于生成分页导航的 pagination 标签。这两者配合使用,能够构建出动态、用户友好的内容列表。

准备内容列表:archiveList 与分页模式

在 AnQiCMS 中,当我们希望展示一系列文档、产品或其他内容时,archiveList 是最常用的标签。它的主要职责是从数据库中检索内容,并根据我们的需求进行过滤和排序。然而,要让这个列表能够进行分页,关键在于为 archiveList 标签设置一个特定的参数:type="page"

type 参数被设置为 page 时,archiveList 不再仅仅是简单地列出所有符合条件的内容,而是智能地根据当前页码和每页显示数量来检索数据。同时,我们还需要通过 limit 参数来明确指定每页希望显示的内容条数。例如,{% archiveList archives with type="page" limit="10" %} 这段代码,便告诉系统去获取用于分页显示的内容列表,并且每页展示 10 条。

archiveList 标签可以根据多种条件筛选内容,例如通过 categoryId(分类ID)获取特定分类下的内容,通过 order(排序方式)按发布时间或浏览量排序,甚至通过 q(搜索关键词)进行搜索结果的分页显示。这些灵活的参数使得 archiveList 成为构建多样化内容列表的基石。

构建分页导航:pagination 标签的艺术

一旦 archiveList(或其他列表标签)以 type="page" 模式获取了分页内容,接下来就是展示分页导航了。这时,pagination 标签便派上了用场。这个标签通常紧随在内容列表的 for 循环之后,它将生成“上一页”、“下一页”、“首页”、“末页”以及具体的页码链接,帮助用户在大量内容中轻松跳转。

pagination 标签最常用的一个参数是 show,它决定了在页码导航中同时显示多少个页码链接。例如,show="5" 会让分页导航只显示当前页码周围的 5 个页码链接,这对于保持页面整洁、避免过长的页码条非常有帮助。

pagination 标签会返回一个名为 pages 的对象(如果你在标签中指定了其他变量名,则以你指定的为准)。这个 pages 对象包含了所有关于分页状态的详细信息,这对于我们构建自定义的分页样式至关重要。我们可以访问的字段包括:

  • pages.TotalItems:内容总条数。
  • pages.TotalPages:总页码数。
  • pages.CurrentPage:当前访问的页码。
  • pages.FirstPage:首页的链接信息(包括 NameLinkIsCurrent)。
  • pages.LastPage:末页的链接信息。
  • pages.PrevPage:上一页的链接信息。
  • pages.NextPage:下一页的链接信息。
  • pages.Pages:一个数组,包含了中间部分的页码链接信息,我们可以遍历它来生成 1、2、3…这样的页码列表。每个数组元素同样包含 NameLinkIsCurrent 属性。

利用这些丰富的字段,我们可以通过条件判断 ({% if %}) 和循环 ({% for %}) 来精细地控制分页导航的显示逻辑和样式。例如,通过检查 IsCurrent 属性,我们可以给当前页码添加一个 active 类,以突出显示。

综合应用示例

让我们通过一个简单的例子,看看这两个标签是如何协同工作的:

{# 1. 使用 archiveList 获取分页内容,每页显示10条 #}
{% archiveList archives with type="page" limit="10" %}
    {# 遍历并显示内容列表 #}
    {% for item in archives %}
    <div class="content-item">
        <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
        <p>{{ item.Description }}</p>
        <span class="meta">{{ stampToDate(item.CreatedTime, "2006-01-02") }} | {{ item.Views }} 次浏览</span>
    </div>
    {% empty %}
    <p>抱歉,当前分类或搜索条件下没有找到任何内容。</p>
    {% endfor %}
{% endarchiveList %}

{# 2. 使用 pagination 标签生成分页导航,并控制显示逻辑 #}
<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 显示总数信息 #}
        <li class="page-info">共 {{ pages.TotalItems }} 条记录,当前第 {{ pages.CurrentPage }}/{{ pages.TotalPages }} 页</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 %}

        {# 中间页码列表 #}
        {% 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>
    {% endpagination %}
</div>

通过上述代码,AnQiCMS 能够智能地根据当前 URL 中的页码参数(通常是 page=N),自动处理内容检索和分页链接的生成。这种分而治之的模板设计理念,使得内容列表的分页控制变得直观而强大。无论是构建博客文章列表、产品展示页,还是搜索结果页,都能轻松实现高效且用户友好的分页体验。


常见问题 (FAQ)

1. 为什么我按照示例代码编写了,但页面仍然只显示第一页内容,没有出现分页导航?

这通常是因为您在 archiveList(或类似的列表标签)中忘记设置 type="page" 参数。pagination 标签需要列表标签以分页模式工作,才能获取到总页数、当前页等信息并生成导航。请检查您的 archiveList 标签是否包含 type="page",例如 {% archiveList archives with type="page" limit="10" %}

2. 如何改变每页显示的内容条数,例如从10条改为20条?

每页显示的内容条数由 archiveList 标签的 limit 参数控制。只需修改该参数的值即可,例如将 limit="10" 改为 limit="20",系统便会相应调整每页显示的内容数量和总页数。

3. 如何自定义分页导航的样式,例如让当前页码显示为红色?

分页导航的样式完全通过 CSS 进行控制。pagination 标签生成的 pages 对象中的每个页