在网站运营中,如何让用户轻松地浏览大量内容,找到他们感兴趣的信息,是一个至关重要的课题。尤其是在文章列表、产品展示等页面,合理的分页导航不仅能提升用户体验,更是搜索引擎优化(SEO)不可或缺的一部分。安企CMS(AnQiCMS)深知这一点,因此提供了强大而灵活的 pagination 标签,帮助我们轻松为网站内容生成专业且符合用户习惯的分页导航。

我们来深入了解如何在安企CMS中利用 pagination 标签,为网站内容打造流畅的分页体验。

理解 pagination 标签的核心作用

首先,需要明确 pagination 标签本身并非用于获取文章或产品数据,它更像是一个“页面导航生成器”。它的主要职责是根据当前页面的上下文(例如通过 archiveListtagDataList 等标签获取到的列表数据),计算并渲染出包含首页、上一页、具体页码、下一页和末页等组成的分页导航结构。这意味着,在使用 pagination 标签之前,我们必须先在模板中调用相应的列表标签,并明确指出需要分页显示。

通常情况下,我们会配合 archiveList 标签(或者 tagDataListcommentList 等支持分页的列表标签)来使用 pagination。当您在 archiveList 中设置 type="page" 参数并指定 limit(每页显示数量)时,安企CMS会自动为您准备好分页所需的所有数据,这些数据将作为 pagination 标签的输入。

pagination 标签的参数与内部结构

pagination 标签接收一个主要的参数 show,它用来控制在分页导航中最多显示多少个页码按钮。例如,设置 show="5" 会让分页导航在当前页附近显示最多五个页码(不包括首页、末页、上一页、下一页)。这个参数非常实用,可以帮助我们避免在页码过多时,分页导航变得冗长不堪。

当您使用 {% pagination pages with show="5" %} 这样的方式调用标签时,pages 变量会承载所有关于分页的详细信息。这个 pages 对象包含了一系列有用的属性,比如:

  • TotalItems:列表中的总条目数。
  • TotalPages:总共有多少页。
  • CurrentPage:当前访问的是第几页。
  • FirstPage:一个包含了首页名称和链接的对象,通常用于“首页”按钮。
  • LastPage:一个包含了末页名称和链接的对象,通常用于“末页”按钮。
  • PrevPage:一个包含了上一页名称和链接的对象,当不是第一页时可用。
  • NextPage:一个包含了下一页名称和链接的对象,当不是最后一页时可用。
  • Pages:这是一个数组,包含了所有中间页码的对象,每个对象又包含 Name(页码数字)、Link(页码链接)和 IsCurrent(是否当前页,一个布尔值,可用于高亮当前页样式)。

通过这些丰富的属性,我们可以灵活地构建出各种布局和样式的分页导航。

实战演练:构建一个符合用户习惯的分页导航

想象一下,我们正在为一个新闻网站构建一个文章列表页,希望每页显示10篇文章,并且分页导航能够智能地显示当前页码附近的5个页码。下面是一个完整的模板代码示例:

{# 首先,我们调用 archiveList 标签获取文章列表数据,并指明分页类型为 "page" #}
<div>
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
            <article class="article-item">
                <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
                <p>{{item.Description}}</p>
                <footer>
                    <span>分类:{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    <span>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                    <span>阅读量:{{item.Views}}</span>
                </footer>
            </article>
        {% empty %}
            <p>暂时没有文章内容。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 紧接着,在 archiveList 标签的下方,我们就可以使用 pagination 标签来生成分页导航了 #}
    <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 %}

                {# 中间页码列表,遍历 Pages 数组 #}
                {% 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 class="summary">总共 {{pages.TotalItems}} 条内容,分 {{pages.TotalPages}} 页,当前第 {{pages.CurrentPage}} 页。</p>
        {% endpagination %}
    </div>
</div>

在这段代码中,我们首先使用 archiveList 标签来获取文章数据。注意到 type="page"limit="10" 的设置,这告诉安企CMS,我们希望按页显示,每页10条。然后,在列表内容展示完毕后,我们调用 pagination 标签,并将其结果赋值给 pages 变量,同时通过 show="5" 控制显示的页码数量。

pagination 标签内部,我们利用 pages 变量的各项属性,按顺序构建了分页导航。例如,pages.FirstPage.Link 提供了首页的链接,pages.PrevPage 只有在当前页不是第一页时才存在,这使得“上一页”按钮能智能地显示或隐藏。最核心的是遍历 pages.Pages 数组来生成具体的页码按钮,并利用 item.IsCurrent 来为当前页添加 active 类,方便通过CSS高亮显示。最后,我们还展示了如何利用 TotalItemsTotalPagesCurrentPage 来展示当前分页的摘要信息。

进阶技巧与注意事项

  • SEO 优化与伪静态: 安企CMS对SEO非常友好,在后台“功能管理”下的“伪静态规则”中配置好URL规则后(例如使用 {module}-{id}.html{catname}-{page}.html 这样的模式),pagination 标签生成的链接会自动遵循这些规则。这意味着您的分页链接将是静态化的,更容易被搜索引擎抓取和索引,从而提升网站的SEO表现。
  • 动态筛选与搜索结果分页: 无论用户是通过分类、标签进行筛选,还是通过搜索框输入关键词进行搜索,pagination 标签都能智能地读取当前URL中的查询参数,并在生成分页链接时自动带上这些参数。您