如何在AnQiCMS模板中实现分页功能,并自定义页码显示数量?

📅 👁️ 72

在内容管理系统中,有效的分页功能对于提升用户体验和网站的SEO表现至关重要。当网站内容量逐渐增加时,合理地组织和展示内容列表,能让访问者更轻松地浏览信息,并帮助搜索引擎更好地抓取和索引页面。AnQiCMS作为一个高效的内容管理系统,提供了灵活且易于使用的模板标签,让您能够轻松在模板中实现分页,并根据需要自定义页码的显示方式。

要在AnQiCMS模板中实现分页,主要涉及两个核心步骤:首先是告诉系统您需要获取一份可分页的内容列表,其次是在页面上渲染出分页导航链接。

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

在您的AnQiCMS模板文件(例如文章列表页 archive/list.html 或自定义分类列表页 article/list.html)中,您需要使用 archiveList 或其他内容列表标签来获取文章、产品等数据。关键在于,您需要通过设置 type="page" 参数,明确告诉系统您希望这份列表是支持分页的。同时,limit 参数用于定义每页显示多少条内容。

例如,如果您想在一篇文章列表中每页显示10条内容,可以这样来获取数据:

{% 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>
            <span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </a>
    </div>
    {% empty %}
    <p>抱歉,当前分类暂无文章内容。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中:

  • archiveList 是用于获取文档列表的标签。
  • archives 是我们定义的一个变量名,用于存放获取到的文章数据,您可以在 for 循环中通过 item 来访问每篇文章的详细信息。
  • type="page" 是启用分页的关键设置。
  • limit="10" 则指定了每页显示10条文章。

第二步:在模板中添加分页导航

在获取了支持分页的内容列表后,接下来就是在页面底部或其他合适位置显示分页导航链接了。AnQiCMS为此提供了一个专门的 pagination 标签。这个标签会根据 archiveList 标签获取到的分页数据,自动生成“首页”、“上一页”、“下一页”、“尾页”以及中间的页码链接。

最重要的是,您可以通过 show 参数来灵活控制中间页码链接的显示数量。例如,如果您希望分页导航只显示当前页码周围的5个页码链接,您可以将 show 设置为 5

以下是一个完整的分页导航示例代码:

<div class="pagination-nav">
    {% pagination pages with show="5" %}
    <ul>
        {# 首页链接 #}
        <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 循环逐个显示 #}
        {% 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>
    {# 可以在此处额外显示总条数或总页数信息 #}
    <p>总共 {{pages.TotalItems}} 条记录,分为 {{pages.TotalPages}} 页,当前第 {{pages.CurrentPage}} 页。</p>
    {% endpagination %}
</div>

在这段代码中:

  • pages 是一个包含了所有分页信息的变量,它由 pagination 标签生成。
  • show="5" 指定了除了首页、上一页、下一页、尾页之外,中间部分最多显示5个页码链接。例如,如果当前是第10页,它可能会显示 “8 9 10 11 12” 这样的页码。
  • pages.FirstPagepages.PrevPagepages.NextPagepages.LastPage 分别代表首页、上一页、下一页和尾页的链接对象,它们都有 Link(链接地址)和 Name(显示名称)属性。
  • pages.Pages 是一个数组,包含了中间部分的页码对象,您可以通过 for 循环遍历它们。每个页码对象同样有 LinkName 属性。
  • item.IsCurrentpages.FirstPage.IsCurrent 等布尔值可以用来判断当前页是否选中,从而为当前页添加 active 类或其他样式,方便用户识别。

整合示例:完整的文章列表与分页代码

将上述两部分代码结合起来,一个基本的带有分页功能的文章列表页就完成了。通常,您会将内容列表放在一个部分,然后紧接着是分页导航。

{# 您的文章列表页模板文件 (例如: template/default/archive/list.html) #}

{# 引入公共头部文件,通常包含网站标题、SEO元信息等 #}
{% include "partial/header.html" %}

<main class="container">
    <section class="article-list">
        <h2>最新文章</h2>
        {% 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>
                    <span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span class="views">{{item.Views}} 阅读</span>
                </a>
            </div>
            {% empty %}
            <p>抱歉,当前分类暂无文章内容。</p>
            {% endfor %}
        {% endarchiveList %}
    </section>

    {# 分页导航区域 #}
    <nav class="pagination-nav">
        {% pagination pages with show="7" %} {# 这里我们自定义显示7个页码链接 #}
        <ul class="pagination-ul">
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.FirstPage.Link}}" title="首页">{{pages.FirstPage.Name}}</a>
            </li>
            {% if pages.PrevPage %}
            <li class="page-item">
                <a href="{{pages.PrevPage.Link}}" title="上一页">{{pages.PrevPage.Name}}</a>
            </li>
            {% endif %}
            {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a href="{{item.Link}}" title="第{{item.Name}}页">{{item.Name}}</a>
            </li>
            {% endfor %}
            {% if pages.NextPage %}
            <li class="page-item">
                <a href="{{pages.NextPage.Link}}" title="下一页">{{pages.NextPage.Name}}</a>
            </li>
            {% endif %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a href="{{pages.LastPage.Link}}" title="尾页">{{pages.LastPage.Name}}</a>
            </li>
        </ul>
        <p class="pagination-info">总共 {{pages.TotalItems}} 条记录,当前显示第 {{pages.CurrentPage}} / {{pages.TotalPages}} 页。</p>
        {% endpagination %}
    </nav>
</main>

{# 引入公共底部文件 #}
{% include "partial/footer.html" %}

请记住,上述代码中 class="article-item", class="pagination-nav" 等都只是示例,您需要根据您的网站设计,通过CSS来美化这些元素,使其符合您的网站风格。

进阶技巧:自定义分页 URL 模式

在某些特定需求下,您可能需要更精细地控制分页链接的URL结构,例如为了SEO目的或者与现有URL规则保持一致。AnQiCMS的 pagination 标签提供了 prefix 参数,允许您自定义分页URL的模式。

例如,如果您想让分页链接看起来像 /articles/page-{page}.html,您可以在 pagination 标签中这样设置:{% pagination pages with show="5" prefix="/articles/page-{page}.html" %}。不过

相关文章

AnQiCMS网站如何实现多语言内容的切换和显示?

在全球化浪潮下,网站多语言支持已成为企业拓展国际市场的必备条件。AnQiCMS作为一个企业级内容管理系统,充分考虑到了这一需求,并提供了一套高效、灵活的解决方案,帮助用户轻松实现多语言内容的切换和显示。 ### AnQiCMS的多语言实现逻辑 AnQiCMS实现多语言内容切换和显示的核心策略,是基于其强大的“多站点管理”功能。它并非采用自动翻译的模式

2025-11-07

如何在AnQiCMS模板中循环遍历和显示文章标签列表?

在安企CMS中,文章标签不仅是组织内容、提升用户体验的利器,更是优化搜索引擎抓取和排名(SEO)的重要元素。它们能够帮助访问者快速找到相关内容,也能让搜索引擎更好地理解网站结构。那么,如何在AnQiCMS的模板中灵活地循环遍历并展示这些文章标签列表呢?这其实比你想象的要简单,AnQiCMS强大的模板标签体系让这一切变得非常直观。 AnQiCMS采用了类似Django模板引擎的语法

2025-11-07

AnQiCMS多站点管理中,如何调用并显示不同站点的数据?

安企CMS(AnQiCMS)作为一个高效灵活的内容管理系统,其强大的多站点管理功能无疑是许多运营者青睐的亮点。当我们手握多个品牌、多个区域或多个主题的网站时,能够通过一套系统统一管理,并灵活地在不同站点间调用和展示数据,将极大地提升工作效率和内容整合度。那么,在AnQiCMS的多站点环境中,究竟该如何实现不同站点数据的调用与显示呢? ### 理解多站点数据调用的核心

2025-11-07

如何根据自定义内容模型,显示其特有的字段内容?

安企CMS以其强大的内容管理能力,特别是灵活的内容模型,让我们的网站内容组织变得前所未有的简单。当标准内容字段无法满足特定业务需求时,自定义内容模型及其特有字段应运而生。那么,如何在网站前端模板中,精准地调用并展示这些独特的自定义字段内容呢?本文将详细为您揭示其中的奥秘。 ### 一、理解安企CMS的内容模型与自定义字段 安企CMS的核心优势之一就是其高度灵活的内容模型

2025-11-07

AnQiCMS如何确保上传的图片自动转换为WebP格式以优化加载速度?

在当今快节奏的数字世界里,网站加载速度直接影响着用户体验和搜索引擎排名。特别是图片,常常是拖慢网站速度的罪魁祸首。大型图片文件不仅占用更多的服务器带宽,还会延长页面渲染时间,导致访客流失。幸运的是,AnQiCMS深知这一点,并通过智能的图片处理功能,为我们提供了一个优雅的解决方案:自动将上传的图片转换为WebP格式,以实现网站加载速度的优化。 WebP是一种由Google开发的现代图片格式

2025-11-07

如何在AnQiCMS模板中显示网站的联系方式,如电话、地址、邮箱?

网站的联系方式,就像是企业的一张名片,是访客了解和信任网站的重要渠道。无论是希望客户拨打电话咨询,还是方便他们通过邮件沟通,亦或是指引他们前往实体店面,清晰准确的联系信息都必不可少。在AnQiCMS中,显示这些信息是一件非常直观且灵活的事情,它允许我们不仅能统一管理,还能根据需求在网站的不同位置进行展示。 接下来,我们就一起看看如何在AnQiCMS模板中巧妙地展示电话、地址、邮箱等联系方式吧

2025-11-07

AnQiCMS如何控制特定内容只对VIP用户组可见?

在内容运营中,将部分优质内容专属呈现给VIP用户是常见的策略。这不仅能提升用户粘性,促使用户转化,也是实现内容变现的重要途径。AnQiCMS 提供了一套完善的用户组管理与内容权限控制功能,让您轻松实现特定内容只对VIP用户组可见的需求。 ### 后台设置:区分用户与内容 实现VIP专属内容可见,首先需要在AnQiCMS的后台进行两项关键配置:用户组管理和内容权限设置。 **第一步

2025-11-07

如何在AnQiCMS网站上展示留言表单,并支持自定义字段显示?

在数字化运营日益重要的今天,网站留言板不仅是用户与网站互动的重要桥梁,更是收集用户反馈、了解市场需求的关键渠道。安企CMS(AnQiCMS)深知这一需求,提供了灵活且功能强大的留言表单展示与自定义字段支持,让您能够轻松打造符合业务需求的互动平台。 ### 第一步:配置留言表单的自定义字段 要让留言表单拥有更多个性化信息收集能力,我们需要首先在安企CMS后台进行配置。 进入安企CMS后台

2025-11-07