如何使用AnqiCMS模板中的分页标签，实现文档列表的分页显示？

📅 👁️ 54

作为一位资深的安企CMS网站运营人员，我非常理解在构建和维护网站时，如何有效地展示内容是吸引并留住用户的关键。特别是对于文档列表这类可能包含大量信息的页面，合理的分页机制不仅能提升用户体验，还能优化网站性能。今天，我将详细阐述如何利用AnqiCMS模板中的分页标签，实现文档列表的分页显示。

理解AnqiCMS中的分页机制

在AnqiCMS中，实现文档列表的分页显示主要依赖于两个核心模板标签的协同工作：archiveList（或其他内容列表标签，如tagDataList、commentList等）和pagination。archiveList标签负责从数据库中获取指定条件下的文档数据，而pagination标签则负责生成用户界面上的分页导航，让用户能够浏览不同页码的文档。

要启用分页功能，首先要确保内容列表标签（例如archiveList）的type参数被设置为"page"。当type="page"时，archiveList标签将不会一次性加载所有匹配的文档，而是根据limit参数指定每页显示的文档数量，并为整个文档集合提供必要的分页信息。

`archiveList`标签与分页数据的获取

archiveList标签是获取文档列表数据的核心。当您希望对文档进行分页时，需要将其配置为分页模式。

{% archiveList archives with type="page" limit="10" %}
    {# 此处循环显示当前页的文档 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <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 是一个变量名，用于存储从archiveList获取到的当前页文档数组。
type="page" 明确告知系统以分页模式获取文档。
limit="10" 设置了每页显示10篇文档。您可以根据实际需求调整此数值。

archiveList标签还支持其他参数，如moduleId（模型ID）、categoryId（分类ID）、order（排序方式）等，您可以根据需要进行组合，以精确控制要展示的文档范围和顺序。

`pagination`标签实现分页导航的显示

在archiveList标签的type="page"模式下，系统会自动计算出所有分页所需的信息。这些信息可以通过pagination标签获取并渲染为用户可见的分页导航。

pagination标签的典型使用方式如下：

<div class="pagination">
    {% pagination pages with show="5" %}
    <ul>
        <li>总数：{{pages.TotalItems}}条，总共：{{pages.TotalPages}}页，当前第{{pages.CurrentPage}}页</li>
        <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
        {% if pages.PrevPage %}
            <li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</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}}">{{pages.NextPage.Name}}</a></li>
        {% endif %}
        <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
    </ul>
    {% endpagination %}
</div>

在这里：

pages 是一个变量名，它包含了所有分页所需的数据和链接。
show="5" 参数指示分页导航最多显示5个页码链接（不包括首页、尾页、上一页、下一页按钮）。这有助于保持分页导航的简洁性，尤其是在页面数量很多时。
pages变量中包含了多个子对象和属性，用于构建完整的导航：
- TotalItems：总文档数量。
- TotalPages：总页码数。
- CurrentPage：当前所在页码。
- FirstPage：首页的链接信息（Name为“首页”，Link为链接地址，IsCurrent判断是否当前页）。
- LastPage：尾页的链接信息。
- PrevPage：上一页的链接信息。如果不存在上一页，此对象可能为空。
- NextPage：下一页的链接信息。如果不存在下一页，此对象可能为空。
- Pages：一个包含中间页码链接信息的数组，每个元素包含Name（页码数字）、Link（链接地址）、IsCurrent。

通过这些字段，您可以灵活地构建出符合您网站设计风格的分页导航。请务必根据IsCurrent属性为当前页添加active类，以提供清晰的用户反馈。

整合示例：完整的文档列表分页模板结构

为了让文档列表和分页导航同时生效并显示，它们通常会被放置在同一个模板文件内，例如分类列表页（{模型table}/list.html）或搜索结果页（search/index.html）。

以下是一个结合archiveList和pagination的完整模板示例：

