在网站内容运营中，尤其当文章、产品等列表内容日益丰富时，如何高效地展示这些信息，同时确保用户体验和网站性能，是一个需要细致考虑的问题。长篇幅的列表页面不仅加载缓慢，也容易让访问者感到疲惫。此时，合理地引入分页显示功能就显得尤为重要。
AnQiCMS 作为一款功能强大的内容管理系统，充分考虑了这一运营需求。它提供了直观且灵活的模板标签，帮助我们轻松实现文章列表的分页展示，让网站内容既清晰有序，又兼顾了访问速度和用户浏览的便捷性。
开启文章列表的分页模式
要在 AnQiCMS 中实现文章列表的分页显示，我们主要会用到两个核心模板标签：archiveList 和 pagination。首先，我们需要通过 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 %}
在这段代码中，archiveList archives with type="page" limit="10" 是关键。
archives是我们自定义的一个变量名，它将承载当前页的文章数据。你可以根据需要为这个变量命名。type="page"明确告诉 AnQiCMS，这是一个需要分页的列表。只有设置了type="page"，pagination标签才能正确地识别并生成分页信息。limit="10"则设定了每页显示的文章数量，这里是每页显示 10 篇文章。你可以根据网站设计和内容密度调整这个数值。
通过 {% for item in archives %} 循环，我们就能逐一展示当前页的每篇文章，包括文章标题、描述、分类、发布时间、浏览量等信息。如果当前列表没有文章，{% empty %} 块的内容将会被显示。
精心打造分页导航
仅仅显示文章列表是不够的，用户还需要一个清晰明了的分页导航来浏览不同页面的内容。这时，pagination 标签就派上了用场。它能够根据 archiveList 标签获取到的分页数据，自动生成“首页”、“上一页”、“下一页”以及具体的页码链接。
pagination 标签通常紧随 archiveList 标签之后，用以展示分页导航，它的用法示例如下：
{# 分页代码 #}
<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>
让我们来详细解读 pagination 标签的各个部分：
pages同样是一个自定义的变量名，它包含了所有与分页相关的信息，例如总文章数 (TotalItems)、总页数 (TotalPages)、当前页码 (CurrentPage) 等。show="5"参数控制了中间页码区域最多显示多少个页码。在这个例子中，它将显示当前页前后最多 5 个页码链接。- 在
{% pagination pages with show="5" %}和{% endpagination %}之间，我们可以灵活地组织分页导航的 HTML 结构。 pages.FirstPage、pages.LastPage、pages.PrevPage、pages.NextPage分别代表了首页、末页、上一页、下一页的对象，它们都包含了Name（显示名称）和Link（链接地址）。pages.Pages是一个数组，包含了中间部分的页码对象。我们可以通过{% for item in pages.Pages %}循环遍历这些页码，并使用item.Name和item.Link来生成页码链接。{% if pages.FirstPage.IsCurrent %}active{% endif %}这样的条件判断能够帮助我们为当前所在的页码添加特定的 CSS 样式，提升用户体验。
综合应用示例
将 archiveList 和 pagination 标签组合起来，一个完整且功能完善的文章列表分页页面就构建完成了。例如，一个文章列表页面 article/list.html 的核心代码可能像这样：
{# 列表页面顶部可能包含面包屑、分类信息等 #}
<div class="article-list-container">
<ul>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li class="article-item">
<a href="{{item.Link}}">
<h3>{{item.Title}}</h3>
<p>{{item.Description}}</p>
<div class="meta">
<span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量: {{item.Views}}</span>
</div>
</a>
</li>
{% empty %}
<li class="no-content">
当前分类下还没有文章哦。
</li>
{% endfor %}
{% endarchiveList %}
</ul>
{# 分页导航区域 #}
<div class="pagination-nav">
{% pagination pages with show="5" %}
<div class="summary">
共 {{pages.TotalItems}} 篇文章，分 {{pages.TotalPages}} 页，当前第 {{pages.CurrentPage}} 页
</div>
<ul class="page-numbers">
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{% if pages.PrevPage %}
<li>
<a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
</li>
{% endif %}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}current{% endif %}">
<a href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li>
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
{% endpagination %}
</div>
</div>
温馨提示与实践建议：
- 样式自定义： 上述代码仅提供了 HTML 结构，你可以根据网站的整体风格，为
.pagination-nav、.page-numbers、.current等类名添加自定义的 CSS 样式，使其美观且易用。 - 合理设置
limit值：limit参数决定了每页显示的文章数量。过少会导致频繁翻页，过多则可能影响页面加载速度和用户浏览效率。建议根据内容类型和用户习惯进行调整。 - SEO 友好性： AnQiCMS 在分页链接的生成上已经考虑了 SEO 因素，配合其内置的伪静态功能，可以确保分页页面能够被搜索引擎正确抓取和索引。
通过以上步骤，你就可以在 AnQiCMS 中轻松实现文章列表的分页显示功能，为网站访问者提供更加流畅和高效的浏览体验。
常见问题解答 (FAQ)
Q1: 我的分页页码显示不正确或点击无法跳转怎么办？
A1: 首先，请检查 archiveList 标签中 type 参数是否设置为 "page"。如果不是，pagination 标签将无法获取到正确的分页数据。其次，确认你的模板文件中，分页导航的 HTML 结构是否正确引用了 pages 变量及其子属性（例如 pages.FirstPage.Link 等）。最后，如果网站使用了伪静态，请确保伪静态规则配置无误，能够正确解析分页 URL。通常情况下，AnQiCMS 默认的伪静态规则能够很好地支持分页。
Q2: 如何调整每页显示的文章数量？
A2: 每页显示的文章数量由 archiveList 标签的 limit 参数控制。例如，如果你想让每页显示 15 篇文章，只需将 limit="10" 修改为 limit="15" 即可。调整后，AnQiCMS 会自动重新计算总页数和分页链接。
Q3: 分页功能是否会影响网站的搜索引擎优化 (SEO)？
A3: AnQiCMS 在设计分页功能时已经考虑了 SEO 因素。它生成的分页链接是标准化的，并且通常会通过 rel="next" 和 rel="prev" 属性（如果模板支持输出）向搜索引擎指示页面间的关系，避免内容重复问题。只要合理设置 limit 值，确保每个分页页面有足够独特且高质量的内容，同时配合 AnQiCMS 强大的 SEO 工具（如 Sitemap 生成、伪静态等），分页功能并不会对网站的 SEO 产生负面影响，反而能提升用户体验，间接促进 SEO 效果。