如何为安企CMS的文档列表、Tag列表等生成分页导航?

📅 👁️ 69

在网站运营中,为内容列表提供清晰、易用的分页导航,不仅能极大提升用户体验,还能优化搜索引擎抓取效率,帮助内容更好地被发现。安企CMS(AnQiCMS)深知这一点,因此在模板设计中提供了强大而灵活的分页标签,让内容运营者能够轻松为文档列表、标签列表等生成分页导航。

接下来,我们将一起探讨如何在安企CMS的模板中实现这一功能,让你的网站内容组织得井井有条。


理解安企CMS的分页核心:数据获取与导航展示

在安企CMS中实现分页功能,主要围绕两个核心要素:

  1. 以分页形式获取内容列表:这需要使用特定的模板标签来指示系统,你希望获取的内容是分批次的,而不是一次性全部加载。
  2. 展示分页导航:一旦内容以分页形式返回,就需要一个导航组件来让访客在不同页面之间跳转。

下面,我们逐一来看这些步骤的具体实现。

第一步:获取分页内容列表

安企CMS提供了 archiveListtagDataList 等标签来获取不同类型的内容列表。要启用分页功能,关键在于在这些标签中加入 type="page" 参数和 limit 参数。

type="page" 是一个非常重要的指示符,它告诉安企CMS,你希望返回的数据是一个可分页的结果集。而 limit 参数则用于定义每页显示多少条内容。

例如,如果你想在一个分类页面显示文章列表并开启分页,可以这样使用 archiveList 标签:

