在网站运营中,尤其是管理大量内容时,文章列表的分页显示是一个不可或缺的功能。它不仅能让用户浏览内容更加便捷,避免单页加载过多数据导致速度变慢,还能提高网站的整体用户体验和SEO友好性。在安企CMS中,实现文章列表的分页显示并灵活控制每页数量,操作起来非常直观。

接下来,我们将一起探索如何在安企CMS的模板中实现文章列表的分页功能,并限制每页显示的文章数量。


高效管理内容:实现文章列表分页

安企CMS提供了强大的模板标签功能,其中archiveList标签是用来获取文章(或其他内容模型)列表的核心。要实现分页,我们首先需要告诉archiveList标签,我们想要的是一个分页列表,而不是简单的固定数量列表。

这可以通过在archiveList标签中设置type="page"参数来实现。例如,在一个分类列表页面(通常对应模板目录中的{模型table}/list.html文件),您可以使用如下方式获取文章列表:

{% archiveList archives with type="page" %}
    {% for item in archives %}
        <div class="article-item">
            <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量:{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中,archives是我们定义的变量名,用于存储获取到的文章列表数据。type="page"参数告知系统,这个列表需要支持分页。for item in archives则遍历每一篇文章,并显示其标题、描述、发布日期和阅读量等信息。empty标签是一个非常实用的特性,当列表为空时,它会显示备用内容,避免页面空白。

精细控制:限制每页文章数量

type="page"启用分页功能后,我们还需要一个参数来控制每页显示的文章数量,这就是limit参数。limit参数允许您设置一个整数值,来精确定义每页呈现的文章条数。

例如,如果您希望每页显示10篇文章,可以在archiveList标签中添加limit="10"

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h4><a href="{{item.Link}}">{{item.Title}}</a></h4>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量:{{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>该分类下暂时没有文章。</p>
    {% endfor %}
{% endarchiveList %}

通过调整limit的值,您可以轻松地控制每页内容的密度,以适应不同的设计风格或用户阅读习惯。例如,博客文章列表可能希望每页多显示一些(如15-20篇),而产品展示列表可能需要更少的数量以突出每个产品的细节(如6-8个)。

导航与用户体验:实现分页控制

仅仅显示文章列表和限制数量还不够,用户还需要一个直观的分页导航来切换页面。安企CMS为此提供了专门的pagination标签。这个标签能够自动根据当前的URL和archiveList生成的分页信息,渲染出完整的“首页”、“上一页”、“下一页”、“尾页”以及中间的页码链接。

pagination标签通常与archiveList标签一起使用,并且需要定义一个变量名来接收分页数据,例如pages。其中一个常用参数是show,它可以控制中间页码区域最多显示多少个页码按钮。

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

<div class="pagination-container">
    {% pagination pages with show="5" %}
        <ul class="pagination-list">
            {# 首页链接 #}
            <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>
        <div class="pagination-info">
            总共 <b>{{pages.TotalItems}}</b> 篇文章,当前第 <b>{{pages.CurrentPage}}</b> 页 / 共 <b>{{pages.TotalPages}}</b> 页
        </div>
    {% endpagination %}
</div>

在上述代码中,pages变量包含了所有与分页相关的信息,例如pages.FirstPage.Link获取首页的链接,pages.CurrentPage表示当前页码。IsCurrent属性是一个非常方便的布尔值,当某个页码是当前页面时,它会返回true,这允许您通过CSS为其添加active类,从而高亮显示当前页码,提升用户体验。

综合实践:完整的文章列表分页代码

archiveListpagination标签结合起来,您就可以在安企CMS中实现一个功能完善且易于管理的文章列表分页。通常,这些代码会放置在您网站模板中的{模型table}/list.html文件内,例如article/list.html

以下是一个整合后的示例:

”`twig {# 假设这是文章分类列表页的模板文件,如:/template/default/article/list.html #}

{% extends ‘bash.html’ %} {# 继承基础布局文件 #}

{% block content %}

<h1 class="mb-4">
    {% categoryDetail with name="Title" %}
</h1>

<div class="article-list-wrapper">
    {% archiveList archives with type="page" limit="10" %} {# 获取分页文章列表,每页10篇 #}
        {% for item in archives %}
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="{{item.Link}}">{{item.Title}}</a>
                </h5>
                <p class="card-text">{{item.Description}}</p>
                <p class="card-text-sm text-muted">
                    <small>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</small>
                    <small class="ms-3">阅读量:{{item.Views}}</small>
                </p>
            </div>
        </div>
        {% empty %}
        <div class="alert alert-info" role="alert">
            该分类下暂时没有文章。
        </div>
        {% endfor %}
    {% endarchiveList %}
</div>

{# 分页导航区域 #}
<nav aria-label="Page navigation" class="mt-4">
    {% pagination pages with show="5" %} {# 显示5个页码按钮 #}
        <ul class="pagination justify-content-center">
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{pages.FirstPage.Link}}" aria-label="首页">首页</a>
            </li>
            {% if pages.PrevPage %}
            <li class="page-item">
                <a class="page-link" href="{{pages.PrevPage.Link}}" aria-label="上一页">上一页</a>
            </li>
            {% endif %}
            {% for item in pages.Pages %}
            <li class="page-item {% if item.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{item.Link}}">{{item.Name}}</a>
            </li>
            {% endfor %}
            {% if pages.NextPage %}
            <li class="page-item">
                <a class="page-link" href="{{pages.NextPage.Link}}" aria-label="下一页">下一页</a>
            </li>
            {% endif %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                <a class="page-link" href="{{pages.Last