如何在文章详情页下方显示相关文章列表?

在网站运营中,文章详情页下方的“相关文章”列表是一个提升用户体验、增加页面浏览量(PV)和延长用户站内停留时间的重要功能。它能引导用户发现更多感兴趣的内容,从而增强网站的整体粘性,对搜索引擎优化(SEO)也有积极作用。在安企CMS中实现这一功能,得益于其灵活的模板系统和强大的标签功能,整个过程既直观又高效。

一、理解“相关文章”的调用机制

安企CMS的模板标签是实现各种功能的核心。要显示相关文章,我们主要会用到 archiveList 这个标签。这个标签不仅能用于显示普通文章列表,更专门提供了一个 type="related" 参数,用于智能地筛选出与当前文章相关的推荐内容。

type 参数设置为 "related" 时,系统会根据当前文章的ID,自动在其所属分类中寻找内容相近或时间上临近的其他文章。您可以进一步通过 limit 参数来控制显示的文章数量,例如 limit="5" 表示显示5篇相关文章。

二、确定模板文件位置

首先,您需要找到文章详情页对应的模板文件。根据安企CMS的模板设计约定,文章详情页的默认模板通常位于 {模型table}/detail.html,例如,如果您的文章属于“文章模型”,那么通常会在 archive/detail.html。如果您为特定的文章或分类自定义了模板,请在对应的自定义模板文件中进行操作。

三、编写模板代码以显示相关文章列表

找到文章详情页模板文件后,您可以在页面的适当位置(通常是文章内容下方,评论上方或下方)添加以下代码片段,用于调用和展示相关文章列表:

{% archiveList archives with type="related" limit="5" %}
    {% if archives %}
    <div class="related-articles-section">
        <h3>相关推荐</h3>
        <ul class="related-articles-list">
        {% for item in archives %}
            <li class="related-article-item">
                <a href="{{item.Link}}" title="{{item.Title}}">
                    {% if item.Thumb %}
                        <img src="{{item.Thumb}}" alt="{{item.Title}}" class="related-article-thumb">
                    {% endif %}
                    <span class="related-article-title">{{item.Title}}</span>
                </a>
            </li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}
{% endarchiveList %}

代码解析:

  • {% archiveList archives with type="related" limit="5" %}:这是核心标签,它告诉安企CMS去查找与当前文章相关的文章,并将结果存储在名为 archives 的变量中。limit="5" 限制了显示数量为5篇。
  • {% if archives %}:这是一个条件判断,确保只有在找到相关文章时才显示“相关推荐”的整个区块,避免页面出现空的标题。
  • <h3>相关推荐</h3>:这是相关文章列表的标题,您可以根据网站风格自定义。
  • {% for item in archives %}:如果找到了相关文章,这里会遍历 archives 变量中的每一篇文章。
  • {{item.Link}}:输出当前循环文章的链接。
  • {{item.Title}}:输出当前循环文章的标题。
  • {% if item.Thumb %}:检查文章是否有缩略图。
  • <img src="{{item.Thumb}}" alt="{{item.Title}}">:如果文章有缩略图,则显示。
  • {% endfor %}{% endif %}{% endarchiveList %}:分别对应 for 循环、if 判断和 archiveList 标签的结束标记。

您可以根据需要调整 limit 的数值,或者添加更多文章字段(如 {{item.Description}} 显示摘要,{{stampToDate(item.CreatedTime, "2006-01-02")}} 显示发布日期等),来丰富您的相关文章列表展示。

四、选择相关文章的匹配策略(进阶)

archiveList 标签在 type="related" 的基础上,还提供了 like 参数,让您可以更精确地控制相关文章的匹配逻辑:

  1. 根据关键词匹配(like="keywords" 如果您希望相关文章的推荐更侧重于内容主题的相似性,可以利用文章的关键词。当您在后台发布文章时,会为文章填写关键词。使用 like="keywords" 参数,安企CMS会查找与当前文章关键词重合度较高的其他文章进行推荐。 修改后的代码示例:

    {% archiveList archives with type="related" like="keywords" limit="5" %}
        {# ... 相同的for循环和展示逻辑 ... #}
    {% endarchiveList %}
    

    前提: 确保您的文章在后台“文档关键词”字段中填写了相关的关键词。这可以在“内容管理” -> “发布文档”或“编辑文档”界面找到并设置。

  2. 根据后台手动关联匹配(like="relation" 在某些情况下,您可能希望手动指定某些文章之间的关联性,例如系列文章或专题报道。安企CMS允许您在后台文档编辑界面设置“相关文档”。使用 like="relation" 参数,系统将只显示您手动关联的文章。 修改后的代码示例:

    {% archiveList archives with type="related" like="relation" limit="5" %}
        {# ... 相同的for循环和展示逻辑 ... #}
    {% endarchiveList %}
    

    前提: 您需要在后台编辑文章时,手动关联其他文章。具体操作请参考文档或后台界面的“其他参数”部分。

通过灵活运用这些参数,您可以根据网站的运营策略和内容特点,定制出最符合用户需求的相关文章推荐列表,有效提升网站的互动性和内容价值。

常见问题解答(FAQ)

  1. 问:为什么我添加了相关文章的代码,但页面下方却没有显示任何文章? 答:这可能有几个原因。首先,请检查您的模板代码是否正确无误,包括标签的起始和结束标记。其次,确保您的网站中存在足够多的内容,并且这些内容之间存在一定的关联性(例如同分类、同关键词或手动关联),因为如果没有匹配的文章,列表自然会是空的。最后,检查 limit 参数是否设置为0或负数,这也会导致不显示文章。

  2. 问:type="related"like="keywords"like="relation" 有什么区别?我应该选择哪种方式? 答:type="related" 是一个基础的指令,它告诉系统去查找相关文章,默认情况下,它会根据当前文章的分类和发布时间等因素进行宽泛的匹配。而 like="keywords"like="relation" 则是对 type="related" 匹配逻辑的进一步细化:

    • like="keywords" 会优先根据文章的关键词进行匹配,更侧重于内容主题的相似性。如果您希望用户看到与当前文章讨论同一主题但可能来自不同分类的文章,这个选项非常有用。
    • like="relation" 则会只显示您在后台编辑文章时手动关联的其他文章。这适用于您有明确的系列文章、专题推荐或需要人工干预推荐列表的场景。 选择哪种方式取决于您的具体需求。如果您希望系统智能推荐,且文章关键词设置完善,可以使用 like="keywords"。如果您需要精确控制推荐内容,可以选择 like="relation"
  3. 问:我能否在相关文章列表中显示文章的发布日期或摘要? 答:当然可以。在 {% for item in archives %} 循环中,除了 {{item.Title}}{{item.Link}},您还可以使用其他 item 字段来丰富显示内容。例如,要显示发布日期,可以使用 {{stampToDate(item.CreatedTime, "2006-01-02")}};要显示文章摘要,可以使用 {{item.Description}}。只需将这些变量添加到您的 <li> 标签内部,并结合HTML和CSS进行布局即可。