安企CMS如何实现文章列表的分页功能和页码显示？
作为一位资深的网站运营专家，我深知一套强大且易用的内容管理系统对于网站成功的关键作用。安企CMS（AnQiCMS）凭借其基于Go语言的高性能架构和灵活的模板机制，在内容发布和管理方面提供了卓越的体验。其中，高效地展示大量内容，尤其是实现文章列表的分页功能，是提升用户体验和网站SEO表现不可或缺的一环。今天，我们就来深入探讨安企CMS如何巧妙地实现这一功能，并展示友好的页码导航。
安企CMS：文章列表分页与页码显示深度解析
在内容爆炸式增长的今天，一个网站如果仅将所有文章堆砌在一个页面上，不仅会造成页面加载缓慢，更会大大降低用户寻找信息的效率，甚至影响搜索引擎的抓取和收录。因此，将文章列表进行分页处理，并提供清晰的页码导航，成为了现代网站运营的标配。安企CMS充分考虑了这一需求，通过其直观的模板标签，让内容分页变得轻而易举。
一、 文章列表的分页魔法：archiveList 标签
安企CMS 的核心能力之一，便是其灵活高效的内容管理。当您的网站内容日益丰富，特别是文章数量达到一定规模时，如何优雅地展示这些内容，同时保证用户体验，就成了运营者需要考量的问题。分页功能应运而生，它能将海量内容划分成若干个页面，让用户可以逐页浏览，避免单页加载过重。
在 AnQiCMS 中，实现文章列表分页的核心在于 archiveList 标签。这个标签专门用于获取文档（即文章或产品）列表。要使其具备分页能力，您需要关注两个关键参数：
type="page"：这是启用分页功能的“开关”。当您将type参数设置为"page"时，archiveList标签就会以分页的形式返回文章数据，而不是一次性返回所有符合条件的文章。limit：这个参数决定了每页显示的文章数量。例如，limit="10"意味着每页将展示10篇文章。
通过 archiveList 标签，您可以根据多种条件筛选文章，例如按模型ID（moduleId）、分类ID（categoryId）、推荐属性（flag）等，再结合 type="page" 和 limit 参数，即可轻松获取到当前页所需展示的文章列表。
以下是一个 archiveList 标签配合 type="page" 使用的简化示例：
{% 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 变量将包含当前页的10篇文章数据，通过 for 循环即可遍历并展示每篇文章的标题、简介、分类、发布时间和浏览量等信息。当没有文章时，{% empty %} 标签内的内容会显示，提供友好的提示。
二、 驾驭页码：pagination 标签
光有文章内容列表还不够，用户还需要清晰的导航控件来跳转到不同的页面。这时，pagination 分页标签就派上用场了。它与 archiveList 标签紧密协作，根据 archiveList 生成的分页数据，智能地构建出页码导航链接。
pagination 标签非常简洁，主要通过一个 show 参数来控制页码显示的数量。例如，show="5" 表示最多显示5个连续的页码（如 “1 2 3 4 5” 或 “3 4 5 6 7”）。
pagination 标签内部会提供一个 pages 对象，这个对象内包含了丰富的分页信息，例如：
TotalItems：所有文章的总条数。TotalPages：总页码数。CurrentPage：当前所在的页码。FirstPage：首页的对象，包含Name(如 “首页”) 和Link(首页链接)。LastPage：末页的对象，包含Name(如 “末页”) 和Link(末页链接)。PrevPage：上一页的对象，包含Name(如 “上一页”) 和Link(上一页链接)。NextPage：下一页的对象，包含Name(如 “下一页”) 和Link(下一页链接)。Pages：一个包含中间页码（如 1, 2, 3…）的数组，每个元素也是一个对象，包含Name(页码数字),Link(页码链接),IsCurrent(是否当前页)。
利用这些信息，您可以构建出各种样式和布局的页码导航。
三、 将两者融会贯通：完整示例
现在，我们将 archiveList 和 pagination 这两个标签结合起来，展示一个完整且实用的文章列表分页代码结构。
<div class="article-list-section">
{# 第一步：使用 archiveList 标签获取当前页的文章列表 #}
{% archiveList articles with type="page" limit="10" %}
<ul class="article-items">
{% for item in articles %}
<li class="article-item">
<a href="{{item.Link}}" class="article-link">
{% if item.Thumb %}
<div class="article-thumb">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</div>
{% endif %}
<div class="article-info">
<h5 class="article-title">{{item.Title}}</h5>
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
<span class="category-name">分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span class="publish-date">发布: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span class="views-count">阅读: {{item.Views}}</span>
</div>
</div>
</a>
</li>
{% empty %}
<li class="no-articles-found">
很抱歉，当前分类或筛选条件下没有找到任何文章。
</li>
{% endfor %}
</ul>
{% endarchiveList %}
{# 第二步：使用 pagination 标签显示页码导航 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<ul class="pagination-list">
{# 首页链接 #}
<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>
<div class="pagination-summary">
共计 {{pages.TotalItems}} 篇文章，{{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
</div>
{% endpagination %}
</div>
</div>
代码解析：
- 文章列表获取：
{% archiveList articles with type="page" limit="10" %}会从数据库中获取当前页的10篇文章，并将它们赋值给articles变量。 - 文章遍历显示：
{% for item in articles %}循环遍历articles变量，显示每篇文章的标题、链接、缩略图