在网站运营中,如何高效地展示和管理大量内容,同时确保用户拥有流畅的浏览体验,是每一位站长都需要面对的挑战。安企CMS(AnQiCMS)针对内容列表的分页显示提供了直观且强大的控制能力,让您可以轻松实现内容的有序呈现和高效导航。
要实现内容列表的分页显示,我们主要会用到安企CMS模板中的两个核心标签:内容列表标签(如archiveList、tagDataList、commentList)和分页标签(pagination)。
核心机制:内容列表标签与分页模式
首先,您需要通过内容列表标签来获取所需的内容数据。以文章列表为例,我们常用archiveList标签。这个标签不仅能帮助您筛选和排序文章,更重要的是,它提供了开启分页模式的关键参数。
当您希望列表内容以分页形式展示时,需要在archiveList(或tagDataList、commentList等)标签中明确指定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.FirstPage和pages.LastPage:分别包含了首页和末页的名称与链接,以及是否为当前页的状态(IsCurrent)。pages.PrevPage和pages.NextPage:如果存在,则包含上一页和下一页的名称与链接。pages.Pages:这是一个数组,包含了所有中间页码的详细信息,每个页码对象都有Name(页码数字)、Link(页码链接)和IsCurrent(是否为当前页)属性。
通过遍历pages.Pages数组,并结合条件判断(例如{% if item.IsCurrent %}active{% endif %}),您可以轻松为当前页码添加高亮样式,提升用户体验。
实际操作示例:列表与分页的结合
在实际的模板文件中,您的代码结构大致会像这样:
”`twig {# 页面顶部可能有的面包屑或其他内容 #}
{{ article.Title }}
{{ article.Description }}
发布日期:{{ stampToDate(article.CreatedTime, "2006-01-02") }}该分类下暂无文章。
{% endfor %} {% endarchiveList %}{% pagination pages with show="5" %}
<ul>
{% if pages.FirstPage %}
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{% endif %}
{% if pages.PrevPage %}
<li><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</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 }}">{{ pages.NextPage.Name }}</a></li>
{% endif %}
{% if pages.LastPage %}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
</li>