在网站运营中,如何高效地展示和管理大量内容,同时确保用户拥有流畅的浏览体验,是每一位站长都需要面对的挑战。安企CMS(AnQiCMS)针对内容列表的分页显示提供了直观且强大的控制能力,让您可以轻松实现内容的有序呈现和高效导航。

要实现内容列表的分页显示,我们主要会用到安企CMS模板中的两个核心标签:内容列表标签(如archiveListtagDataListcommentList)和分页标签(pagination)。

核心机制:内容列表标签与分页模式

首先,您需要通过内容列表标签来获取所需的内容数据。以文章列表为例,我们常用archiveList标签。这个标签不仅能帮助您筛选和排序文章,更重要的是,它提供了开启分页模式的关键参数。

当您希望列表内容以分页形式展示时,需要在archiveList(或tagDataListcommentList等)标签中明确指定type="page"。这是告诉安企CMS系统,您当前获取的内容集需要支持分页功能。例如:

{% archiveList archives with type="page" limit="10" categoryId="1" %}
    {# 循环展示文章内容 #}
{% endarchiveList %}

在上面的例子中:

  • archives 是您自定义的变量名,用于存储获取到的文章数据。
  • type="page" 明确启用了分页功能。
  • limit="10" 则设定了每页显示的文章数量为10篇。您可以根据实际需求调整这个数字。
  • categoryId="1" 是一个可选的筛选条件,表示只获取ID为1的分类下的文章。您还可以添加moduleId(内容模型ID)、q(搜索关键词)等参数来进一步精确筛选内容。

这样配置后,archives变量中存储的就不仅仅是全部文章,而是当前页的文章数据。

构建分页导航:利用 pagination 标签

仅仅获取了当前页的文章数据还不足以完成分页功能,用户还需要一套完整的分页导航来切换页面。这时,就需要使用安企CMS提供的pagination标签。这个标签是专门为配合type="page"的列表标签而设计的,它能够智能地生成包括总页数、当前页码、前后页链接等在内的所有分页信息。

通常,pagination标签会紧随在内容列表标签之后使用,例如:

{# ... archiveList 标签代码 ... #}

{% pagination pages with show="5" %}
    {# 渲染分页导航 #}
{% endpagination %}

在这里,pages是您为分页信息自定义的变量名。show="5"这个参数则控制着分页导航中同时显示的最大页码数量,例如,如果您在第10页,导航可能会显示“上一页…8、9、10、11、12…下一页”,其中就显示了5个页码。

pages变量中包含了丰富的分页数据,您可以利用这些数据构建出功能完善、样式灵活的分页导航:

  • pages.TotalItems:总文章数量。
  • pages.TotalPages:总页码数。
  • pages.CurrentPage:当前访问的页码。
  • pages.FirstPagepages.LastPage:分别包含了首页和末页的名称与链接,以及是否为当前页的状态(IsCurrent)。
  • pages.PrevPagepages.NextPage:如果存在,则包含上一页和下一页的名称与链接。
  • pages.Pages:这是一个数组,包含了所有中间页码的详细信息,每个页码对象都有Name(页码数字)、Link(页码链接)和IsCurrent(是否为当前页)属性。

通过遍历pages.Pages数组,并结合条件判断(例如{% if item.IsCurrent %}active{% endif %}),您可以轻松为当前页码添加高亮样式,提升用户体验。

实际操作示例:列表与分页的结合

在实际的模板文件中,您的代码结构大致会像这样:

”`twig {# 页面顶部可能有的面包屑或其他内容 #}

{% archiveList archives with type="page" limit="10" categoryId="1" %} {% for article in archives %}

{{ article.Title }}

{{ article.Description }}

发布日期:{{ stampToDate(article.CreatedTime, "2006-01-02") }}
{% empty %}

该分类下暂无文章。

{% endfor %} {% endarchiveList %}