在安企CMS中,内容列表的分页显示是提升用户体验、优化网站性能以及方便内容管理的关键功能之一。安企CMS凭借其灵活的模板标签和强大的内容管理能力,为我们提供了简单而高效的方式来实现这一需求。

内容列表分页显示的重要性

想象一下,如果您的网站有成千上万篇文章、产品或评论,而它们都显示在一个页面上,这不仅会让页面加载速度奇慢无比,还会让用户在浩瀚的信息中迷失方向。分页显示则能够将大量内容合理地拆分成多个页面,大大减轻了单个页面的负担,优化了加载速度,同时也让用户能够按需浏览,提升了整体的用户体验。对于搜索引擎而言,清晰的分页结构也有助于其更好地理解和索引网站内容。

安企CMS的模板引擎设计得直观易用,它采用了类似Django模板引擎的语法,通过特定的标签({% tag %})来处理逻辑,并使用双花括号({{ variable }})来输出变量,这使得即使是不具备深厚开发背景的用户也能快速上手。

核心标签:archiveListpagination

在安企CMS中,实现内容列表分页显示主要依赖于两个核心模板标签:

  1. archiveList 文档列表标签:用于获取和展示文档内容列表。
  2. pagination 分页标签:用于渲染分页导航链接,让用户可以在不同页面之间跳转。

下面,我们将一步步介绍如何结合这两个标签来实现内容列表的分页显示。

第一步:使用 archiveList 标签获取分页数据

archiveList 标签是您获取文章、产品等内容列表的主要工具。要实现分页,您需要通过其 typelimit 参数来指定分页行为:

  • type="page":这个参数是告诉安企CMS,您希望获取的数据是一个可以进行分页的列表。系统会根据当前页面URL中的页码参数(例如?page=2)自动调整返回的数据。
  • limit="N":这个参数则定义了每页显示多少条内容。例如,limit="10" 意味着每页显示10条内容。

以下是一个基本的 archiveList 标签使用示例,用于获取文章模型(moduleId="1")下的内容列表,并准备进行分页,每页显示10条:

{% archiveList archives with type="page" moduleId="1" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
            <p class="summary">{{ item.Description }}</p>
            <div class="meta">
                <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量: {{ item.Views }}</span>
                <span>分类: <a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
            </div>
        </div>
    {% empty %}
        <p>抱歉,当前分类或搜索条件下暂无内容。</p>
    {% endfor %}
{% endarchiveList %}

在上面的代码中:

  • archives 是您自定义的变量名,用于存储获取到的文档列表。
  • moduleId="1" 表示获取ID为1的文章模型下的内容。您可以根据自己的内容模型ID进行调整。
  • item.Linkitem.Titleitem.Description 等是 archives 列表中每个文档项的常用属性。您还可以访问 item.Views(浏览量)、item.Thumb(缩略图)等更多属性。

第二步:使用 pagination 标签渲染分页导航

archiveList 标签之后,您需要使用 pagination 标签来生成分页导航条。这个标签会自动处理当前页码、总页数以及生成正确的页码链接等复杂逻辑。

  • show="N":这个参数用于控制在分页导航条上,除了首页、末页、上一页、下一页外,最多显示多少个页码数字。例如,show="5" 会在导航中显示当前页附近5个页码。

以下是一个标准且功能完善的 pagination 标签使用示例:

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul>
            <li class="info">总共:{{ 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 pageItem in pages.Pages %}
                <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                    <a href="{{ pageItem.Link }}">{{ pageItem.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>

在上述代码中:

  • pagespagination 标签生成的变量,包含了所有分页相关的数据。
  • pages.TotalItemspages.TotalPagespages.CurrentPage 分别表示总条数、总页数和当前页码。
  • pages.FirstPagepages.PrevPagepages.NextPagepages.LastPage 都是对象,包含 Name(链接文本,如“首页”、“上一页”)和 Link(跳转链接)。
  • pages.Pages 是一个数组,包含了中间部分的页码,您需要通过 for 循环遍历它来显示每个页码。pageItem.IsCurrent 可以判断当前页码是否为当前页面,方便您添加高亮样式。

组合示例:完整的分页显示代码

将上述两个标签结合起来,您就可以在安企CMS的模板中实现一个完整的内容列表分页显示功能。通常,这样的代码会放在分类列表页 ({模型table}/list.html) 或搜索结果页 (search/index.html) 等模板中。

”`twig <!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %} - {% system with name="SiteName" %}</title>
<style>
    /* 简单的分页样式,您可以根据网站设计自由调整 */
    .pagination-container ul {
        list-style: none;
        padding: 0;
        display: flex;
        justify-content