在现代网站运营中,为内容列表设置分页功能几乎是不可或缺的。它不仅能显著提升用户浏览体验,避免单页内容过长导致加载缓慢,还有助于搜索引擎更好地抓取和索引网站内容。对于使用安企CMS的朋友来说,实现文档列表的分页并显示页码导航是一个非常直观且强大的功能。
安企CMS为我们提供了灵活的模板标签,让内容展示的控制权牢牢掌握在自己手中。要为文档列表设置分页,并友好地展示页码导航,我们主要会用到两个核心的模板标签:archiveList 和 pagination。
第一步:准备分页的文档列表
首先,我们需要通过 archiveList 标签来获取需要分页的文档数据。这个标签非常强大,它能根据我们的需求筛选出文章、产品等各种类型的文档。要启用分页功能,关键在于给 archiveList 标签设置 type="page" 参数,并指定每页显示多少条内容的 limit 参数。
例如,如果我们想在文章列表页显示文章模型(moduleId="1")下的所有文章,并且每页显示10条,我们可以这样来编写:
{% archiveList archives with type="page" limit="10" moduleId="1" %}
{# 在这里循环展示每一页的文档内容 #}
{% endarchiveList %}
在这里,archives 是我们自定义的一个变量名,它会承载当前页所包含的文档数据列表。您可以根据实际情况调整 moduleId(比如,产品列表可能是 moduleId="2"),甚至可以通过 categoryId 来指定某个特定分类下的文档。
第二步:展示当前页的文档内容
获取到当前页的文档数据 archives 后,我们就可以利用 for 循环标签来遍历并展示每一篇文档的详细信息了。在循环中,您可以轻松访问到每篇文档的标题、链接、简介、发布时间、阅读量等各种字段。
一个典型的文档内容展示结构可能像这样:
{% for item in archives %}
<div class="document-item">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
<div class="meta-info">
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量: {{item.Views}}</span>
</div>
</div>
{% empty %}
<p>抱歉,当前分类或搜索条件下暂时没有找到任何文档。</p>
{% endfor %}
这里我们使用了 item.Link 获取文档链接,item.Title 获取标题,item.Description 获取简介。stampToDate 标签则能帮助我们把时间戳格式化成易读的日期。如果 archives 列表为空,{% empty %} 标签中的内容就会被显示,这有助于提升用户体验。
第三步:构建页码导航
仅仅显示当前页的文档还不够,用户还需要通过页码导航跳转到其他页面。这时候,pagination 标签就派上用场了。它会自动识别 archiveList 标签生成的分页数据,并渲染出“首页”、“上一页”、“下一页”以及具体的页码数字。
我们通常会将 pagination 标签放在 archiveList 标签的下方,确保在文档内容展示完成后,用户能方便地找到导航。pagination 标签可以接受一个 show 参数,用于控制在页码导航中最多显示多少个页码数字。
例如,显示最多5个页码的导航:
<nav class="pagination-nav">
{% pagination pages with show="5" %}
<ul>
{# 显示总览信息 #}
<li class="info">共 {{pages.TotalItems}} 条 / 第 {{pages.CurrentPage}} 页</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 %}
</nav>
在上面的代码中,pages 是 pagination 标签提供的变量,它包含了所有与分页相关的信息,例如:
pages.TotalItems:总文档数量。pages.CurrentPage:当前页码。pages.FirstPage、pages.LastPage、pages.PrevPage、pages.NextPage:分别代表首页、尾页、上一页、下一页的链接和名称。我们可以通过pages.FirstPage.Link来获取链接地址,pages.FirstPage.Name获取显示文本。pages.Pages:这是一个包含所有中间页码链接的数组,我们可以通过循环{% for item in pages.Pages %}来逐一显示它们。item.IsCurrent:这个布尔值非常有用,它可以帮我们判断当前循环到的页码是否就是用户正在访问的页面,从而为当前页添加active样式进行高亮显示。
将这些标签组合起来,并结合您网站的CSS样式,一个功能完善且美观大方的文档列表分页导航就构建完成了。安企CMS的这种设计理念,旨在让内容运营者能够以最小的学习成本,实现强大的网站功能。
常见问题解答 (FAQ)
问:分页后,网站的URL结构会发生变化吗?
答:会的。当您在文档列表上启用分页功能后,AnQiCMS会自动在列表页的URL中添加页码参数。例如,如果您的文章列表基础URL是 /article/list.html,那么第二页的URL可能会变成 /article/list-2.html,或者根据您的伪静态规则显示为 /article/list/page/2。这种带有明确页码的URL结构对搜索引擎优化(SEO)非常有帮助。
问:除了文档列表,其他类型的内容可以实现分页吗?
答:当然可以。安企CMS的pagination标签是通用的分页导航生成器。只要是支持type="page"参数的列表标签,例如tagDataList