{# 假设我们正在一个分类页面,要获取该分类下的文章列表,每页显示10条 #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
            <p>{{item.Description}}</p>
            <span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

在上述代码中:

  • archives 是一个你自定义的变量名,用于存储分页后的文章数据。
  • type="page" 明确指定了这是一次分页查询。
  • limit="10" 则设置了每页显示 10 篇文章。

类似地,如果你想展示某个具体标签下的文档列表并开启分页,可以使用 tagDataList 标签,它的用法与 archiveList 类似,同样需要 type="page"limit 参数。

第二步:展示分页导航

获取到分页内容后,下一步就是添加实际的分页导航链接了。安企CMS为此提供了一个非常方便的 pagination 标签。这个标签会根据当前页面的分页数据,自动生成“首页”、“上一页”、“下一页”以及中间页码等链接。

pagination 标签通常会与 show 参数一起使用,这个参数用于控制中间页码链接显示的页数。例如,show="5" 就会在当前页附近显示最多 5 个页码链接,保证导航的简洁性。

在使用 pagination 标签时,你需要定义一个变量(例如 pages)来接收分页对象,这个对象包含了当前分页状态的所有信息:

  • pages.TotalItems:总共的内容条数。
  • pages.TotalPages:总页码数。
  • pages.CurrentPage:当前所在的页码。
  • pages.FirstPage:首页对象(包含 LinkIsCurrent 属性)。
  • pages.LastPage:尾页对象(包含 LinkIsCurrent 属性)。
  • pages.PrevPage:上一页对象(如果存在)。
  • pages.NextPage:下一页对象(如果存在)。
  • pages.Pages:一个数组,包含中间页码的对象(每个对象同样有 NameLinkIsCurrent)。

以下是 pagination 标签的一个典型用法示例:

<div class="pagination-nav">
    {% pagination pages with show="5" %}
        {# 可以显示一些分页概览信息 #}
        <span class="page-info">共 {{pages.TotalItems}} 条内容,{{pages.TotalPages}} 页,当前第 {{pages.CurrentPage}} 页</span>

        {# 首页链接 #}
        <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 %}

        {# 中间页码链接 #}
        {% for item in pages.Pages %}
            <a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}

        {# 下一页链接 - 仅当存在下一页时显示 #}
        {% if pages.NextPage %}
            <a class="page-link" href="{{pages.NextPage.Link}}">下一页</a>
        {% endif %}

        {# 尾页链接 #}
        <a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
    {% endpagination %}
</div>

通过灵活组合 pages 对象中的属性,你可以构建出各种样式和布局的分页导航。例如,你可以判断 pages.FirstPage.IsCurrent 来为当前页的链接添加 active 类,以便通过 CSS 进行高亮显示。

综合示例:为文档列表添加分页

将上述两个步骤结合起来,一个完整的带有分页的文档列表页面在模板中可能会是这样的:

”`twig {# /template/{模型table}/list.html 或 /template/search/index.html #}

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article class="article-card">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p class="description">{{item.Description|truncatechars:150}}</p>
            <div class="meta-info">
                <span>发布于:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量:{{item.Views}}</span>
            </div>
        </article>
    {% empty %}
        <p class="no-content">抱歉,这里还没有相关内容。</p>
    {% endfor %}
{% endarchiveList %}

{% pagination pages with show="5" %}
    <nav aria-label="Page navigation">
        <ul class="pagination-list">
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{pages.FirstPage.Link}}" aria-label="首页">首页</a>
            </li>
            {% if pages.Prev

相关文章

安企CMS如何生成并显示当前页面的面包屑导航?

当我们在浏览网站时,常常会看到页面顶部或底部有一行指示当前位置的路径,比如“首页 > 产品分类 > 电子产品 > 笔记本电脑”。这就是我们常说的“面包屑导航”,它不仅能清晰地告知我们身处何处,还能方便我们快速返回上一级页面,极大地提升了网站的用户体验和导航效率。 在安企CMS中,实现并展示面包屑导航是一件非常轻松的事情。系统内置了专门的模板标签,能够智能地根据当前页面的内容结构

2025-11-08

安企CMS如何设置和显示网站首页的TDK(Title, Description, Keywords)?

在网站运营中,TDK(Title, Description, Keywords)扮演着至关重要的角色,它们是搜索引擎了解网站内容的第一扇窗,直接影响着网站在搜索结果中的可见度和点击率。一个优化得当的TDK不仅能提升网站的SEO表现,还能准确地向潜在访客传达网站的核心价值。AnQiCMS作为一款注重SEO优化的内容管理系统,为用户提供了便捷高效的方式来设置和管理网站首页的TDK。 接下来

2025-11-08

如何获取并显示网站的联系人、电话、地址和邮箱等联系方式?

在网站运营中,清晰、易于查找的联系方式是建立用户信任、促进沟通转化的关键要素。无论是寻求合作的伙伴,还是需要帮助的用户,都能通过网站上提供的联系方式快速找到您。安企CMS(AnQiCMS)在联系方式的管理和展示上提供了灵活且便捷的功能,让您可以轻松地获取并显示包括联系人、电话、地址、邮箱等各类联系信息。 ### 一、在后台集中管理您的联系方式 安企CMS将网站的联系方式集中管理

2025-11-08

安企CMS如何显示网站的名称、Logo、备案号和版权信息?

在运营网站时,网站的名称、Logo、备案号和版权信息是构成品牌形象、建立用户信任以及满足法律合规性的核心要素。对于使用安企CMS(AnQiCMS)的用户来说,系统提供了直观且灵活的方式来管理和展示这些信息,让你的网站不仅内容丰富,更在细节上专业完善。 ### 一、集中管理:后台配置这些关键信息 安企CMS的设计哲学之一就是让网站管理变得简单高效。所有这些重要的网站基础信息

2025-11-08

安企CMS如何实现多语言站点的语言切换功能?

当我们的网站旨在服务全球客户时,提供多语言支持就成为了一个不可或缺的功能。这不仅能帮助我们拓展国际市场,也能显著提升不同语言用户的访问体验。安企CMS(AnQiCMS)深知这一需求,因此将多语言支持作为其核心亮点之一,让我们可以轻松实现多语言站点的搭建与语言切换。 ## 安企CMS如何实现多语言站点的语言切换 要实现多语言站点的语言切换,主要涉及后台配置和前端模板的集成。AnQiCMS

2025-11-08

如何显示首页或特定分组的Banner轮播图片?

网站首页和特定分组的Banner轮播图片,是网站吸引访客、展示核心内容的关键元素。一套管理便捷、显示灵活的系统,能让您的网站运营事半功倍。安企CMS(AnQiCMS)凭借其直观的设计和强大的模板标签功能,让您轻松驾驭这些视觉元素,无论是打造醒目的首页大图,还是为特定分类页面量身定制专属宣传图,都能游刃有余。 今天,我们就来深入了解如何在安企CMS中,让您的Banner轮播图片生动起来

2025-11-08

安企CMS如何自定义或覆盖页面中的JSON-LD结构化数据?

安企CMS在内容运营和搜索引擎优化方面一直致力于提供高效且灵活的解决方案。结构化数据,尤其是JSON-LD,是提升网站内容在搜索引擎中可见度的重要手段。它能帮助搜索引擎更准确地理解页面内容,从而有机会展示更丰富的搜索结果(即富媒体摘要),吸引更多用户点击。 安企CMS深知结构化数据的重要性,因此在系统设计上已经为您预置了部分默认的JSON-LD结构化数据。当您的网站发布文章、产品或单页面时

2025-11-08

如何在模板中获取后台自定义的全局参数?

在安企CMS中,网站的灵活性和可维护性是其核心优势之一。内容运营者和开发者常常需要在不修改模板代码的情况下,动态调整网站的一些全局信息,比如公司名称、联系电话,甚至是某些营销活动链接。这些在后台自定义的全局参数,正是实现这种需求的关键。 今天,我们就来深入了解如何在安企CMS的模板中,轻松获取并展示这些在后台配置的自定义全局参数。 ### 为什么需要全局参数? 想象一下

2025-11-08