文章列表的分页显示功能对于任何内容管理系统来说都至关重要,它不仅能提升用户浏览体验,避免单页内容过长导致加载缓慢,更能帮助搜索引擎更好地抓取和索引网站内容。在AnQiCMS中,实现这一功能既灵活又高效,得益于其简洁的模板标签设计。
接下来,我们将一起了解如何在AnQiCMS中轻松实现文章列表的分页显示。
AnQiCMS中分页功能的核心组件
在AnQiCMS的模板系统中,实现分页显示主要依赖于两个关键的模板标签:archiveList 和 pagination。它们协同工作,archiveList 负责获取并准备好需要分页的文章数据,而 pagination 则根据这些数据生成并渲染出用户可点击的分页导航。
实现文章列表分页的具体步骤
第一步:使用 archiveList 标签获取分页数据
首先,您需要在显示文章列表的模板文件(通常是 article/list.html 或根据分类自定义的 article/list-ID.html 等)中,使用 archiveList 标签来获取文章数据。为了启用分页功能,您需要将 type 参数设置为 "page",并指定每页显示的文章数量,例如 limit="10" 表示每页显示10篇文章。
这个标签会智能地识别当前页面是否包含分类ID、模型ID或搜索关键词等信息,并根据这些信息筛选出相应的文章。例如,如果您在某个分类页面使用此标签,它会自动获取该分类下的文章;如果在搜索结果页面,它会根据搜索关键词进行筛选。
您可以这样使用 archiveList 标签:
{% archiveList articles with type="page" limit="10" moduleId="1" categoryId="0" %}
{# 循环遍历当前页的文章数据 #}
{% for item in articles %}
{# 这里是每篇文章的显示结构,例如标题、简介、发布日期等 #}
<div class="article-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:150 }}</p> {# 截取前150字作为简介 #}
<div class="meta-info">
<span>发布日期:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量:{{ item.Views }}</span>
</div>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
{% endif %}
</div>
{% empty %}
{# 如果没有文章,显示此内容 #}
<p>当前列表暂无文章。</p>
{% endfor %}
{% endarchiveList %}
在上面的代码中,articles 是一个变量名,它包含了当前页的所有文章数据。moduleId="1" 通常用于指定文章模型(AnQiCMS默认文章模型ID为1),categoryId="0" 表示不限制父级分类,如果省略,则会自动匹配当前分类的文章。for item in articles 则会循环展示这些文章。{% empty %} 是一个非常实用的语法,当 articles 列表为空时,会自动显示 {% empty %} 和 {% endfor %} 之间的内容。
第二步:使用 pagination 标签渲染分页导航
在 archiveList 标签之后,您可以使用 pagination 标签来生成和显示分页导航。这个标签会根据 archiveList 已经处理好的分页信息,自动创建出包括首页、上一页、下一页、尾页以及中间页码链接的分页结构。
pagination 标签提供了一个 show 参数,用于控制在分页导航中显示多少个数字页码链接,例如 show="5" 会显示当前页附近最多5个页码。
以下是 pagination 标签的详细使用示例:
”`twig
{% pagination pages with show="5" %}
{# 首先,您可以显示一些总体信息,例如总文章数、总页数和当前页码 #}
<p>共 {{ pages.TotalItems }} 篇文章,{{ pages.TotalPages }} 页,当前第 {{ pages.CurrentPage }} 页。</p>
<div class="page-links">
{# 首页链接,通过 pages.FirstPage 获取 #}
<a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">首页</a>
{# 上一页链接,仅当存在上一页时显示 #}
{% if pages.PrevPage %}
<a class="page-link" href="{{ pages.PrevPage.Link }}">上一页</a>
{% endif %}
{# 中间页码链接,这是通过 pages.Pages 数组循环生成的 #}
{% for page in pages.Pages %}
<a class="page-link {% if page.IsCurrent %}active{% endif %}" href="{{ page.Link }}">{{ page.Name }}</a>
{% endfor %}
{# 下一页链接,仅当存在下一页时显示 #}
{% if pages.NextPage %}
<a class="page-link" href="{{ pages.NextPage.Link }}">下一页</a>
{% endif %}
{# 尾页链接,通过 pages.LastPage 获取 #}
<a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">尾页</a>