How to display a list of recommended content related to the current article?

In content operation, guiding users to discover more interesting content is one of the key strategies to improve user experience and extend the time spent on the website.AnQiCMS provides very flexible and powerful functions to help us easily achieve the goal of displaying a list of recommended content related to the current article.

Why do you need related recommended content?

Imagine a reader immersed in an exquisitely written article. If they can smoothly discover more content closely related to the current topic and equally精彩, it will undoubtedly greatly enhance their browsing experience.This not only increases the PV (page views) of the website and effectively reduces the bounce rate, but also enhances the search engine's ability to crawl and understand the website's content by building a dense internal link network, thereby optimizing the SEO performance.

Implement the core mechanism of related recommendation in AnQi CMS

AnQi CMS provides a very convenient feature to achieve this, that is, by using its powerfularchiveListTemplate tag. This tag is used to obtain various document lists as a '万能钥匙', by pairing different parameters, we can achieve various content display needs, including related recommendations.

To display recommended content related to the current article, we mainly usearchiveListlabel'stype="related"The parameter tells the system that we want to obtain a list of recommended items related to the content of the article we are currently browsing.

The system receivestype="related"After the command, it will intelligently match the closest other articles based on the category, tags, and content similarity of the current article.This automatic matching mechanism usually provides good recommendation effects, as it can identify similar topics that users may be interested in.

How to control the relevant recommendations more accurately?

If you wish to control related recommendations more accurately,archiveListthe tags also providelikethe parameter can further refine the recommendation logic:

  1. Keyword-based recommendation (like="keywords")If the current article is set with keywords, the system will search for other articles containing the same keywords throughout the entire site.This is very effective for articles with clear topic tags or keywords, ensuring the tightness of recommended content.{% archiveList archives with type="related" like="keywords" limit="5" %}

  2. Manual association recommendation based on backend (like="relation")For particularly important articles, you may want to have full control over the recommended content. Anqi CMS allows you to manually associate specified articles in the article editing background. When you uselike="relation"When the parameter is set, the system will only display the recommended content you manually associated, ensuring the accuracy of recommendations and operational flexibility. For example:{% archiveList archives with type="related" like="relation" limit="5" %}

Application: Display related recommendations on the article detail page

We usually place related recommended content at the bottom of the article detail page or in the sidebar area.These positions do not disturb the main content reading and can provide extended reading opportunities in a timely manner.

This is an example of a template code that displays 5 related recommended articles at the bottom of an article detail page:

{# related 相关文档列表展示 #}
<div class="related-articles">
    <h3>相关推荐</h3>
    <ul>
    {% archiveList archives with type="related" limit="5" %} {# 设置最多显示5篇相关文章 #}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" alt="{{item.Title}}" class="article-thumb"> {# 假设item.Thumb是文章缩略图 #}
                <h4>{{item.Title}}</h4>
                <p>{{item.Description|truncatechars:80}}</p> {# 截取文章描述的前80个字符 #}
                <time>{{stampToDate(item.CreatedTime, "2006-01-02")}}</time> {# 格式化文章发布日期 #}
            </a>
        </li>
        {% empty %}
        <li>暂无相关推荐内容。</li> {# 如果没有相关内容，显示此提示 #}
        {% endfor %}
    {% endarchiveList %}
    </ul>
</div>

Code explanation:

  • {% archiveList archives with type="related" limit="5" %}: This is a core tag that indicates the system to retrieve the list of related documents and assign the result toarchivesVariables, limited to display at most 5 articles.
  • {% for item in archives %}: Loop through each related article obtained.
  • {{item.Link}}: Output the article link address.
  • {{item.Thumb}}The thumbnail URL of the article (if the article has a thumbnail).
  • {{item.Title}}The title of the article.
  • {{item.Description|truncatechars:80}}The introduction of the article, and usetruncatecharsThe filter truncates it to a maximum of 80 characters to prevent the description from being too long and affecting the layout.
  • {{stampToDate(item.CreatedTime, "2006-01-02")}}: The creation timestamp of the article is formatted to the date format of "Year-Month-Day".
  • {% empty %}This is a very friendly usage, whenarchivesThe list is empty (i.e., no relevant articles are found) and will display<li>暂无相关推荐内容。</li>To avoid blank pages or errors on the page."),

Optimization suggestions and **practice

  1. Reasonably set the display quantity:BylimitThe parameter controls the number of recommended contents. Generally speaking, a range of 5 to 8 articles is appropriate, as it provides enough choices without making the page too long.
  2. Pay attention to visual attractiveness:Match the article thumbnail{{item.Thumb}}Or the featured image{{item.Logo}}It can significantly increase click-through rate. A clear, attractive image is more likely to stimulate readers' desire to click than plain text.
  3. Improve content relevance:Ensure that the categories, tags, and keywords are set accurately and representatively when the article is published. High-quality metadata is the foundation of the system's intelligent recommendation.
  4. Use manual association:For articles or content you want to highlight on the website, it is recommended to manually associate them using the 'related documents' feature in the background.This ensures that the user is directed to the next step you carefully plan while reading the core content.

With these flexible configurations and practical template tags, AnQi CMS can help you easily build a website with more interactivity and user stickiness, allowing every visitor to freely navigate through your content ocean.

Frequently Asked Questions (FAQ)

1. How can I check if my recommended content is not displayed or the number of displayed items is incorrect?First, check that your article content is sufficient and that there are enough articles that belong to the same category or have similar tags/keywords as the current article. Second, make sure that the template code inarchiveListlabel'slimitParameter settings are reasonable, for examplelimit="5". If you have setlike="relation"Please check if the article backend has manually associated with other articles.Finally, check if the article has a thumbnail or abstract. If the template calls for it and the content is missing, it may cause display errors.

2. Can I make the recommended content not limited to the same category?Of course. Anqi CMS'sarchiveListThe tag is intype="related"In this mode, it will prioritize articles in the same category by default, but its intelligent matching mechanism will also refer to tags and keywords. If you want to break the category restriction, you can try toarchiveListUse explicitlylike="keywords"Parameters. This way, the system will be more focused on