在内容型网站中，为访客提供便捷的导航体验至关重要，其中“上一篇”和“下一篇”功能是文章详情页的标配。它们不仅能引导用户继续浏览更多内容，有效提升网站的PV（页面浏览量），还能在一定程度上帮助搜索引擎更好地理解网站的内容结构，从而优化SEO表现。AnQiCMS 充分考虑了这一需求，为我们提供了非常简单直观的模板标签，帮助我们轻松实现这一功能。
了解 AnQiCMS 的模板机制
在 AnQiCMS 中，我们通过编写模板文件来控制网站页面的显示。模板采用类似 Django 的语法，通过双花括号 {{ 变量名 }} 来输出变量内容，通过 {% 标签 %} 来使用功能标签或进行逻辑控制。实现文章的上一篇和下一篇导航，主要依靠系统内置的 prevArchive 和 nextArchive 标签。
这些标签通常在文章或产品详情页（例如 archive/detail.html 或 product/detail.html，具体文件名可能因自定义模板而异）中使用，因为它们需要基于当前正在浏览的文档来查找相邻内容。
如何获取并显示上一篇文档？
AnQiCMS 提供了一个专门的标签 prevArchive 来获取当前文档的上一篇内容。当我们在文档详情页使用这个标签时，它会自动识别当前文档，并查找同一分类下的前一篇文档。
以下是 prevArchive 标签的基本用法：
{% prevArchive prev %}
<div class="prev-article-link">
{% if prev %} {# 判断是否存在上一篇文档 #}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="label">上一篇：</span>
<span class="title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="label">上一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endprevArchive %}
在上面的代码中：
{% prevArchive prev %}标签会尝试获取上一篇文档，并将其数据赋值给名为prev的变量。{% if prev %}检查是否存在上一篇文档。如果存在，我们就可以通过prev变量来访问其属性。{{ prev.Link }}会输出上一篇文档的链接。{{ prev.Title }}会输出上一篇文档的标题。- 如果
prev不存在（即当前文档已经是所在分类的第一篇），则会显示“没有了”，提供友好的提示。
如果希望在链接旁边展示文档的缩略图，可以进一步丰富代码：
{% prevArchive prev %}
<div class="prev-article-nav">
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
{% if prev.Thumb %} {# 判断是否存在缩略图 #}
<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="article-thumbnail"/>
{% endif %}
<span class="label">上一篇：</span>
<span class="title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="label">上一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endprevArchive %}
这里增加了 {% if prev.Thumb %} 判断，以确保只有在缩略图存在时才显示图片，避免出现图片占位符或报错。
如何获取并显示下一篇文档？
与获取上一篇文档类似，AnQiCMS 提供了 nextArchive 标签来获取当前文档的下一篇内容。它的用法和 prevArchive 几乎完全相同，只是获取的方向相反。
以下是 nextArchive 标签的基本用法：
{% nextArchive next %}
<div class="next-article-link">
{% if next %} {# 判断是否存在下一篇文档 #}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="label">下一篇：</span>
<span class="title">{{ next.Title }}</span>
</a>
{% else %}
<span class="label">下一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endnextArchive %}
同样地，如果需要显示缩略图：
{% nextArchive next %}
<div class="next-article-nav">
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
{% if next.Thumb %} {# 判断是否存在缩略图 #}
<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="article-thumbnail"/>
{% endif %}
<span class="label">下一篇：</span>
<span class="title">{{ next.Title }}</span>
</a>
{% else %}
<span class="label">下一篇：</span>
<span class="title">没有了</span>
{% endif %}
</div>
{% endnextArchive %}
整合显示上一篇/下一篇导航
通常，我们会在文章详情页的底部将上一篇和下一篇导航并排或堆叠显示。将上述代码片段组合起来，可以形成一个完整的导航区域。
<div class="article-navigation-container clearfix">
{# 上一篇文档 #}
{% prevArchive prev %}
<div class="prev-article-box">
{% if prev %}
<a href="{{ prev.Link }}" title="{{ prev.Title }}">
<span class="nav-label">上一篇：</span>
<span class="nav-title">{{ prev.Title }}</span>
</a>
{% else %}
<span class="nav-label">上一篇：</span>
<span class="nav-title">没有了</span>
{% endif %}
</div>
{% endprevArchive %}
{# 下一篇文档 #}
{% nextArchive next %}
<div class="next-article-box">
{% if next %}
<a href="{{ next.Link }}" title="{{ next.Title }}">
<span class="nav-label">下一篇：</span>
<span class="nav-title">{{ next.Title }}</span>
</a>
{% else %}
<span class="nav-label">下一篇：</span>
<span class="nav-title">没有了</span>
{% endif %}
</div>
{% endnextArchive %}
</div>
这里使用了 clearfix 样式类（假设您的CSS框架中包含此功能）来处理浮动布局，将上一篇和下一篇分别放置在左右两侧。您也可以根据自己的网站设计，调整HTML结构和CSS样式。
实用提示
- 代码放置位置： 这些代码片段通常放置在您的详情页模板文件（如
模型名称/detail.html）中，或者如果您使用了模板继承，可以放置在详情页的content区域，或者一个专门用于详情页布局的基础模板中。 - 可访问的字段：
prev和next变量不仅提供Link和Title，还可以访问