如何在AnQiCMS中为文档列表添加分页功能并优化显示效果？
在网站运营中，如何高效地展示大量内容，同时保证用户体验的流畅性，是一个不容忽视的课题。文档列表的分页功能就是解决这一问题的关键。安企CMS（AnQiCMS）作为一个高效、灵活的内容管理系统，提供了直观且强大的模板标签，让您可以轻松地为文档列表添加分页功能，并在此基础上进行显示优化，让您的网站内容更具吸引力。
安企CMS分页功能的核心：archiveList与pagination标签的协同
在安企CMS中，为文档列表实现分页效果主要依赖两个核心模板标签：archiveList（文档列表标签）和 pagination（分页标签）。它们共同协作，archiveList负责获取按页组织的文档数据，而pagination则根据这些数据生成可点击的页码导航。
第一步：准备分页文档列表
首先，您需要在模板中通过 archiveList 标签来获取文档数据。这个标签功能强大，可以根据多种条件筛选和排序文档。要启用分页功能，最关键的是将 type 参数设置为 "page"。
例如，如果您想展示某个分类下的文章列表，并希望它以每页10条的形式分页显示，您可以这样编写：
{% archiveList archives with type="page" moduleId="1" categoryId="1" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
<h5>{{item.Title}}</h5>
<p>{{item.Description}}</p>
<div>
<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 alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</li>
{% empty %}
<li>
当前分类下暂无文档。
</li>
{% endfor %}
{% endarchiveList %}
在上面的代码中：
archives是您为获取到的文档列表数据定义的变量名。type="page"明确告知系统，此列表需要分页处理。moduleId="1"表示获取文章模型（通常文章模型的ID为1）的文档。categoryId="1"用于指定要显示哪个分类下的文档。如果您希望根据当前访问页面的分类自动获取，可以省略此参数，或将其值设置为当前页面分类的ID。limit="10"则设定了每页显示10条文档。
当 type 设置为 "page" 后，archiveList 标签除了返回文档列表数据（在 archives 变量中），还会将分页相关的信息传递给系统，供后续的 pagination 标签使用。
第二步：添加分页导航
有了按页组织的文档数据后，接下来就是利用 pagination 标签来生成页码导航了。这个标签通常紧跟在 archiveList 标签的下方，因为它需要依赖 archiveList 生成的分页上下文信息。
pagination 标签会根据当前页、总页数等信息，自动生成“首页”、“上一页”、“下一页”以及中间的页码链接。
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul>
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
{% if pages.PrevPage %}
<li class="page-item"><a href="{{pages.PrevPage.Link}}">上一页</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}}">下一页</a></li>
{% endif %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
</ul>
<p>总共 {{pages.TotalItems}} 条文档，分为 {{pages.TotalPages}} 页，当前是第 {{pages.CurrentPage}} 页。</p>
{% endpagination %}
</div>
在这个示例中：
pages是您为分页信息定义的变量名。show="5"控制了中间页码链接最多显示5个。您可以根据设计需求调整这个数字。pages变量包含了丰富的分页数据，例如：pages.TotalItems：总文档数量。pages.TotalPages：总页数。pages.CurrentPage：当前页码。pages.FirstPage、pages.PrevPage、pages.NextPage、pages.LastPage：分别代表首页、上一页、下一页、尾页的对象，它们各自包含Link（链接地址）和IsCurrent（是否为当前页）等属性。pages.Pages：一个数组，包含了中间显示的页码对象，每个对象也有Link和IsCurrent属性。
通过这些字段，您可以灵活地构建出各种样式的分页导航。
优化文档列表的显示效果
仅仅实现分页是第一步，要让文档列表真正吸引用户，还需要对其显示效果进行精细化优化。
利用
item变量丰富内容展示archiveList标签循环中的item变量为您提供了文档的诸多详细信息，远不止标题。您可以根据需求展示缩略图、发布时间、文档简介、阅读量、所属分类等。例如：- 标题与链接：
item.Title和item.Link是最基础的，确保点击标题能跳转到详情页。 - 缩略图：
item.Thumb或item.Logo可用于展示列表项的图片，让列表更生动。 - 文档简介：
item.Description提供了文章的简要概述。 - 阅读量：
item.Views可用于显示文章的受欢迎程度。
- 标题与链接：
发布时间格式化 AnQiCMS中的时间字段通常以时间戳形式存储。使用
stampToDate标签可以将其转换为人类可读的日期和时间格式，例如：{{stampToDate(item.CreatedTime, "2006年01月02日 15:04")}}内容截取以保持整洁 为了避免列表项内容过长，可以使用过滤器对文章描述进行截取。
truncatechars（按字符截取）和truncatewords（按单词截取）是非常实用的选择：{{item.Description|truncatechars:100}}会将描述截取到100个字符，并在末尾添加“…”。CSS样式美化 HTML结构搭建完成后，通过CSS赋予列表和分页美观的样式至关重要。您可以为列表项、分页链接、当前页码等添加不同的样式，以提升视觉效果和用户交互体验。例如，为当前页码的
<li>元素添加active类，然后编写相应的CSS规则突出显示它。
综合优化示例：
<div class="document-list">
{% archiveList archives with type="page" moduleId="1" limit="10" %}
{% for item in archives %}
<div class="list-item">
{% if item.Thumb %}
<a href="{{item.Link}}" class="item-thumb">
<img src="{{item.Thumb}}" alt="{{item.Title}}">
</a>
{% endif %}
<div class="item-content">
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p class="item-description">{{item.Description|truncatechars:150}}</p>
<div class="item-meta">
<span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</div>
</div>
{% empty %}
<p>抱歉，目前没有找到符合条件的文档。</p>
{% endfor %}
{% endarchiveList %}
</div>
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul class="pagination-list">
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{pages.NextPage.Link}}">下一页</a></li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
</ul>
<p class="pagination-info">总计 {{pages.TotalItems}} 篇文章，当前显示第 {{pages.CurrentPage}} 页 / 共 {{pages.TotalPages}} 页。</p>
{% endpagination %}
</div>
实际操作建议与**实践
- 模板文件位置：根据您的模板组织模式，列表页模板文件通常位于
/template/{您的模板目录}/{模型表名}/list.html（文件夹组织模式）或/template/{您的模板目录}/{模型表名}_list.html（扁平化组织模式）。例如，文章列表可能是template/default/article/list.html。 - 动态获取分类ID：在实际的分类列表页中，
categoryId参数往往不需要手动指定具体ID，系统会自动根据URL路径判断当前分类。如果您希望获取所有分类的文档，可以将categoryId设置为"0"。 - 伪静态规则：确保您的网站已正确配置伪静态规则（通过后台“功能管理”->“伪静态规则”），这样生成的分页URL才会是美观且有利于SEO的。
- 调试：在开发过程中，利用浏览器开发者工具检查生成的HTML结构和链接是否正确。如果数据未按预期显示，检查标签参数是否正确，特别是大小写敏感的参数名称。
总结
通过灵活运用AnQiCMS提供的archiveList和pagination这两个核心模板标签，并结合各种过滤器进行细节处理，您可以为网站的文档列表轻松实现高效的分页功能，并根据您的设计需求，将其展现得既美观又实用。这种高度可定制化的特性，正是AnQiCMS在内容管理方面所展现出的强大优势。
常见问题 (FAQ)
- 我的文档列表没有显示分页导航，是什么原因？
- 最常见的原因是您在 `