如何在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 属性。

通过这些字段，您可以灵活地构建出各种样式的分页导航。

优化文档列表的显示效果

仅仅实现分页是第一步，要让文档列表真正吸引用户，还需要对其显示效果进行精细化优化。

  1. 利用item变量丰富内容展示 archiveList标签循环中的item变量为您提供了文档的诸多详细信息，远不止标题。您可以根据需求展示缩略图、发布时间、文档简介、阅读量、所属分类等。例如：

    • 标题与链接：item.Title 和 item.Link 是最基础的，确保点击标题能跳转到详情页。
    • 缩略图：item.Thumb 或 item.Logo 可用于展示列表项的图片，让列表更生动。
    • 文档简介：item.Description 提供了文章的简要概述。
    • 阅读量：item.Views 可用于显示文章的受欢迎程度。

  2. 发布时间格式化 AnQiCMS中的时间字段通常以时间戳形式存储。使用 stampToDate 标签可以将其转换为人类可读的日期和时间格式，例如： {{stampToDate(item.CreatedTime, "2006年01月02日 15:04")}}

  3. 内容截取以保持整洁 为了避免列表项内容过长，可以使用过滤器对文章描述进行截取。truncatechars（按字符截取）和 truncatewords（按单词截取）是非常实用的选择： {{item.Description|truncatechars:100}} 会将描述截取到100个字符，并在末尾添加“…”。

  4. 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>

实际操作建议与**实践

  1. 模板文件位置：根据您的模板组织模式，列表页模板文件通常位于 /template/{您的模板目录}/{模型表名}/list.html（文件夹组织模式）或 /template/{您的模板目录}/{模型表名}_list.html（扁平化组织模式）。例如，文章列表可能是 template/default/article/list.html。
  2. 动态获取分类ID：在实际的分类列表页中，categoryId 参数往往不需要手动指定具体ID，系统会自动根据URL路径判断当前分类。如果您希望获取所有分类的文档，可以将 categoryId 设置为 "0"。
  3. 伪静态规则：确保您的网站已正确配置伪静态规则（通过后台“功能管理”->“伪静态规则”），这样生成的分页URL才会是美观且有利于SEO的。
  4. 调试：在开发过程中，利用浏览器开发者工具检查生成的HTML结构和链接是否正确。如果数据未按预期显示，检查标签参数是否正确，特别是大小写敏感的参数名称。

总结

通过灵活运用AnQiCMS提供的archiveList和pagination这两个核心模板标签，并结合各种过滤器进行细节处理，您可以为网站的文档列表轻松实现高效的分页功能，并根据您的设计需求，将其展现得既美观又实用。这种高度可定制化的特性，正是AnQiCMS在内容管理方面所展现出的强大优势。

常见问题 (FAQ)

  1. 我的文档列表没有显示分页导航，是什么原因？
    • 最常见的原因是您在 `