安企CMS的列表页如何实现分页功能,并控制页码显示数量?

📅 👁️ 62

在构建网站列表页时,良好的分页体验是提升用户满意度和网站性能的关键。安企CMS深知这一点,并提供了直观且功能强大的标签来帮助我们轻松实现列表页的分页功能,同时灵活控制页码的显示数量。

核心功能解析:列表数据与分页导航

安企CMS实现列表分页主要依赖于两个核心标签的配合使用:archiveListpaginationarchiveList 负责从数据库中获取需要展示的内容列表,而 pagination 则负责根据 archiveList 提供的数据生成并展示分页导航。

1. 获取列表数据:archiveList 标签

首先,我们需要利用安企CMS强大的 archiveList 标签来获取您希望展示的内容列表。关键在于,您需要为这个标签设置 type="page" 参数,这会告诉系统您需要分页的数据,而不是一次性加载所有内容。同时,limit 参数用于指定每页显示多少条内容,例如 limit="10" 表示每页展示10条内容。

一个基本的列表获取代码示例如下:

{% archiveList archives with type="page" limit="10" categoryId="1" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>{{item.Description}}</p>
        </a>
    </li>
    {% empty %}
    <li>
        目前该分类下没有内容。
    </li>
    {% endfor %}
{% endarchiveList %}

在上面的例子中,archives 是我们自定义的变量名,它将包含当前页的文章列表。categoryId="1" 限制了只获取ID为1的分类下的文章,您可以根据实际需求调整 categoryIdmoduleId 等参数。{% for item in archives %} 循环会遍历当前页的所有文章,并展示它们的标题和描述。{% empty %} 部分则会在列表为空时显示提示信息。

2. 实现分页导航:pagination 标签

archiveList 标签的 type 设置为 "page" 后,安企CMS会在后台自动处理分页逻辑,并生成一个 pages 对象,这个对象包含了所有与分页相关的信息,例如总页数、当前页、首页、尾页、上一页、下一页以及中间的页码列表。pagination 标签就是用来消费这个 pages 对象的。

pagination 标签最关键的参数是 show,它控制在分页导航条中显示多少个页码。例如,show="5" 将会在当前页码前后显示总共5个页码链接(如果页码足够的话)。

以下是分页导航的代码示例:

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        <li>总数:{{pages.TotalItems}}条,总共:{{pages.TotalPages}}页,当前第{{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 %}
</div>

在这个例子中,pages 是由 pagination 标签提供的一个对象。我们可以通过 pages.TotalItems 获取总条目数,pages.TotalPages 获取总页数,pages.CurrentPage 获取当前页码。pages.FirstPagepages.PrevPagepages.NextPagepages.LastPage 则分别代表首页、上一页、下一页和尾页的链接信息,包括 Link(链接地址)、Name(显示名称)和 IsCurrent(是否为当前页)。

最核心的部分是 {% for item in pages.Pages %} 循环,它遍历了 show 参数指定的中间页码列表,从而动态生成了页码链接。每个 item 都包含 LinkNameIsCurrent 属性,方便我们构建带有样式判断的页码导航。

实战演练:整合代码实现分页

通常,您会将上述两部分代码放置在您希望展示分页列表的模板文件(例如 template/{模型table}/list.htmltemplate/{您的自定义模板名}.html)中。

以下是一个完整的整合示例:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" %}</title>
    <style>
        .pagination { margin-top: 20px; text-align: center; }
        .pagination ul { list-style: none; padding: 0; display: inline-block; }
        .pagination li { display: inline-block; margin: 0 5px; }
        .pagination li a { text-decoration: none; padding: 8px 12px; border: 1px solid #ddd; color: #333; }
        .pagination li.active a { background-color: #007bff; color: white; border-color: #007bff; }
        .pagination li a:hover:not(.active) { background-color: #eee; }
    </style>
</head>
<body>
    <div class="container">
        <h1>文章列表</h1>
        <ul>
            {% archiveList archives with type="page" limit="10" categoryId="1" %}
                {% for item in archives %}
                <li>
                    <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
                    <p>{{item.Description}}</p>
                    <small>发布时间:{{stampToDate(item.CreatedTime, "2006-01-02")}} | 浏览量:{{item.Views}}</small>
                </li>
                {% empty %}
                <li>
                    目前该分类下没有内容。
                </li>
                {% endfor %}
            {% endarchiveList %}
        </ul>

        <div class="pagination">
            {% pagination pages with show="5" %}
            <ul>
                <li>总计 {{pages.TotalItems}} 篇文章,共 {{pages.TotalPages}} 页,当前第 {{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 %}
        </div>
    </div>
</body>
</html>

在上面的示例中,我们获取了ID为1的分类下的文章,每页显示10篇,并在分页导航中显示5个页码链接。您可以根据自己的设计需求调整 limitshow 的数值,以达到**的视觉和用户体验效果。

控制分页页码显示数量的技巧

通过 pagination 标签的 show 参数,我们可以非常灵活地控制分页条的显示样式。

  • show="3": 只会在当前页码前后各显示一个页码(如果总页数允许)。这适用于页码数量非常多的情况,可以使导航更加简洁。
  • show="7": 会显示更多的页码链接,方便用户快速跳转到更远的页面。
  • 不设置 show 参数: 安企CMS会有一个默认的显示数量,通常是5个,但具体取决于系统配置。

此外,您还可以利用 pages 对象中的 `TotalItems

相关文章

如何在安企CMS中显示面包屑导航,并自定义首页名称?

在使用安企CMS(AnQiCMS)管理网站内容时,面包屑导航是提升用户体验和搜索引擎优化(SEO)效果的重要组成部分。它能清晰地展示当前页面在网站结构中的位置,帮助用户理解网站层级,并方便地回溯到上级页面。得益于AnqiCMS灵活的模板引擎和丰富的内置标签,实现面包屑导航并进行个性化定制变得非常简单。 ### 什么是面包屑导航? 面包屑导航(Breadcrumb

2025-11-08

安企CMS是否支持Markdown内容渲染,以及如何启用并正确显示数学公式和流程图?

在内容创作日益多样化的今天,有效地呈现富文本内容,特别是包含数学公式和流程图的专业信息,成为了许多网站运营者的需求。安企CMS(AnQiCMS)作为一款高效的内容管理系统,也充分考虑了这一点。本文将深入探讨安企CMS是否支持Markdown内容渲染,以及如何启用并正确显示其中的数学公式和流程图,帮助您轻松驾驭这些高级内容形式。 ###

2025-11-08

如何在安企CMS模板中调用和展示网站的联系方式信息?

在网站运营中,清晰、便捷地展示网站的联系方式信息至关重要。无论是为了客户咨询、合作洽谈,还是提升品牌信任度,准确的联系方式都能发挥关键作用。AnQiCMS作为一个内容管理系统,充分考虑到了这一需求,提供了直观且灵活的方式来管理和调用网站的联系方式信息。 ### 后台设置联系方式信息 首先,所有需要展示的联系方式信息都需在AnQiCMS的后台进行统一配置。这确保了信息的一致性

2025-11-08

安企CMS如何实现多站点内容的独立展示和管理?

在当今多元化的网络环境中,许多企业和个人运营者常常需要同时管理多个网站。这些网站可能代表不同的品牌、产品线,或者针对不同的用户群体和地域。如何在一个统一的框架下,实现这些站点内容的独立管理和展示,同时又能保持高效和灵活,是许多运营者面临的挑战。安企CMS(AnQiCMS)凭借其强大的多站点管理功能,为这一需求提供了出色的解决方案。 安企CMS 的核心优势之一,便是它能够让您通过一套系统

2025-11-08

如何在安企CMS的模板中获取并显示当前文档的上一篇/下一篇链接?

在AnQiCMS的内容管理体系中,为网站访问者提供便捷的导航体验至关重要。当用户阅读完一篇精彩的文章或查看完一件详细的产品后,通常会希望能继续浏览相关内容。这时,在当前文档页面上展示“上一篇”和“下一篇”的链接,无疑能极大提升用户体验,延长他们在网站上的停留时间。AnQiCMS的模板系统凭借其灵活的标签设计,使得在文档详情页中获取并显示这些链接变得非常直观。 ###

2025-11-08

如何在安企CMS中根据关键词进行站内搜索,并显示搜索结果?

在网站运营中,站内搜索功能是提升用户体验、帮助访客快速找到所需内容的关键一环。一个高效的搜索机制不仅能提高用户满意度,还能延长用户在网站上的停留时间。安企CMS(AnQiCMS)为我们提供了灵活且强大的工具来轻松实现这一功能。 要实现在安企CMS中根据关键词进行站内搜索并显示结果,主要涉及三个核心环节:**搭建搜索表单、创建搜索结果页面模板以及利用模板标签展示内容。** 接下来

2025-11-08

安企CMS如何配置和显示文章内容中的Tag标签列表?

在网站内容运营中,Tag标签(也称关键词标签)扮演着至关重要的角色。它不仅能帮助用户快速找到感兴趣的内容,还能有效提升网站内容的关联性和深度,对于搜索引擎优化(SEO)也大有裨益。安企CMS深谙此道,提供了完善的Tag标签配置和展示功能,让我们可以轻松为文章添加标签,并以多种方式在网站前台进行灵活展示。接下来,我们将详细了解如何在安企CMS中玩转文章Tag标签。 ### 一

2025-11-08

如何在安企CMS中为不同的内容模型(如文章、产品)自定义字段并显示?

安企CMS以其灵活的内容模型设计,让网站内容的管理和展示变得异常强大。除了文章标题、发布时间、内容主体等通用字段外,我们常常需要为特定的内容类型(如产品、新闻、案例等)添加独有的信息。例如,产品可能需要“产品型号”、“颜色选项”、“尺寸”,而新闻可能需要“文章来源”或“作者介绍”。安企CMS的自定义字段功能,正是为了满足这种个性化需求而生

2025-11-08