在现代网站运营中,为内容列表设置分页功能几乎是不可或缺的。它不仅能显著提升用户浏览体验,避免单页内容过长导致加载缓慢,还有助于搜索引擎更好地抓取和索引网站内容。对于使用安企CMS的朋友来说,实现文档列表的分页并显示页码导航是一个非常直观且强大的功能。

安企CMS为我们提供了灵活的模板标签,让内容展示的控制权牢牢掌握在自己手中。要为文档列表设置分页,并友好地展示页码导航,我们主要会用到两个核心的模板标签:archiveListpagination

第一步:准备分页的文档列表

首先,我们需要通过 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>

在上面的代码中,pagespagination 标签提供的变量,它包含了所有与分页相关的信息,例如:

  • pages.TotalItems:总文档数量。
  • pages.CurrentPage:当前页码。
  • pages.FirstPagepages.LastPagepages.PrevPagepages.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