{# 假设这是某个分类的列表页模板 #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true %}</title>
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    <style>
        .pagination ul { list-style: none; padding: 0; display: flex; justify-content: center; margin-top: 20px; }
        .pagination li { margin: 0 5px; }
        .pagination li a { display: block; padding: 8px 12px; border: 1px solid #ddd; text-decoration: none; color: #333; }
        .pagination li.active a { background-color: #007bff; color: white; border-color: #007bff; }
        .document-list { list-style: none; padding: 0; }
        .document-list li { border-bottom: 1px solid #eee; padding: 15px 0; display: flex; align-items: center; }
        .document-list li img { width: 100px; height: 75px; margin-right: 15px; object-fit: cover; }
        .document-list li .info h5 { margin: 0 0 5px 0; font-size: 1.2em; }
        .document-list li .info div { font-size: 0.9em; color: #666; }
    </style>
</head>
<body>
    <h1>{% categoryDetail with name="Title" %}</h1>
    <p>{% categoryDetail with name="Description" %}</p>

    <ul class="document-list">
    {% archiveList archives with type="page" categoryId="当前分类ID或从URL获取" limit="10" %} {# 替换 categoryId 为实际值 #}
        {% for item in archives %}
        <li>
            {% if item.Thumb %}
            <a href="{{item.Link}}">
                <img alt="{{item.Title}}" src="{{item.Thumb}}">
            </a>
            {% endif %}
            <div class="info">
                <a href="{{item.Link}}">
                    <h5>{{item.Title}}</h5>
                    <div>
                        <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span> |
                        <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span> |
                        <span>阅读量：{{item.Views}}</span>
                    </div>
                    <p>{{item.Description}}</p>
                </a>
            </div>
        </li>
        {% empty %}
        <li>
            抱歉，当前分类下没有任何文档。
        </li>
        {% endfor %}
    {% endarchiveList %}
    </ul>

    {# 分页导航区域 #}
    <div class="pagination">
        {% pagination pages with show="5" %}
        <ul>
            <li class="page-info">共 {{pages.TotalItems}} 篇，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页</li>
            <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a></li>
            {% if pages.PrevPage %}
                <li class="page-item"><a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</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}}">{{pages.NextPage.Name}}</a></li>
            {% endif %}
            <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a></li>
        </ul>
        {% endpagination %}
    </div>

</body>
</html>

这段示例代码展示了如何在同一个页面中同时获取文档列表和分页导航，并通过简单的内联样式让其在视觉上有所区分。实际应用中，您会将其整合到更复杂的网站布局中，并使用外部CSS文件进行样式控制。

常见问题 (FAQ)

为什么我的分页导航没有显示，或者显示不正确？

最常见的原因是您在调用archiveList（或tagDataList、commentList等）标签时，没有将type参数设置为"page"。如果设置为"list"，标签只会返回指定limit数量的文档，而不会提供分页所需的数据。请检查您的archiveList调用，确保它是{% archiveList archives with type="page" ... %}。此外，如果查询结果总数小于limit设定的每页显示数量，可能也不会显示分页导航，因为无需分页。

如何修改每页显示的文章数量？

您可以通过调整archiveList标签中的limit参数来控制每页显示的文档数量。例如，如果您希望每页显示20篇文章，可以将limit="10"修改为limit="20"。

我可以自定义分页链接的URL结构吗？

AnqiCMS默认会根据您在后台设置的伪静态规则自动生成分页链接。通常情况下，您无需手动修改分页链接的URL结构。但是，如果您有特殊需求，pagination标签提供了一个prefix参数，允许您定义自定义的URL模式。例如，prefix="?p={page}"可以将页码参数命名为p。不过，这通常是一个高级功能，建议在对AnqiCMS的路由和伪静态机制有深入理解后再尝试修改。

如何使用AnqiCMS模板中的分页标签，实现文档列表的分页显示？

理解AnqiCMS中的分页机制

`archiveList`标签与分页数据的获取

`pagination`标签实现分页导航的显示

整合示例：完整的文档列表分页模板结构

常见问题 (FAQ)

相关文章

安企CMS的评论管理功能，是否支持点赞和回复操作？

如何在安企CMS模板中获取并循环输出友情链接？

安企CMS模板中如何获取和显示网站名称、Logo、备案号等系统信息？

安企CMS如何实现在一台服务器上安装和管理多个站点？

AnqiCMS的`if`、`for`等逻辑判断和循环标签，在模板开发中如何灵活运用？

AnqiCMS的过滤器（如`safe`、`truncatechars`），如何实现字符串处理和内容安全输出？

安企CMS如何启用内置的Markdown编辑器？

在哪里可以找到安企CMS的Markdown编辑器设置选项？

如何使用AnqiCMS模板中的分页标签，实现文档列表的分页显示？

理解AnqiCMS中的分页机制

archiveList标签与分页数据的获取

pagination标签实现分页导航的显示

整合示例：完整的文档列表分页模板结构

常见问题 (FAQ)

相关文章

安企CMS的评论管理功能，是否支持点赞和回复操作？

如何在安企CMS模板中获取并循环输出友情链接？

安企CMS模板中如何获取和显示网站名称、Logo、备案号等系统信息？

安企CMS如何实现在一台服务器上安装和管理多个站点？

AnqiCMS的`if`、`for`等逻辑判断和循环标签，在模板开发中如何灵活运用？

AnqiCMS的过滤器（如`safe`、`truncatechars`），如何实现字符串处理和内容安全输出？

安企CMS如何启用内置的Markdown编辑器？

在哪里可以找到安企CMS的Markdown编辑器设置选项？

`archiveList`标签与分页数据的获取

`pagination`标签实现分页导航的显示