在构建网站列表页时,良好的分页体验是提升用户满意度和网站性能的关键。安企CMS深知这一点,并提供了直观且功能强大的标签来帮助我们轻松实现列表页的分页功能,同时灵活控制页码的显示数量。

核心功能解析:列表数据与分页导航

安企CMS实现列表分页主要依赖于两个核心标签的配合使用:archiveListpaginationarchiveList 负责从数据库中获取需要展示的内容列表,而 pagination 则负责根据 archiveList 提供的数据生成并展示分页导航。

1. 获取列表数据:archiveList 标签

首先,我们需要利用安企CMS强大的 archiveList 标签来获取您希望展示的内容列表。关键在于,您需要为这个标签设置 type="page" 参数,这会告诉系统您需要分页的数据,而不是一次性加载所有内容。同时,limit 参数用于指定每页显示多少条内容,例如 limit="10" 表示每页展示10条内容。

一个基本的列表获取代码示例如下:

{% archiveList archives with type="page" limit="10" categoryId="1" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <p>{{item.Description}}</p>
        </a>
    </li>
    {% empty %}
    <li>
        目前该分类下没有内容。
    </li>
    {% endfor %}
{% endarchiveList %}

在上面的例子中,archives 是我们自定义的变量名,它将包含当前页的文章列表。categoryId="1" 限制了只获取ID为1的分类下的文章,您可以根据实际需求调整 categoryIdmoduleId 等参数。{% for item in archives %} 循环会遍历当前页的所有文章,并展示它们的标题和描述。{% empty %} 部分则会在列表为空时显示提示信息。

2. 实现分页导航:pagination 标签

archiveList 标签的 type 设置为 "page" 后,安企CMS会在后台自动处理分页逻辑,并生成一个 pages 对象,这个对象包含了所有与分页相关的信息,例如总页数、当前页、首页、尾页、上一页、下一页以及中间的页码列表。pagination 标签就是用来消费这个 pages 对象的。

pagination 标签最关键的参数是 show,它控制在分页导航条中显示多少个页码。例如,show="5" 将会在当前页码前后显示总共5个页码链接(如果页码足够的话)。

以下是分页导航的代码示例:

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        <li>总数:{{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 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>
    {% endpagination %}
</div>

在这个例子中,pages 是由 pagination 标签提供的一个对象。我们可以通过 pages.TotalItems 获取总条目数,pages.TotalPages 获取总页数,pages.CurrentPage 获取当前页码。pages.FirstPagepages.PrevPagepages.NextPagepages.LastPage 则分别代表首页、上一页、下一页和尾页的链接信息,包括 Link(链接地址)、Name(显示名称)和 IsCurrent(是否为当前页)。

最核心的部分是 {% for item in pages.Pages %} 循环,它遍历了 show 参数指定的中间页码列表,从而动态生成了页码链接。每个 item 都包含 LinkNameIsCurrent 属性,方便我们构建带有样式判断的页码导航。

实战演练:整合代码实现分页

通常,您会将上述两部分代码放置在您希望展示分页列表的模板文件(例如 template/{模型table}/list.htmltemplate/{您的自定义模板名}.html)中。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" %}</title>
    <style>
        .pagination { margin-top: 20px; text-align: center; }
        .pagination ul { list-style: none; padding: 0; display: inline-block; }
        .pagination li { display: inline-block; margin: 0 5px; }
        .pagination li a { text-decoration: none; padding: 8px 12px; border: 1px solid #ddd; color: #333; }
        .pagination li.active a { background-color: #007bff; color: white; border-color: #007bff; }
        .pagination li a:hover:not(.active) { background-color: #eee; }
    </style>
</head>
<body>
    <div class="container">
        <h1>文章列表</h1>
        <ul>
            {% archiveList archives with type="page" limit="10" categoryId="1" %}
                {% for item in archives %}
                <li>
                    <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
                    <p>{{item.Description}}</p>
                    <small>发布时间:{{stampToDate(item.CreatedTime, "2006-01-02")}} | 浏览量:{{item.Views}}</small>
                </li>
                {% empty %}
                <li>
                    目前该分类下没有内容。
                </li>
                {% endfor %}
            {% endarchiveList %}
        </ul>

        <div class="pagination">
            {% pagination pages with show="5" %}
            <ul>
                <li>总计 {{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 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>
            {% endpagination %}
        </div>
    </div>
</body>
</html>

在上面的示例中,我们获取了ID为1的分类下的文章,每页显示10篇,并在分页导航中显示5个页码链接。您可以根据自己的设计需求调整 limitshow 的数值,以达到**的视觉和用户体验效果。

控制分页页码显示数量的技巧

通过 pagination 标签的 show 参数,我们可以非常灵活地控制分页条的显示样式。

  • show="3": 只会在当前页码前后各显示一个页码(如果总页数允许)。这适用于页码数量非常多的情况,可以使导航更加简洁。
  • show="7": 会显示更多的页码链接,方便用户快速跳转到更远的页面。
  • 不设置 show 参数: 安企CMS会有一个默认的显示数量,通常是5个,但具体取决于系统配置。

此外,您还可以利用 pages 对象中的 `TotalItems