In content operation, the value of a high-quality article is not only in itself, but also in its ability to guide readers to discover more valuable content.Properly displaying a list of related recommended content at the bottom of the article detail page is an effective strategy to enhance user experience, prolong visit duration, and reduce bounce rate.For users of AnQiCMS, implementing this feature is quite direct and flexible.
AnQiCMS with its concise and efficient architecture provides powerful template customization capabilities for content managers. To implement related recommendations on article detail pages, we mainly use its flexible template tag system, especiallyarchiveListTags, it can help us easily fetch and display other content closely related to the current article.
Understanding the 'Relevance' logic of AnQiCMS
In AnQiCMS, the "relevance" of content can be defined and implemented in several ways. This gives us a lot of freedom in designing recommendation lists:
- Automatically associate based on category or nearby content:AnQiCMS defaults to automatically matching other articles in the same category or with similar content based on the current article's category.This is the most commonly used automatic recommendation method, no additional configuration is required, the system completes it intelligently.
- Intelligent matching based on keywords:The website usually sets keywords (Tag) when publishing articles.AnQiCMS can use the keywords of articles to recommend content, find articles with the same or similar keywords, thereby achieving more accurate matching.
- Manually specified on the backend:Sometimes, we hope that certain articles have a specific recommendation relationship, and this relationship cannot be automatically identified through classification or keywords.AnQiCMS also supports manually associating some recommended articles when editing articles in the background, which provides great flexibility and precise control for operations.
After understanding this logic, we can start setting up the template on the article detail page.
Preparation: Find your template file.
Firstly, we need to locate the template file used for the article detail page. According to the template design conventions of AnQiCMS, the default template for the article detail page is usually located in your theme directory, for example:/template/你的主题名称/article/detail.html. If you have a custom template for a specific model or ID, the filename may be different, for example/template/你的主题名称/product/detail.html(if it is a product detail page) or/template/你的主题名称/article/detail-10.html(for the article with ID 10).
Find and open this file, where we will add the template code to display related recommendation content.
Practical operation: Add recommendations to the template.
In AnQiCMS templates, we mainly usearchiveListTag to get the document list. By pairing different parameters, various recommendation logic can be achieved. We usually add a recommendation content list below the article content display area.
1. Auto-recommendation: Smart matching based on categories or keywords
This is the most common and easiest way. You just need to make a simple call in the templatearchiveListtags, and specifytype="related"，AnQiCMS will intelligently recommend related articles based on the current article's category, keywords, and other factors.
{# 在文章详情页的适当位置（例如文章内容下方）添加以下代码块 #}
<div class="related-content-section">
<h2>相关推荐</h2>
<ul>
{# 使用archiveList标签获取相关文档，type="related"是关键 #}
{# limit="5"表示只显示5篇推荐文章 #}
{% archiveList relatedArchives with type="related" limit="5" %}
{% for item in relatedArchives %}
<li>
<a href="{{ item.Link }}" title="{{ item.Title }}">
{% if item.Thumb %}
{# 如果文章有缩略图，则显示缩略图 #}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="recommend-thumb">
{% endif %}
<span class="recommend-title">{{ item.Title }}</span>
</a>
<p class="recommend-desc">{{ item.Description|truncatechars:80 }}</p>
</li>
{% empty %}
{# 如果没有找到相关推荐，显示友好提示 #}
<li>目前没有更多相关推荐内容。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
Code analysis:
{% archiveList relatedArchives with type="related" limit="5" %}This is the core label, which will query the documents related to the current article from the database.relatedArchivesWe give the variable name to the list of articles queried, you can use it in{% for %}Use this variable in the loop.type="related"This parameter tells the system what we want is relevant recommended articles. By default, AnQiCMS will intelligently match according to the category and content of the articles.limit="5": Limit the number of recommended articles to 5. You can adjust this number according to the page layout and requirements.
{% for item in relatedArchives %}: Traverse each recommended article obtained.{{ item.Link }}Get the article link.{{ item.Title }}Get the article title.{{ item.Thumb }}: Get the thumbnail link of the article. In practice, you can decide whether to display the image based on whether the thumbnail exists.{{ item.Description|truncatechars:80 }}: Get the article's summary and usetruncatechars:80The filter truncates it to a maximum of 80 characters to prevent it from being too long.{% empty %}: It is a very practical tag, whenrelatedArchivesWhen the list is empty (i.e., no related recommended articles are found),{% empty %}and{% endfor %}the content between them will be displayed.
If you want to recommend more emphasis on article keyword matching, you can addlike="keywords"parameters:
{# 基于关键词的自动推荐 #}
{% archiveList relatedArchives with type="related" like="keywords" limit="5" %}
{# ... 循环和显示代码同上 ... #}
{% endarchiveList %}
2. Manual recommendation: more accurate operation control
AnQiCMS also allows you to manually associate recommended articles in the backend article editing interface. If you want to display only these recommended contents carefully selected by operations personnel, you can uselike="relation"Parameter.
`twig {# If only display manually associated recommended articles #}
<h2>精选推荐</h2>
<ul>
{% archiveList handpickedArchives with type="related" like="relation" limit="3" %}
{% for item in handpickedArchives