管理网站内容,尤其是当内容量日渐庞大时,如何让访客既能快速找到所需信息,又能保持页面加载流畅,是一个重要的课题。安企CMS(AnQiCMS)在设计之初就充分考虑了这一点,它提供了一套直观而强大的分页功能,让您的文章列表、产品列表乃至Tag列表都能实现优雅的分页显示。
我们都知道,当一个分类下的文章或产品数量很多时,将它们全部显示在一个页面上不仅会拖慢加载速度,还会让用户在海量信息中感到迷茫。分页功能恰好能解决这个问题,它将大量内容拆分成若干个小页面,每个页面只展示一部分内容,从而优化用户体验和网站性能。
第一步:准备内容列表并启用分页模式
在安企CMS中,要实现文章、产品或其他任何基于内容模型的列表分页,首先需要使用相应的列表标签来获取数据。以文章列表为例,我们通常会用到 archiveList 标签。这个标签的功能是获取指定分类或特定条件下的文档列表数据。
关键在于,您需要明确告诉系统这个列表是需要分页的。这通过在 archiveList 标签中设置 type="page" 参数来实现。同时,您可以通过 limit 参数来控制每页显示多少条内容。
例如,如果您想在一个页面上显示最新发布的10篇文章,并启用分页功能,您的模板代码可能会是这样:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<span>发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
</a>
</li>
{% empty %}
<li>
当前没有任何文章内容。
</li>
{% endfor %}
{% endarchiveList %}
在这段代码中,archives 是我们定义的一个变量,它将承载从 archiveList 标签获取到的当前页的文章数据。type="page" 声明了列表需要分页,而 limit="10" 则限定了每页展示10篇文章。当没有内容时,{% empty %} 部分会友好地提示访客。
第二步:引入分页导航标签
仅仅获取了分页数据还不足以提供完整的用户体验,访客还需要一个分页导航来切换不同的页面。这时,安企CMS内置的 pagination 标签就派上用场了。这个标签专门用于渲染分页导航的链接和状态。
pagination 标签通常会与 archiveList 等列表标签配合使用,它会自动识别当前列表的分页信息,并生成相应的导航链接。您可以通过 show 参数来控制在分页导航中显示多少个页码按钮,例如 show="5" 表示最多显示5个连续的页码。
一个完整的分页导航通常会包含首页、上一页、具体页码、下一页和末页等元素,以提供全面的导航能力。下面是一个将列表内容和分页导航结合在一起的示例:
<div>
{# 文章列表内容区域 #}
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h2>{{item.Title}}</h2>
<p>{{item.Description}}</p>
<div class="meta">
<span>分类:{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布时间:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量:{{item.Views}}</span>
</div>
</a>
{% if item.Thumb %}
<a href="{{item.Link}}">
<img src="{{item.Thumb}}" alt="{{item.Title}}">
</a>
{% endif %}
</div>
{% empty %}
<p>当前分类下暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
{# 分页导航区域 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
{# 首页链接 #}
<a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
{# 上一页链接 #}
{% if pages.PrevPage %}
<a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
{% endif %}
{# 中间页码链接 #}
{% for item in pages.Pages %}
<a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<a class="page-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
{% endif %}
{# 末页链接 #}
<a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
<span class="page-info">
总计 {{pages.TotalItems}} 条,共 {{pages.TotalPages}} 页,当前第 {{pages.CurrentPage}} 页
</span>
{% endpagination %}
</div>
</div>
这段代码首先展示了列表内容,接着紧随其后的是分页导航。pages 变量包含了分页所需的所有信息,包括当前页码、总页数、总条目数,以及首页、末页、上一页、下一页和中间页码的链接与当前状态。通过遍历 pages.Pages,您可以灵活地渲染出页码按钮。item.IsCurrent 布尔值能帮助您轻松判断并高亮显示当前所在的页码。
其他列表类型的分页应用
安企CMS的这种分页机制具有高度的通用性。这意味着,无论是产品列表、Tag列表,还是评论列表,您都可以采用完全相同的逻辑来实现分页。
- 产品列表分页: 如果您希望对产品列表进行分页,只需要将
archiveList标签中的moduleId参数设置为产品模型对应的ID(假设产品模型的ID为2),其他分页参数和逻辑保持不变。 - Tag列表分页: 对于特定Tag下的文档列表,您可以使用
tagDataList标签,同样设置type="page"和limit参数,并配合pagination标签来展示分页导航。 - 评论列表分页: 评论列表则使用
commentList标签,配合archiveId(评论所属的文章/产品ID)以及type="page"和limit参数来实现分页。
核心思想是,只要是支持 type="page" 参数的列表标签,都可以与 pagination 标签完美配合。
高级应用:搜索结果的分页
当您的网站提供了搜索功能,并且搜索结果数量庞大时,分页同样是不可或缺的。安企CMS的搜索结果分页功能非常智能和便捷。
在搜索页面(通常默认路径是 /search),archiveList 标签可以自动读取URL查询参数中的 q (搜索关键词),并根据这个关键词来筛选内容。您无需在 archiveList 标签中手动指定 q 参数,系统会替您完成。
一个简单的搜索表单示例如下:
<form method="get" action="/search">
<div class="search-box">
<input type="text" name="q" placeholder="请输入搜索关键词" value="{{urlParams.q}}">
<button type="submit">搜索</button>
</div>
</form>
提交表单后,用户会被带到 /search?q=您的关键词 这样的URL。在 /search 模板中,您就可以像上面文章列表那样,使用 archiveList 配合 pagination 来展示分页的搜索结果。
**实践与注意事项
- URL 伪静态优化: 为了提升SEO效果和用户体验,建议为分页URL配置伪静态规则。安企CMS的伪静态管理功能支持在规则中包含
{page}变量,例如/{module}-{id}.html或 `/{catname}-{page