如何在AnQiCMS模板中实现内容分页显示，并自定义页码导航样式？
当网站内容日益丰富，如何高效地展示大量信息，同时确保用户友好的浏览体验，是网站运营中不可或缺的一环。在AnQiCMS中，通过强大的模板标签系统，我们可以轻松实现内容的分页显示，并灵活定制页码导航的样式，让网站内容既丰富又整洁。
高效组织内容：实现内容列表的分页显示
在AnQiCMS的模板中，要实现内容的分页显示，核心在于使用archiveList标签来获取文档列表。这个标签功能强大，不仅能列出指定分类或模型的文档，还能直接配置为分页模式。
首先，在您的列表页模板（例如，针对文章模型的列表页通常是article/list.html，或者自定义的分类列表模板）中，您会用到archiveList标签。要开启分页功能，需要设置type参数为"page"，并利用limit参数来定义每页显示的文章数量。例如，如果您想每页显示10篇文章，代码会是这样：
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
<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>
</div>
{% empty %}
<p>当前分类下暂时没有文章。</p>
{% endfor %}
{% endarchiveList %}
在这段代码中，archiveList标签会将符合条件的文章数据加载到名为archives的变量中，并自动根据limit参数进行分页处理。在for循环中，item代表每一篇文章，您可以通过item.Title、item.Link、item.Description等方式访问文章的各项属性。{% empty %}标签则非常贴心地处理了当没有任何文章可显示时的场景，避免页面空白。
精细化控制：自定义页码导航样式
内容列表呈现后，接下来就是为用户提供便捷的页码导航。AnQiCMS为此提供了pagination标签。这个标签会根据archiveList标签生成的总页数和当前页码，自动生成一个包含首页、上一页、具体页码、下一页和末页等信息的pages对象，供您在模板中灵活渲染。
在archiveList标签的下方，紧接着使用pagination标签，并可配合show参数来控制页码导航中显示的页码数量。例如，show="5"表示页码导航最多显示5个页码数字（如1、2、3、4、5）。
以下是一个结合了内容列表和页码导航的完整示例，并融入了样式定制的考量：
{% archiveList archives with type="page" limit="10" %}
<div class="article-list">
{% for item in archives %}
<div class="article-item">
<h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
<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>
</div>
{% empty %}
<p>当前分类下暂时没有文章。</p>
{% endfor %}
</div>
<div class="pagination-nav">
{% 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 %}
{# 中间页码数字，遍历 pages.Pages 数组 #}
{% for pageItem in pages.Pages %}
<li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{pageItem.Link}}">{{pageItem.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>
{% endarchiveList %}
在上述pagination标签的内部，pages对象提供了丰富的信息：
pages.TotalItems和pages.TotalPages分别表示总文章数和总页数。pages.CurrentPage则是当前访问的页码。pages.FirstPage、pages.LastPage、pages.PrevPage、pages.NextPage分别代表首页、末页、上一页和下一页的导航对象，它们都包含Link（链接地址）和Name（显示文本）属性，以及一个IsCurrent布尔值来判断是否为当前页。pages.Pages是一个数组，包含了中间部分的具体页码数字，每个元素也是一个包含Link、Name和IsCurrent属性的对象。
利用这些属性，您可以轻松定制页码导航的外观。例如，通过{% if pageItem.IsCurrent %}active{% endif %}这样的条件判断，为当前页的<li>元素添加active类，然后通过CSS来设置其高亮样式。同样，{% if pages.PrevPage %}这样的判断可以确保在没有上一页或下一页时，对应的导航链接不会显示，从而保持导航的简洁性。
灵活多变：提升用户体验的实践建议
- CSS 定制外观：上述示例提供了HTML结构和基本的
active类，具体的页码导航美化则完全取决于您的CSS设计。您可以调整字体、颜色、背景、边框等，使其与网站整体风格统一。 - 模板文件位置：通常，列表页的模板文件会放置在
template/{您的模板目录}/{模型table}/list.html，例如template/default/article/list.html。如果您有特定的分类需要不同的列表布局，AnQiCMS也支持{模型table}/list-{分类id}.html这样的自定义模板。 - 结合搜索功能：如果您的网站包含搜索功能，
archiveList标签在type="page"模式下，会自动读取URL中q参数作为搜索关键词，实现搜索结果的分页。您无需额外处理搜索结果