AnQiCMS如何实现文章列表的分页显示功能，以及如何自定义分页样式和逻辑？

在内容运营中，文章列表的分页显示是一个基础而关键的功能，它不仅影响用户浏览体验，更与网站的性能和SEO表现息息相关。AnQiCMS作为一个高效、可定制的内容管理系统，为我们提供了灵活的方式来实现和美化文章列表的分页功能。

AnQiCMS 中的文章列表分页：轻松掌握显示与个性化定制

在网站内容日益丰富的今天，如何高效地组织和展示大量文章，同时保证用户体验流畅，是每一个运营者都需要面对的挑战。文章列表的分页功能正是解决这一难题的关键。AnQiCMS作为一个基于Go语言开发的现代化CMS，以其简洁高效的架构，为我们提供了直观且强大的文章列表分页显示功能，并允许我们深度定制其样式和逻辑。

实现文章列表的基本分页显示

在AnQiCMS中，要实现文章列表的分页显示，核心在于使用其内置的模板标签。我们主要会用到两个标签：archiveList 用于获取文章数据，以及 pagination 用于生成分页导航。

首先，在您的模板文件（例如，文章列表页 archive/list.html 或分类列表页 category/list.html）中，您可以使用 archiveList 标签来检索需要分页的文章。这个标签非常灵活，您可以通过设置 type="page" 参数来告诉系统，您需要获取一个可分页的列表，同时利用 limit 参数来指定每页显示的文章数量。

例如，如果我们希望每页显示10篇文章，可以这样编写代码：

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <span class="date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span class="views">{{item.Views}} 阅读</span>
        </div>
    {% empty %}
        <p class="no-content">当前分类暂无任何文章。</p>
    {% endfor %}
{% endarchiveList %}

在上面的代码片段中，archiveList 标签会将当前页的文章数据存储到 archives 变量中，然后我们通过 for 循环遍历并展示每篇文章的标题、链接、简介、发布日期和阅读量。值得一提的是，{% empty %} 标签非常实用，它允许我们在文章列表为空时，优雅地显示一条提示信息，而不是留白。

构建分页导航条

仅仅展示文章列表是不足够的，我们还需要为用户提供直观的分页导航，让他们能够轻松地在不同页面之间切换。这时，pagination 标签就派上用场了。

pagination 标签通常紧随 archiveList 标签之后使用，它会自动获取当前列表的分页信息，并生成一系列分页链接。您可以通过 show 参数来控制在当前页码前后显示多少个页码链接，例如 show="5" 会在当前页码左右各显示2个页码，加上当前页共5个。

以下是一个标准的分页导航条的实现：

<div class="pagination-controls">
    {% pagination pages with show="5" %}
        <a href="{{pages.FirstPage.Link}}" class="page-link first-page {% if pages.FirstPage.IsCurrent %}active{% endif %}">首页</a>

        {% if pages.PrevPage %}
            <a href="{{pages.PrevPage.Link}}" class="page-link prev-page">上一页</a>
        {% endif %}

        {% for item in pages.Pages %}
            <a href="{{item.Link}}" class="page-link page-number {% if item.IsCurrent %}active{% endif %}">{{item.Name}}</a>
        {% endfor %}

        {% if pages.NextPage %}
            <a href="{{pages.NextPage.Link}}" class="page-link next-page">下一页</a>
        {% endif %}

        <a href="{{pages.LastPage.Link}}" class="page-link last-page {% if pages.LastPage.IsCurrent %}active{% endif %}">尾页</a>

        <span class="page-info">
            共 {{pages.TotalItems}} 条 / {{pages.TotalPages}} 页 / 当前第 {{pages.CurrentPage}} 页
        </span>
    {% endpagination %}
</div>

在这个示例中，pages 变量包含了所有分页相关的数据，例如 pages.FirstPage（首页信息）、pages.PrevPage（上一页信息）、pages.Pages（中间页码列表）、pages.NextPage（下一页信息）和 pages.LastPage（尾页信息）。每个页码对象（item）都包含 Link（链接地址）、Name（显示名称，即页码数字）和 IsCurrent（是否为当前页）等属性，这些都是我们进行样式和逻辑定制的重要依据。

您还可以直接显示总条数、总页码数和当前页码，如 {{pages.TotalItems}}、{{pages.TotalPages}}、{{pages.CurrentPage}}，这些数据能让用户更清晰地了解列表的整体情况。

自定义分页样式与逻辑

AnQiCMS 的模板引擎语法类似Django，这为我们提供了极大的灵活性来定制分页的显示和行为。

自定义分页样式： 分页导航的美观度直接影响用户体验。通过为分页链接添加自定义的CSS类，您可以轻松地实现各种风格的分页样式。例如，在上面的代码中，我们为不同的分页链接添加了 page-link、first-page、prev-page、page-number、next-page、last-page 等类。特别是 {% if item.IsCurrent %}active{% endif %} 这样的条件判断，可以让我们为当前页码添加 active 类，从而突出显示当前所在的页面，通过CSS即可轻松定义其背景色、字体颜色等。

自定义分页逻辑： AnQiCMS 的模板系统不仅限于简单的内容展示，它还支持 if 逻辑判断和 for 循环遍历，这意味着您可以在模板层面实现更复杂的逻辑。

• 条件显示： 您可以根据 pages.PrevPage 或 pages.NextPage 是否存在来决定“上一页”或“下一页”按钮是否显示，这在分页到第一页或最后一页时尤为重要，可以避免显示不可用的链接。
• 整合搜索与筛选： 当您的文章列表需要结合搜索功能时，archiveList 标签可以接受 q 参数来处理搜索关键词。例如，如果用户在搜索框中输入了关键词，页面URL中会包含 ?q=关键词。AnQiCMS 的分页系统会自动将这些URL参数带入到分页链接中，确保搜索结果也能正常分页。
• 同样，对于通过 archiveFilters 标签生成的复杂筛选条件，分页链接也会自动继承这些筛选参数，保证用户在筛选结果中也能顺畅地翻页。
• 灵活的URL结构： AnQiCMS支持伪静态规则管理。如果您对分页链接的URL结构有特殊要求，例如希望链接形式是 /list-p2.html 而不是默认的 /category/1?page=2，您可以在后台的“伪静态规则”中进行自定义配置。AnQiCMS 强大的伪静态功能能够将模板中生成的标准分页链接，自动适配到您定义的URL模式，提供更加SEO友好的链接结构。

通过这些灵活的配置和强大的模板标签，AnQiCMS让文章列表的分页显示变得简单而强大。无论是基础的内容展示，还是复杂的搜索筛选场景