On your website, when visitors finish reading an article, if they can see other related content in time, this can not only significantly improve the user experience, reduce the bounce rate, but also effectively increase the page views and dwell time of the website. AnQi CMS provides a very convenient tag for this:archiveList，combined with ittype="related"properties, you can easily achieve this function
UnderstandingarchiveListwithtype="related"working principle
archiveListIs an AnQi CMS feature-rich content list call tag, which allows you to obtain article lists based on various conditions (such as category ID, module ID, recommended attributes, etc.). When we willtypeset the attribute to"related"When, this tag will intelligently recognize the article being displayed on the current page and try to find other related articles to recommend.
This 'related' logic is multifaceted.The system will first try to retrieve nearby articles from the same category as the current article ID for related recommendations.archiveListthe tags also providelikeParameter, it has two main uses:
Keyword-based recommendation (
like="keywords")When you set clear keywords for an article (you can fill in keywords during backend article editing, and multiple keywords are separated by English commas), and you have usedlike="keywords"The parameter, the system will match other articles with the same keywords on the website based on the first keyword of the current article.This is very useful for a website with clear content themes and keyword management norms.Recommended based on manual association (
like="relation")Sometimes, you may want to control the recommendation of related articles more accurately.In the AnQi CMS backend article editing interface, you can manually specify other articles associated with the current article.like="relation"parameter,archiveListTags will only display these articles you have manually associated, providing you with great flexibility.
If you have not specifiedlikeParameters, the system will default try to recommend articles similar to the current article in the same category.
How to implement related article recommendations in the template
Generally, related article recommendations appear below the content of the article detail page. The following is an example of a typical template code that shows how to usearchiveListtags to display related articles:
{# 假设您正在文章详情页的模板文件中 #}
{# 在此处展示完当前文章的主要内容，例如：{{archive.Content|safe}} #}
<div class="related-articles-section">
<h2>相关推荐</h2>
<ul>
{% archiveList relatedArticles with type="related" limit="5" like="keywords" %}
{# 上述代码会尝试获取最多5篇基于关键词的相关文章。
如果想基于手动关联推荐，请将 like="keywords" 改为 like="relation"
如果想基于同分类临近文章推荐（默认行为），可以移除 like 参数。
#}
{% for item in relatedArticles %}
<li>
<a href="{{item.Link}}" title="{{item.Title}}">
{% if item.Thumb %}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% else %}
{# 如果没有缩略图，可以显示一个默认图片或文字 #}
<img src="/public/static/images/default-thumb.jpg" alt="{{item.Title}}">
{% endif %}
<h3>{{item.Title}}</h3>
<p>{{item.Description|truncatechars:80}}</p>
<div class="meta-info">
<span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{item.Views}}</span>
</div>
</a>
</li>
{% empty %}
{# 如果没有找到任何相关文章，这里会显示提示信息 #}
<li><p>暂无相关文章推荐。</p></li>
{% endarchiveList %}
</ul>
</div>
In this code block:
- We first created a
divcontainer to wrap the entire related recommendation module. {% archiveList relatedArticles with type="related" limit="5" like="keywords" %}This line is the core, it callsarchiveList.relatedArticlesis the variable name defined for the article list we obtained, you canforUse it in the loop.type="related"Clearly tell the system that we want to get related articles.limit="5"Limited to displaying up to 5 articles at most. You can adjust this number based on the page layout and requirements.like="keywords"Specified that the system should match related articles according to the keywords of the current article. If you wish to recommend based on manual association, you can change it tolike="relation".
{% for item in relatedArticles %}Loop through each relevant article obtained.item.Link/item.Title/item.Thumb/item.Description/item.CreatedTime/item.ViewsThey are all article objectsitemFields that can be called, representing the article link, title, thumbnail, introduction, creation time, and page views.stampToDateIt is an auxiliary label for formatting timestamps, making the date display more friendly.{% empty %}It is a very practical label, ifarchiveListNo matching related articles were found.{% empty %}The content within the tags will be displayed, avoiding blank or unfriendly prompts on the page.
Optimization and注意事项
- Style customization: The above code only shows the structure, you need to customize it according to the overall style of the website.
.related-articles-sectionAdd the corresponding CSS styles to the internal elements to make the recommendation module look beautiful and generous. - Content Management：To ensure that the related recommendation feature works effectively, it is recommended that you fill in the article keywords carefully when editing articles in the background, or manually associate some high-quality articles that are highly relevant to the current content of the article.
- Location selection: The related recommendation module is usually placed below the article content, above the comment area, or in the sidebar, and the specific location can be adjusted according to your website layout and user habits.
By using the above method, you can provide your readers with relevant article recommendations flexibly and efficiently on the Anqi CMS website, thereby enhancing user experience and content value.
Frequently Asked Questions (FAQ)
Q1:likeTwo modes of parameters (keywordsandrelation) What are the differences?
A1:like="keywords"Content-based automated recommendation.The system will extract the keywords of the current article, then match the keywords with other articles on the website to find similar content for recommendation.This method depends on the accuracy of the keywords in your article.like="relation"The pattern is based on the associated articles manually set during the background article editing and recommended.If you want to precisely control the recommended content, you can choose manual association; if you want the system to match content intelligently, then choose keyword mode.
Q2: What will the page display if no related articles are found?
A2: In the sample code, we used{% empty %}Label. This means ifarchiveListThe label did not find any matching related articles after execution, the page will display{% empty %}The content inside the label, for example, "No related articles recommended." such prompt information. If there is none{% empty %}Label, then this area will be blank, no content or error will be displayed.
Q3: How to ensure that the recommended articles are truly 'relevant' rather than random?
A3: The key to ensuring the quality of relevant article recommendations lies in the backend content management.
- Keyword accuracy: When editing an article, be sure to fill in keywords that are highly relevant and accurate to the content of the article.
- Categorization planning: Categorize the article into the appropriate category, as the system will prioritize recommending articles in the same category by default.
- Manual associationFor particularly important articles, you can use the manual association feature on the backend to directly specify several high-quality related articles.
- Content optimizationEnsure that the content of the article itself is clear in its theme, which helps the system better understand its main point and match it.