如何获取并显示当前文档的上/下一篇内容？

在内容型网站中，为访客提供便捷的导航体验至关重要，其中“上一篇”和“下一篇”功能是文章详情页的标配。它们不仅能引导用户继续浏览更多内容，有效提升网站的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，还可以访问