在管理网站内容时,尤其是当内容数量日益增多的时候,一个直观且高效的分页功能就显得尤为重要。它不仅能让访客更快地找到所需信息,提升浏览体验,还能避免单页加载过多内容导致的性能问题。在安企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(尾页)。每个页码元素(包括 FirstPage、PrevPage 等)都拥有 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 等类添加样式,以美化分页按钮 #}
通过上面这些简单的步骤,您就可以在安企