如何在文档详情页显示上一篇和下一篇文档的链接？
在网站运营中，提供流畅的用户体验至关重要，而文档详情页的上一篇和下一篇导航正是提升用户体验、引导用户深入浏览网站内容的关键一环。在 AnQiCMS（安企CMS）中，实现这一功能既简单又高效，它内置了专门的模板标签，让您可以轻松地为网站内容增添这一实用功能。
上下篇导航的重要性
当用户阅读完一篇文档时，他们往往会希望找到相关或下一篇内容，以获取更多信息。此时，清晰的“上一篇”和“下一篇”链接能够：
- 提升用户体验和留存时间： 用户无需返回列表页寻找，可以直接通过导航继续浏览，减少操作路径，提高用户在网站上的停留时间。
- 优化内部链接结构： 这些链接自然地构建了文章之间的关联，有助于搜索引擎更好地抓取和理解网站的内部链接结构，从而对 SEO 产生积极影响。
- 促进内容消费： 引导用户发现更多内容，增加网站整体内容的曝光率和被阅读的次数。
AnQiCMS 中的 prevArchive 和 nextArchive 标签
AnQiCMS 提供了两个非常实用的模板标签 prevArchive 和 nextArchive，专门用于在文档详情页获取当前文档的上一篇和下一篇内容。它们能够智能地判断当前文档的上一篇和下一篇文档，并将相关信息展示出来。
这些标签的使用非常直观，无需传递复杂的参数，系统会自动根据当前文档的上下文（如分类、发布时间等）来寻找相邻的文档。每个标签都能获取到下一篇或上一篇文档的多种字段信息，例如：
- 文档 ID (
Id)：文档的唯一标识符。 - 文档标题 (
Title)：文档的名称，通常用于链接文本。 - 文档链接 (
Link)：直接跳转到该文档的 URL。 - 文档缩略图 (
Thumb) 或封面首图 (Logo)：如果存在，可用于视觉化导航。 - 文档描述 (
Description)：简短的文档摘要。 - 文档浏览量 (
Views)：显示文档的热度。 - 文档添加时间 (
CreatedTime)：显示文档的发布日期。
如何在文档详情页中添加上一篇/下一篇链接
您需要在网站模板目录下的 detail.html 文件中进行操作。这是 AnQiCMS 默认用于渲染文档详情页的模板文件。
1. 基本文本链接
最简单的方式是只显示上一篇和下一篇文档的标题作为链接。在实际使用中，不是所有文档都有上一篇或下一篇，因此需要使用条件判断 {% if prev %} 和 {% if next %} 来确保只有当对应的文档存在时才显示链接。
<div class="document-navigation">
<div class="prev-document">
{% prevArchive prev %}
上一篇：
{% if prev %}
<a href="{{prev.Link}}">{{prev.Title}}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
下一篇：
{% if next %}
<a href="{{next.Link}}">{{next.Title}}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
在这段代码中，{% prevArchive prev %} 会尝试获取上一篇文档的数据并将其赋值给变量 prev。如果 prev 变量有值（即存在上一篇），{% if prev %} 条件就会成立，显示出包含标题的链接。同理，{% nextArchive next %} 也以同样的方式运作。当没有对应的文档时，我们则显示“没有了”提示。
2. 结合缩略图增强视觉效果
为了让导航更具吸引力，我们可以结合文档的缩略图功能。prev 和 next 对象中都包含 Thumb 字段，可以直接引用：
<div class="document-navigation visual-navigation">
<div class="prev-document">
{% prevArchive prev %}
{% if prev %}
<a href="{{prev.Link}}">
{% if prev.Thumb %}<img src="{{prev.Thumb}}" alt="{{prev.Title}}" />{% endif %}
<span>{{prev.Title}}</span>
</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
</div>
<div class="next-document">
{% nextArchive next %}
{% if next %}
<a href="{{next.Link}}">
<span>{{next.Title}}</span>
{% if next.Thumb %}<img src="{{next.Thumb}}" alt="{{next.Title}}" />{% endif %}
</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</div>
</div>
在这个示例中，我们添加了 <img> 标签，并再次使用条件判断 {% if prev.Thumb %} 来确保只有当缩略图存在时才显示图片，避免出现图片占位符或空白。您可以根据需要调整 <img> 标签的放置位置，例如在标题上方或下方。
3. 进一步美化和布局
您可以利用 CSS 对 document-navigation、prev-document 和 next-document 等类进行样式美化，使其与您网站的整体设计风格保持一致。例如，可以设置它们为弹性布局，让上一篇链接靠左、下一篇链接靠右显示，或者添加边框、背景色和悬停效果等。
通过 AnQiCMS 提供的 prevArchive 和 nextArchive 标签，为您的网站文档详情页添加上一篇和下一篇导航变得轻而易举。这不仅优化了用户在网站上的浏览路径，也为网站的内部链接结构增添了一份力量，助力网站获得更好的内容展现和 SEO 效果。
常见问题 (FAQ)
Q1: prevArchive 和 nextArchive 标签是否支持在文章列表页调用？
答：不可以。prevArchive 和 nextArchive 标签是专门设计用于文档详情页的上下文环境中。它们依赖于当前正在浏览的单一文档来判断其前后的文档。如果您需要在文章列表页展示内容，应该使用 archiveList 标签配合相应的条件和排序参数来获取您想要的数据。
Q2: 如果文档是当前分类的第一篇或最后一篇，没有上一篇或下一篇文档，模板会显示什么？
答：如文中示例所示，如果使用了 {% if prev %} 或 {% if next %} 进行条件判断，当不存在对应文档时，您可以自定义显示“没有了”之类的文本提示，或者干脆不显示任何内容，保持区域为空白。这取决于您的模板设计和用户体验考虑。如果不进行条件判断，但文档确实不存在，那么对应的 {{prev.Title}} 或 {{next.Link}} 等将不会输出任何内容。
Q3: 如何自定义上一篇/下一篇链接的显示样式，例如只显示标题不显示图片，或者只显示图标？
答：您对 prev 和 next 变量内部的 HTML 结构拥有完全的控制权。如果您只想显示标题，只需在 {% if prev %} 或 {% if next %} 块内只放置 <a> 标签和 {{prev.Title}}（或 {{next.Title}}）即可，移除 <img> 标签。如果想显示图标，您可以将 <span> 替换为图标字体或 SVG 图标，并配合 CSS 进行定位和样式调整。您可以根据需求自由组合 Title、Link、Thumb 等字段来构建所需的外观。