How to display a list of recommended documents related to the current document on the document detail page?

In website content operation, providing users with relevant recommended content can not only effectively improve the depth and stay time of page browsing, but also optimize the user experience and indirectly help improve the SEO performance.In AnQiCMS (AnQi Content Management System), implementing this feature is both flexible and direct.Next, we will discuss how to seamlessly integrate and display the recommended document list closely related to the current document on the document detail page.

Core value: Why should recommended documents be displayed on the document detail page?

Imagine when a user finishes reading an interesting article, if there is no guidance, they are likely to leave the website.And a carefully planned list of recommended documents, as if it opens more doors for exploration.This can not only make users stay longer on your website and discover more valuable content, but also means higher page views, lower bounce rates, and page weight enhancement through internal links, all of which are positive signals that search engines welcome.

Understand how AnQiCMS defines “related”

In AnQiCMS, the definition of “related documents” is multi-dimensional, you can choose flexibly according to your actual needs:

  1. Based on content similarity (default intelligent recommendation):The intelligent mechanism built into AnQiCMS will automatically match and recommend documents with higher relevance based on the current document's classification, keywords, and even the similarity of the content text.This is the most commonly used and convenient way.
  2. Based on category association:Documents in the same category naturally have certain relevance.
  3. Based on tag association:Documents with the same label, even if they belong to different categories, can establish strong associations through the label.
  4. Manually specify the association:When editing documents in the AnQiCMS background, you can also manually specify some specific related documents for the current document to achieve more accurate editing control.

Prepare the work for implementing the recommendation list on the document detail page

Before starting to add code, make sure you understand the template structure of AnQiCMS. Usually, the template file corresponding to the document detail page is stored in a similar{模型table}/detail.htmlpath, for examplearticle/detail.htmlorproduct/detail.html. You need to edit these files.

In addition, to make the recommendation mechanism more effective, your document content should already be reasonably set with categories, keywords, and tags, which are the basis for AnQiCMS intelligent matching.

Core implementation: utilizingarchiveListDisplay recommended documents

AnQiCMS provides powerfularchiveListtags, we can cleverly utilize itstype="related"parameters to automatically obtain relevant documents.

In your document detail page template (such asarticle/detail.htmlIn the text, find the location where you want to display the recommended document list, which is usually below or in the sidebar of the article. Then, you can insert the following code snippet:

{# 推荐文档列表区域开始 #}
<div class="related-articles">
    <h3>您可能也喜欢：</h3>
    <ul>
        {# 使用 archiveList 标签获取相关文档。type="related" 是关键，它会智能匹配。 #}
        {# limit="5" 表示我们希望显示最多5篇推荐文章。 #}
        {% archiveList archives with type="related" limit="5" %}
            {% for item in archives %}
            <li>
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    {# 如果文档有缩略图，可以显示出来，增加视觉吸引力 #}
                    {% if item.Thumb %}
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="related-thumb">
                    {% endif %}
                    <span class="related-title">{{ item.Title }}</span>
                    {# 简短的描述也能帮助用户判断是否点击 #}
                    <p class="related-description">{{ item.Description|truncatechars:80 }}</p> {# 截取80个字符并添加省略号 #}
                </a>
            </li>
            {% empty %}
            {# 如果没有找到相关文档，这里会显示友好提示 #}
            <li>目前没有相关推荐文档。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>
{# 推荐文档列表区域结束 #}

The core of this code is in{% archiveList archives with type="related" limit="5" %}.

  • archivesIt is a custom variable name that will store the recommended document list data returned by AnQiCMS.
  • type="related"Tell AnQiCMS that we need to retrieve the recommended content related to the current document now.AnQiCMS will intelligently select the most suitable document based on its internal algorithm.
  • limit="5"The number of recommended documents is limited, you can adjust this number according to the page layout and actual needs.

In{% for item in archives %}the loop,itemRepresents the data object of each recommended document. You can access various properties, such as:

  • item.Link: The URL link of the recommended document.
  • item.Title: The title of the recommended document.
  • item.Thumb: The thumbnail URL of the recommended document.
  • item.Description: A brief description of the recommended document.
  • item.CreatedTime: The publication time of the document (you may need to use{{stampToDate(item.CreatedTime, "2006-01-02")}}for formatting).

By flexibly combining these fields, you can create a recommendation list that matches the style of your website.

Advanced optimization and personalized recommendation strategies

In addition to the basic ones mentioned above.type="related"Pattern, AnQiCMS also provides more detailed control options to make your recommendation system more intelligent and personalized:

  • Keyword-based intelligent recommendation (like="keywords")If you want the recommended documents to be more focused on the keyword association of the current document, you canarchiveListaddlike="keywords"Parameter. AnQiCMS will try to match the keywords of the current document with those of other documents to provide more accurate recommendations.

    {% archiveList archives with type="related" limit="5" like="keywords" %}
    {# ... 推荐文档列表代码 ... #}
{% endarchiveList %}

  • Manually specify the recommendation of related documents (like="relation")The AnQiCMS backend allows operators to manually specify other documents related to the current document. If you want to prioritize displaying these documents carefully selected by the editor, you can uselike="relation".

    {% archiveList archives with type="related" limit="5" like="relation" %}
    {# ... 推荐文档列表代码 ... #}
{% endarchiveList %}

    This method requires you to manually establish associations for each document in the document editing interface on the backend.

  • Combine categories and tags for supplementary recommendationsIftype="related"Not enough recommendations are returned, or you may want to show more documents from the same category or with common tags, you can add morearchiveListLabel. For example, to get other documents under the current document category (excluding the current document itself):

    {# 假设 archive 是当前文档对象，已通过 archiveDetail 获取 #}
{% archiveList categoryArchives with categoryId=archive.CategoryId excludeId=archive.Id limit="3" %}
    {# ... 显示分类内的其他文档 ... #}
{% endarchiveList %}

    HereexcludeId=archive.IdIt is to avoid the current document being recommended in the recommendation list.

Points to note

  • Style and beautification:The code only provides the HTML structure, and the recommended visual style of the list (such as font size, image layout, spacing, etc.) needs to be beautified according to the overall design of the website, through the CSS stylesheet.
  • Handling when no content is present:Must be retained{% empty %}A tag block that ensures that when no recommended document is found, the page will not be blank, but will display a friendly