安企CMS的分页标签如何实现内容列表的分页导航显示?

📅 👁️ 58

在使用安企CMS(AnQiCMS)构建网站时,当我们需要展示大量内容,例如文章列表、产品列表等,合理的分页导航就显得尤为重要。它不仅能提升用户体验,让访问者更容易浏览和查找内容,也有助于搜索引擎更好地抓取网站。安企CMS提供了非常直观且功能强大的分页标签,让内容列表的分页显示变得轻而易举。

第一步:准备内容列表数据

要实现内容列表的分页显示,首先需要使用 archiveList 标签来获取数据。这个标签是安企CMS中用于调用各种类型文档列表的核心。关键在于,我们需要明确告诉系统,这个列表是需要分页的,而不是一次性全部加载。

为此,在使用 archiveList 标签时,需要将 type 参数设置为 "page"。同时,通过 limit 参数来指定每页希望显示多少条内容。例如,如果想在当前分类下,每页显示10篇文章,可以这样设置:

{% archiveList archives with type="page" limit="10" %}
    {# 循环显示文章内容 #}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h5>{{item.Title}}</h5>
                <p>{{item.Description}}</p>
                <span>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </a>
        </li>
    {% endfor %}
{% endarchiveList %}

在这里,archives 是我们自定义的一个变量名,它包含了当前页的所有文章数据。接下来的 for 循环会遍历这些数据,将每篇文章的标题、链接、简介和发布日期等信息展示出来。

第二步:引入分页标签,构建导航

archiveList 标签获取并显示了当前页内容之后,紧接着就可以引入安企CMS的分页标签 pagination 来生成分页导航了。这个标签通常放置在 archiveList 标签的闭合之后。

pagination 标签需要一个变量来存储分页信息,通常我们会将其命名为 pages。此外,show 参数非常实用,它决定了在分页导航中最多同时显示多少个页码按钮,比如 show="5" 表示最多显示5个页码。

分页标签会提供一系列内置的对象和属性,帮助我们构建完整的导航结构,包括:

  • pages.TotalItems:内容总数。
  • pages.TotalPages:总页数。
  • pages.CurrentPage:当前所在页码。
  • pages.FirstPagepages.LastPage:指向第一页和最后一页的对象。
  • pages.PrevPagepages.NextPage:指向上一页和下一页的对象。
  • pages.Pages:一个包含所有中间页码信息的数组,可以通过 for 循环来遍历显示。

每个页码对象(例如 pages.FirstPagepages.Pages 中的 item)都包含 Name(页码显示名称)、Link(页码链接)和 IsCurrent(是否为当前页,用于高亮显示)等属性。

下面是一个构建分页导航的通用示例:

<div>
    {% 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>

通过上述代码,你将得到一个功能完善的分页导航,包含了第一页、上一页、下一页、最后一页以及中间的页码链接,并且当前页会带有 active 样式类以便于高亮显示。

完整示例:文章列表与分页导航

将以上两个步骤结合起来,就能在安企CMS中轻松实现内容列表的分页导航显示。

<div class="article-list-container">
    {# 第一步:获取需要分页的文章列表数据 #}
    {% archiveList archives with type="page" limit="10" %}
        {# 循环显示文章内容 #}
        {% for item in archives %}
            <div class="article-item">
                <a href="{{item.Link}}">
                    <h3>{{item.Title}}</h3>
                    <p>{{item.Description}}</p>
                    <small>发布于:{{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
                </a>
            </div>
        {% empty %}
            <p>该分类下暂时没有文章。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 第二步:生成分页导航 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <ul class="pagination-nav">
                <li class="pagination-info">总计:{{pages.TotalItems}}条,共{{pages.TotalPages}}页,当前第{{pages.CurrentPage}}页</li>

                <li class="page-link-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
                </li>

                {% if pages.PrevPage %}
                    <li class="page-link-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a></li>
                {% endif %}

                {% for item in pages.Pages %}
                    <li class="page-link-item {% if item.IsCurrent %}active{% endif %}">
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    </li>
                {% endfor %}

                {% if pages.NextPage %}
                    <li class="page-link-item"><a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a></li>
                {% endif %}

                <li class="page-link-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
                </li>
            </ul>
        {% endpagination %}
    </div>
</div>

通过这些简单的标签组合,安企CMS能够帮助你快速地为网站内容添加分页功能,无论是文章、产品还是其他自定义内容模型,都能轻松实现,大大提升网站的实用性和用户体验。

常见问题 (FAQ)

1. 为什么我的内容列表页面没有显示分页导航?

通常情况下,这可能是因为在使用 archiveListtagDataList 等内容列表标签时,没有将 type 参数设置为 "page"。只有当 type="page" 时,安企CMS才会计算分页信息并提供给 pagination 标签使用。另外,也要检查 limit 参数是否设置得当,如果内容总数不足一页(即小于等于 limit 值),系统也不会显示分页导航。

2. 如何调整每页显示的内容数量?

要调整每页显示的内容数量,只需修改 archiveList 标签中的 limit 参数值。例如,将 limit="10" 改为 limit="20" 即可让每页显示20条内容。这个参数直接决定了分页的数量和每页内容的密度。

3. 分页链接的URL格式是如何生成的?我可以自定义吗?

安企CMS的分页链接URL格式是根据您在后台配置的“伪静态规则”自动生成的。例如,如果您选择的是数字模式,链接可能像 /archive/page-2.html 这样;如果是模型命名模式,可能会包含模型名称。通常,默认的伪静态规则就能满足大部分需求。如果需要高度自定义,您可以在 pagination 标签中使用 prefix 参数来重定义URL模式,但这个功能比较高级,需要包含 {page} 占位符来指示页码位置,并且需要确保与您网站的路由规则相匹配。

相关文章

如何在前端调用并显示后台设置的友情链接?

安企CMS (AnQiCMS) 提供了一套直观而强大的内容管理功能,其中“友情链接”管理是网站运营中不可或缺的一部分,它不仅能促进网站的SEO表现,还能为用户提供便捷的导航。本篇文章将详细介绍如何在网站前端调用并优雅地展示您在后台设置的友情链接。 ### 友情链接的后台配置 在安企CMS中管理友情链接非常简单。您只需登录后台,找到左侧菜单栏中的“功能管理”模块,点击进入“友情链接”。在这里

2025-11-08

如何在网站上显示用户提交的留言表单?

安企CMS提供了一套高效且灵活的机制,帮助您在网站上轻松地展示和管理用户留言表单。无论是收集用户反馈、咨询,还是简单的互动留言,安企CMS都能让您快速实现这一功能,并根据业务需求进行个性化定制。 ### 了解安企CMS留言功能 在安企CMS的后台管理界面中,您可以在“功能管理”菜单下找到“网站留言”选项。这里是您管理所有留言相关设置的核心区域,包括查看已提交的留言、自定义表单字段

2025-11-08

如何实现文章评论列表的分页显示功能?

在网站运营中,高效地管理和展示用户评论对于提升用户互动和内容活力至关重要。安企CMS(AnQiCMS)作为一个功能强大的内容管理系统,提供了灵活的模板标签,让我们可以轻松实现文章评论列表的分页显示。本文将详细介绍如何在安企CMS中,通过模板标签实现这一功能,从而为用户提供更佳的浏览体验。 ### 理解评论和分页的核心 在安企CMS的模板体系中,实现文章评论列表的分页显示

2025-11-08

如何利用Tag标签在前端关联并显示相关内容?

在安企CMS中,内容组织和关联是提升网站价值、优化用户体验和搜索引擎表现的关键。除了传统的分类结构,我们还有一个非常强大且灵活的工具——Tag标签。它就像内容的“活索引”,能帮助我们以多维度将分散的内容串联起来,让用户更容易发现他们感兴趣的信息。今天,我们就来聊聊如何在前端充分利用Tag标签,关联并展示我们的精彩内容。 ### Tag标签:灵活的内容关联桥梁 不同于严格的分类体系

2025-11-08

如何在页面中嵌入数学公式和流程图,并确保正确渲染显示?

在网站运营中,我们经常需要展示一些专业性较强的内容,比如涉及科学计算的数学公式,或是业务流程说明的复杂流程图。这些内容的传统展示方式往往效率低下,难以维护,也无法提供良好的阅读体验。AnQiCMS 结合其强大的内容管理能力和对 Markdown 的支持,为我们提供了一套优雅的解决方案。通过简单地引入一些外部库,并开启 Markdown 编辑器,我们就能让这些专业内容在网站页面上正确

2025-11-08

如何在网站内容中实现HTML标签的安全输出,避免转义?

在网站内容管理中,尤其当内容包含丰富的格式或来自用户输入时,如何安全地输出 HTML 标签是一个至关重要的问题。安企CMS(AnQiCMS)在设计之初就充分考虑了这一点,其模板引擎默认会对输出的变量进行转义,以有效防范跨站脚本攻击(XSS)等安全风险。 ### 理解模板引擎的默认行为 安企CMS的模板引擎借鉴了Django等主流框架的语法,其核心理念之一就是“安全至上”

2025-11-08

如何截取长文本内容并在末尾添加省略号,以优化列表显示?

在网站运营中,尤其是管理内容丰富的平台,列表页的显示效果对用户体验至关重要。无论是文章列表、产品概览还是新闻动态,我们都希望页面整洁、信息一目了然。然而,当文档内容或描述过长时,直接显示在列表中往往会导致版面混乱,影响整体美观和信息获取效率。此时,有效地截取文本并添加省略号就显得尤为重要。 安企CMS(AnQiCMS)提供了强大而灵活的模板系统,其中内置的文本过滤器能帮助我们轻松解决这一问题

2025-11-08

如何将图片地址转换为缩略图格式进行显示?

在网站运营中,图片扮演着至关重要的角色。它们不仅能吸引用户的目光,还能有效传达信息。然而,过大的图片会严重影响网站加载速度,进而损害用户体验和搜索引擎排名。因此,将图片地址转换为缩略图格式进行显示,成为了优化网站性能不可或缺的一环。AnQiCMS 在这方面提供了非常便捷的功能,它能自动为您的网站生成和管理图片缩略图,并提供灵活的调用方式,帮助您轻松应对图片优化挑战。 ### AnQiCMS

2025-11-08