AnQiCMS模板中如何正确显示上/下一篇文档的链接和标题？

在AnQiCMS模板中，如何优雅地展示上/下一篇文档的链接和标题？

用户在浏览网站文章时，往往希望能够方便地跳转到相关内容，无论是回到上一篇深入了解，还是继续阅读下一篇新内容。这种“上/下一篇”的导航功能不仅能显著提升用户体验，延长用户在网站上的停留时间，对于网站的内部链接结构和SEO优化也大有裨益。AnQiCMS基于其类Django模板引擎的强大功能，让实现这一需求变得非常直观和灵活。

接下来，我们将一起探索如何在您的AnQiCMS模板中，正确而高效地显示上/下一篇文档的链接和标题。

核心标签介绍：prevArchive 和 nextArchive

AnQiCMS为我们提供了两个非常直观且强大的模板标签，专门用于获取当前文档的上一篇和下一篇内容：prevArchive 和 nextArchive。

这两个标签都是块级标签，这意味着它们需要一个开启标签 ({% prevArchive ... %}) 和一个结束标签 ({% endprevArchive %}) 来包裹内容。在标签内部，您可以将获取到的文档数据赋值给一个变量（例如 prev 或 next），然后通过这个变量来访问文档的各项属性，比如标题、链接、缩略图等。

当您在文档详情页使用这两个标签时，它们会自动根据当前文档的上下文（通常是同一个分类下的文档）来查找相邻的上一篇或下一篇文档。它们支持获取文档的多种字段，包括：

• Id: 文档ID
• Title: 文档标题
• Link: 文档链接
• Description: 文档简介
• Thumb: 文档缩略图
• 以及其他在archiveDetail标签中可用的字段。

实际操作：一步步实现上/下一篇导航

让我们通过实际的代码示例，来了解如何在AnQiCMS模板中加入上/下一篇文档的导航。

第一步：确定模板文件

首先，我们需要找到当前文档详情页所使用的模板文件。根据AnQiCMS的模板约定，文档详情页通常位于 /template/您的模板目录/{模型table}/detail.html 或 {模型table}/detail-{文档ID}.html。例如，如果是文章模型，您可能需要在 article/detail.html 中进行修改。

第二步：插入基础代码（链接与标题）

找到文档内容显示区域附近，您希望展示上/下一篇导航的位置。通常，它们会放在文章内容的底部。

在使用 prevArchive 和 nextArchive 标签时，有一个非常重要的点需要注意：并不是每篇文章都有上一篇或下一篇。 例如，某个分类下的第一篇文章就没有上一篇，最后一篇文章就没有下一篇。因此，在使用这些标签时，我们必须加上条件判断，避免显示空的链接或不必要的占位符，从而提升用户体验和页面整洁度。

以下是一个基础的代码示例，它会判断是否存在上一篇或下一篇，并显示相应的链接和标题，如果没有则显示提示信息：

<nav class="document-pagination">
    <div class="prev-document">
        {# 上一篇文档 #}
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{ prev.Link }}" title="{{ prev.Title }}">
                    <span class="arrow">&laquo;</span> 上一篇: <span class="title">{{ prev.Title }}</span>
                </a>
            {% else %}
                <span class="no-entry">&laquo; 没有上一篇了</span>
            {% endif %}
        {% endprevArchive %}
    </div>

    <div class="next-document">
        {# 下一篇文档 #}
        {% nextArchive next %}
            {% if next %}
                <a href="{{ next.Link }}" title="{{ next.Title }}">
                    下一篇: <span class="title">{{ next.Title }}</span> <span class="arrow">&raquo;</span>
                </a>
            {% else %}
                <span class="no-entry">没有下一篇了 &raquo;</span>
            {% endif %}
        {% endnextArchive %}
    </div>
</nav>

在这段代码中：

• 我们用 {% prevArchive prev %} 和 {% nextArchive next %} 分别获取上一篇和下一篇文档的数据，并将它们赋值给 prev 和 next 变量。
• {% if prev %} 和 {% if next %} 条件判断确保只有当存在对应的文档时，链接才会被渲染出来。
• {{ prev.Link }} 和 {{ prev.Title }} 用于获取文档的链接和标题。next 变量的用法也类似。
• 如果不存在，我们则显示一个友好的提示信息。

第三步：添加更多细节，提升用户体验（带缩略图和简介）

仅仅是文字链接可能略显单调，我们可以考虑加入文档缩略图或简介来丰富展示效果，让用户在跳转前对内容有更直观的了解。

AnQiCMS的 prevArchive 和 nextArchive 标签同样支持获取 Thumb (缩略图) 和 Description (简介) 字段，这让我们的导航更具吸引力。

”`twig