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 the list of related recommendations at the bottom of the article detail page is an effective strategy for enhancing user experience, extending visit duration, and reducing the bounce rate.For the users of AnQiCMS, achieving this function 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 the article detail page, we mainly use its flexible template tag system, especiallyarchiveListTags, it can help us easily catch 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 the recommendation list:
- Based on classification or proximity content auto-association:AnQiCMS default will automatically match other articles with the same category or similar content according to the current article's category.This is the most commonly used automatic recommendation method, no additional configuration is required, and the system completes it intelligently.
- Based on keyword intelligent matching:The website usually sets keywords (Tags) when publishing articles.AnQiCMS can use the keywords of articles for content recommendation, finding articles with the same or similar keywords to achieve more accurate matching.
- Based on manual specification in the background:Sometimes, we hope that certain articles have specific recommendation relationships, and this relationship cannot be automatically identified through categorization or keywords.AnQiCMS also supports manually associating some recommended articles while editing articles in the background, which provides great flexibility and precise control for operation.
Understood these logic, we can then proceed to set up in the article detail page template.
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, we will add the template code for displaying recommended content in it.
Practice Operation: Add recommended content to the template
In AnQiCMS templates, we mainly usearchiveListTags can be used to obtain document lists. By combining different parameters, various recommendation logic can be achieved. We usually add a recommended content list below the article content display area.
1. English recommendation: Smart matching based on category or keywords
This is the most common and the most convenient way. You just need to make a simple call in the templatearchiveListTag, and specifytype="related"AnQiCMS will intelligently recommend related articles to you based on the current article's category, keywords, and other factors automatically.
{# 在文章详情页的适当位置（例如文章内容下方）添加以下代码块 #}
<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 tag, it will query relevant documents from the database for the current article.relatedArchives：The variable name given to the list of articles queried, you can use it in{% for %}Using this variable in a loop.type="related"This parameter tells the system that we want relevant recommended articles. By default, AnQiCMS will match intelligently according to the category and content of the articles.limit="5"：Limit the number of recommended articles to 5. You can adjust this number based on the page layout and requirements.
{% for item in relatedArchives %}：Traverse each recommended article obtained.{{ item.Link }}：Get the article link.{{ item.Title }}：Get the title of the article.{{ item.Thumb }}：Get the thumbnail link of the article. In actual use, you can decide whether to display the image based on whether the thumbnail exists.{{ item.Description|truncatechars:80 }}：Get the article summary and usetruncatechars:80the filter to truncate it to a maximum of 80 characters to prevent it from being too long.{% empty %}：This is a very practical tag, whenrelatedArchivesThe list is empty (i.e., no related recommended articles are found) when,{% empty %}and{% endfor %}the content between them will be displayed.
If you want the recommendations to be more keyword-based, you can addlike="keywords"Parameters:
{# 基于关键词的自动推荐 #}
{% archiveList relatedArchives with type="related" like="keywords" limit="5" %}
{# ... 循环和显示代码同上 ... #}
{% endarchiveList %}
2. English: Manually specify recommendations: More accurate operation control
AnQiCMS also allows you to manually associate recommended articles in the background article editing interface. If you want to display only these recommended contents carefully selected by the operations personnel, you can uselike="relation"Parameter.
English translation: If only display manually associated recommended articles in the background
<h2>精选推荐</h2>
<ul>
{% archiveList handpickedArchives with type="related" like="relation" limit="3" %}
{% for item in handpickedArchives