如何获取和显示上一篇、下一篇文章的链接和标题？

当我们在安企CMS中管理和发布内容时，为了提升网站的用户体验和内容可发现性，通常需要在文章详情页提供导航到“上一篇”和“下一篇”文章的功能。这不仅能鼓励读者继续浏览站内内容，也能为搜索引擎优化（SEO）提供良好的内部链接结构。

安企CMS为此提供了非常简洁直观的模板标签，让我们可以轻松实现这一需求。

核心功能：prevArchive 和 nextArchive 标签

安企CMS为我们提供了两个专门用于获取相邻文章数据的模板标签：prevArchive 用于获取上一篇文章，而 nextArchive 则用于获取下一篇文章。它们的强大之处在于无需手动指定文章ID或分类，系统会智能地根据当前文章自动找到其在时间顺序上相邻的文章。

这些标签通常在文章的详情页面（例如 article/detail.html 或自定义模型对应的 detail.html 模板）中使用，以确保它们能够准确识别当前上下文中的文章。

基本用法：仅显示标题和链接

在您的文章详情模板中，您可以使用以下代码片段来获取并显示上一篇文章和下一篇文章的标题与链接。一个重要的**实践是，在使用之前判断文章是否存在，以避免在没有相邻文章时出现空链接或错误。

<div class="article-navigation">
    <div class="prev-article">
        {% prevArchive prev %}
        {% if prev %}
        <span>上一篇：</span>
        <a href="{{ prev.Link }}">{{ prev.Title }}</a>
        {% else %}
        <span>没有了</span>
        {% endif %}
        {% endprevArchive %}
    </div>
    <div class="next-article">
        {% nextArchive next %}
        {% if next %}
        <span>下一篇：</span>
        <a href="{{ next.Link }}">{{ next.Title }}</a>
        {% else %}
        <span>没有了</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

在上面的代码中：

• {% prevArchive prev %} 定义了一个名为 prev 的变量，它将承载上一篇文章的所有数据。
• {% nextArchive next %} 同样定义了一个名为 next 的变量，用于存放下一篇文章的数据。
• {% if prev %} 和 {% if next %} 是判断语句，确保只有当上一篇文章或下一篇文章存在时，其链接和标题才会被显示。如果不存在，则会显示“没有了”这样的提示文字。
• {{ prev.Link }} 和 {{ next.Link }} 分别获取上一篇和下一篇文章的URL链接。
• {{ prev.Title }} 和 {{ next.Title }} 分别获取上一篇和下一篇文章的标题。

通过这种方式，您可以很清晰地在文章底部或侧边栏呈现出文章导航。

进阶用法：结合缩略图提升视觉体验

为了让上一篇、下一篇文章的导航更加醒目和吸引人，我们可以选择为它们添加缩略图。安企CMS的文章数据通常包含 Thumb（缩略图）或 Logo（封面首图）字段，您可以根据设计需求选择使用。

以下是如何在链接中融入缩略图的示例：

<div class="article-navigation-visual">
    <div class="nav-item prev-item">
        {% 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 class="no-article">没有上一篇文章了</span>
        {% endif %}
        {% endprevArchive %}
    </div>
    <div class="nav-item next-item">
        {% nextArchive next %}
        {% if next %}
        <a href="{{ next.Link }}">
            {% if next.Thumb %}
            <img src="{{ next.Thumb }}" alt="下一篇：{{ next.Title }}" />
            {% endif %}
            <span>下一篇：{{ next.Title }}</span>
        </a>
        {% else %}
        <span class="no-article">没有下一篇文章了</span>
        {% endif %}
        {% endnextArchive %}
    </div>
</div>

在这个进阶示例中，我们添加了一个 {% if prev.Thumb %} 的判断，确保只有当文章有缩略图时才显示图片。alt 属性的设置也对SEO和无障碍访问非常重要。您还可以根据需要，在 prev 和 next 变量中访问其他字段，例如 Description（文章简介）、Views（浏览量）或 CreatedTime（发布时间）等。

将代码放置在何处？

这些模板代码通常会放置在您的文章详情页模板中。根据您的模板设计，这可能是：

• 文章主要内容区域的下方。
• 评论区或相关文章推荐区的上方。
• 页面侧边栏的固定位置。

在安企CMS中，文章详情页的模板文件通常命名为 {模型table}/detail.html (例如 article/detail.html 或 product/detail.html)。您只需打开对应的模板文件，将上述代码粘贴到合适的位置，然后保存即可。

温馨提示与**实践

• 样式定制： 上述代码只提供了基本的HTML结构。为了让上一篇和下一篇文章的导航在您的网站上看起来协调美观，您需要编写相应的CSS样式来美化它们。
• 清晰的指示： 确保“上一篇”和“下一篇”的文字描述清晰，让用户一目了然。
• 统一性： 保持导航区域的设计在整个网站中的一致性，有助于提升整体的用户体验。
• SEO友好： 这种内部链接结构自然地引导搜索引擎爬虫发现更多页面，有助于提升网站内容的收录和排名。

通过这些简单而实用的模板标签，您可以在安企CMS中轻松构建出高效且用户友好的文章导航功能，进一步提升您网站的价值。

常见问题 (FAQ)

Q1: 如果我的文章没有上一篇或下一篇文章，会显示什么？ A1: 如文章中示例代码所示，我们建议您使用 {% if prev %} 或 {% if next %} 来判断上一篇或下一篇文章是否存在。