在管理网站内容时,尤其是当内容数量日益增多的时候,一个直观且高效的分页功能就显得尤为重要。它不仅能让访客更快地找到所需信息,提升浏览体验,还能避免单页加载过多内容导致的性能问题。在安企CMS中,实现内容列表的分页功能既灵活又直接,只需简单几步即可配置完成。

安企CMS采用Django模板引擎语法,让您可以通过清晰的标签来控制内容的展示逻辑。要为您的内容列表添加分页,我们主要会用到两个核心标签:用于获取内容列表的 archiveList(或其他类似的内容列表标签),以及专门用于生成分页导航的 pagination 标签。

准备您的内容列表标签

首先,我们需要在模板文件中确定哪个列表需要分页显示。以最常见的文章列表为例,您会用到 archiveList 标签来从数据库中检索内容。关键在于,您需要告诉 archiveList 这是一个需要分页的列表,并且指定每页显示多少条内容。

您可以通过将 type 参数设置为 "page",并利用 limit 参数来定义每页的内容数量。例如,如果您想每页展示10篇文章,可以这样设置:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <article>
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <time>{{stampToDate(item.CreatedTime, "2006-01-02")}}</time>
        </article>
    {% empty %}
        <p>抱歉,目前没有内容可以显示。</p>
    {% endfor %}
{% endarchiveList %}

在这段代码中,archiveList 标签将内容列表数据存储在 archives 变量中,供 for 循环遍历显示。而 type="page" 的设置,会同时生成一个名为 pages 的分页对象,这个对象就是我们接下来实现分页导航的关键。

引入分页标签

有了内容列表的数据和分页对象,接下来就可以在页面底部或合适的位置添加分页导航了。您需要使用 pagination 标签,并将 archiveList 生成的 pages 对象传递给它。

pagination 标签非常智能,它会自动根据当前的页码、总页数以及内容列表标签的URL结构来生成正确的翻页链接。您可以利用 show 参数来控制在分页导航中显示多少个页码按钮,例如 show="5" 会显示当前页附近的5个页码。

pages 对象包含了一系列有用的属性,比如 FirstPage(首页)、PrevPage(上一页)、Pages(中间页码列表)、NextPage(下一页)和 LastPage(尾页)。每个页码元素(包括 FirstPagePrevPage 等)都拥有 Name(显示文本)、Link(链接地址)和 IsCurrent(是否为当前页)等属性,方便您进行灵活的样式控制。

以下是一个基本的分页导航示例:

<nav class="pagination-nav">
    {% pagination pages with show="5" %}
        {# 首页按钮,当处于首页时会应用active样式 #}
        <a href="{{pages.FirstPage.Link}}" class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>

        {# 上一页按钮,只有当存在上一页时才显示 #}
        {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}" class="page-link">上一页</a>
        {% endif %}

        {# 中间页码列表,遍历显示每个页码 #}
        {% for item in pages.Pages %}
            <a href="{{item.Link}}" class="page-link {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
        {% endfor %}

        {# 下一页按钮,只有当存在下一页时才显示 #}
        {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}" class="page-link">下一页</a>
        {% endif %}

        {# 尾页按钮,当处于尾页时会应用active样式 #}
        <a href="{{pages.LastPage.Link}}" class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>
        
        {# 您还可以显示总条数、总页数和当前页码 #}
        <span class="page-info">共 {{pages.TotalItems}} 条,{{pages.CurrentPage}}/{{pages.TotalPages}} 页</span>
    {% endpagination %}
</nav>

整合代码片段

将上述两个部分的标签放在同一个模板文件中,就可以实现一个完整的分页内容列表了。通常,内容列表(archiveList 循环的部分)会放在页面的主体区域,而分页导航(pagination 部分)则会放置在内容列表的下方。

例如,一个典型的 list.html 模板文件结构可能是这样的:

{# 假设这是您的文章列表页面模板 #}
{% extends 'base.html' %} {# 继承基础模板 #}

{% block content %}
    <div class="articles-list">
        {# 内容列表区域 #}
        {% archiveList archives with type="page" limit="10" %}
            {% for item in archives %}
                <article class="article-item">
                    <h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
                    <p class="article-description">{{item.Description}}</p>
                    <div class="article-meta">
                        <span>发布时间:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                        <span>浏览量:{{item.Views}}</span>
                    </div>
                </article>
            {% empty %}
                <p class="no-content">抱歉,目前没有内容可以显示。</p>
            {% endfor %}
        {% endarchiveList %}
    </div>

    {# 分页导航区域 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <nav class="pagination-nav">
                <a href="{{pages.FirstPage.Link}}" class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>
                {% if pages.PrevPage %}
                    <a href="{{pages.PrevPage.Link}}" class="page-link">上一页</a>
                {% endif %}
                {% for item in pages.Pages %}
                    <a href="{{item.Link}}" class="page-link {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
                {% endfor %}
                {% if pages.NextPage %}
                    <a href="{{pages.NextPage.Link}}" class="page-link">下一页</a>
                {% endif %}
                <a href="{{pages.LastPage.Link}}" class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>
            </nav>
            <div class="page-summary">
                当前第 {{pages.CurrentPage}} 页,共 {{pages.TotalPages}} 页,总计 {{pages.TotalItems}} 条内容。
            </div>
        {% endpagination %}
    </div>
{% endblock %}

{# 您还需要在样式文件中为 .pagination-nav 和 .page-link, .active 等类添加样式,以美化分页按钮 #}

通过上面这些简单的步骤,您就可以在安企