AnQiCMS 模板中如何显示文章详情页的上一篇和下一篇文章链接？

在AnQiCMS中，为文章详情页添加“上一篇”和“下一篇文章”的导航链接是提升用户体验、引导用户深入浏览网站内容的关键一环。AnQiCMS强大的模板系统让这项功能实现起来非常直观和高效，它采用了类似Django模板引擎的语法，让开发者能够轻松驾驭。

AnQiCMS的模板文件通常以.html作为后缀，存储在/template目录下。在这些模板文件中，我们可以通过特定的标签来调用和展示数据。逻辑控制（如条件判断、循环）使用{% ... %}标签，而变量输出则使用{{ ... }}双花括号。理解了这些基础，我们就能更好地利用AnQiCMS提供的标签来实现所需功能。

核心标签介绍：prevArchive 和 nextArchive

为了在文章详情页显示上一篇和下一篇文章的链接，AnQiCMS专门提供了两个核心标签：prevArchive 和 nextArchive。它们的作用分别是获取当前文章的上一篇和下一篇文章的数据。这两个标签在使用时不需要额外传入参数，系统会根据当前正在浏览的文章，自动查找其在数据库中的相邻文章。

prevArchive 标签会将上一篇文章的数据赋值给一个指定的变量（例如 prev），而 nextArchive 标签则将下一篇文章的数据赋值给另一个指定的变量（例如 next）。这些变量中包含了丰富的文章信息，常用的字段包括：

  • Id：文章的唯一ID
  • Title：文章标题
  • Link：文章详情页链接
  • Description：文章简介
  • Thumb：文章缩略图
  • CreatedTime：文章发布时间（时间戳格式，需要配合 stampToDate 标签格式化）
  • Views：文章浏览量

实际操作：添加链接到文章详情页

要在文章详情页的模板中添加上一篇和下一篇文章的链接，您通常会在文章内容的下方找到一个合适的位置。假设您的文章详情页模板是 article/detail.html 或类似的路径，您可以按照以下步骤进行操作：

1. 基本链接实现

首先，您需要使用 prevArchive 和 nextArchive 标签来获取相邻文章的数据，并判断它们是否存在。如果存在，就显示链接；如果不存在，则可以显示一段提示信息。

<div class="article-pagination">
    <div class="prev-article">
        {%- prevArchive prev %} {# 获取上一篇文章数据，赋值给变量prev #}
            {%- if prev %} {# 判断是否存在上一篇文章 #}
                <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}">上一篇：{{ prev.Title }}</a>
            {%- else %}
                <span class="no-link">没有上一篇文章了</span>
            {%- endif %}
        {%- endprevArchive %}
    </div>
    <div class="next-article">
        {%- nextArchive next %} {# 获取下一篇文章数据，赋值给变量next #}
            {%- if next %} {# 判断是否存在下一篇文章 #}
                <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}">下一篇：{{ next.Title }}</a>
            {%- else %}
                <span class="no-link">没有下一篇文章了</span>
            {%- endif %}
        {%- endnextArchive %}
    </div>
</div>

这里我们使用了 {%- ... %} 的语法，其中的 - 符号是为了去除标签行自身可能产生的空白字符，让最终渲染出的HTML更加整洁。

2. 丰富链接显示内容（可选）

除了标题，您还可以根据需要，在链接中加入缩略图或文章简介，使导航更加直观。例如，您可以为链接添加文章缩略图和截取后的简介：

<div class="article-pagination">
    <div class="prev-article">
        {%- prevArchive prev %}
            {%- if prev %}
                <a href="{{ prev.Link }}" title="上一篇：{{ prev.Title }}" class="pagination-link">
                    {%- if prev.Thumb %}<img src="{{ prev.Thumb }}" alt="{{ prev.Title }}" class="pagination-thumb" />{%- endif %}
                    <div class="link-content">
                        <span class="link-label">上一篇</span>
                        <h4 class="link-title">{{ prev.Title }}</h4>
                        {%- if prev.Description %}<p class="link-desc">{{ prev.Description|truncatechars:50 }}</p>{%- endif %}
                    </div>
                </a>
            {%- else %}
                <span class="no-link">没有上一篇文章了</span>
            {%- endif %}
        {%- endprevArchive %}
    </div>
    <div class="next-article">
        {%- nextArchive next %}
            {%- if next %}
                <a href="{{ next.Link }}" title="下一篇：{{ next.Title }}" class="pagination-link">
                    <div class="link-content">
                        <span class="link-label">下一篇</span>
                        <h4 class="link-title">{{ next.Title }}</h4>
                        {%- if next.Description %}<p class="link-desc">{{ next.Description|truncatechars:50 }}</p>{%- endif %}
                    </div>
                    {%- if next.Thumb %}<img src="{{ next.Thumb }}" alt="{{ next.Title }}" class="pagination-thumb" />{%- endif %}
                </a>
            {%- else %}
                <span class="no-link">没有下一篇文章了</span>
            {%- endif %}
        {%- endnextArchive %}
    </div>
</div>

在这个示例中，我们添加了 prev.Thumb