How to display the list of recommended articles related to the current article?

In website operation, recommending related articles to readers is an important strategy to enhance user experience, extend user stay time, and optimize SEO.After a reader finishes reading an article, if they can immediately see highly relevant recommendations related to the current content, it will undoubtedly greatly increase their interest in exploring the website further.The auto CMS understands this need and provides powerful and flexible functions to help users easily achieve this goal.

The 'Related Documents' feature in AnqiCMS

One of the core advantages of Anqi CMS lies in its powerful content management and template tag system. To display a list of recommended articles related to the current article, we mainly usearchiveListThis template tag.archiveListTags can be used to display regular article lists, category article lists, and also support displaying "related documents", which is exactly the core feature we need.

Core tags:archiveListapplication

archiveListTags are used to retrieve article data from the database and display it in a list form. It has rich parameters that can help us precisely control the filtering, sorting, and display of articles.

Basic Usage: Display the recommended list related to the current article

Anqi CMS'sarchiveListTags combinedtype="related"After the parameter, it can intelligently recognize the article being displayed on the current page, and automatically fromthe same categoryFind other articles similar or adjacent to the current article as recommendations.

The following is an example template code for implementing this function:

<div class="related-articles-section">
    <h3>相关推荐文章</h3>
    <ul>
        {% 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>
                    <span class="related-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                </a>
            </li>
            {% empty %}
            <li>暂无相关推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Code analysis:

  • {% archiveList archives with type="related" limit="5" %}: This is the core tag.
    • archives:You have defined the variable name for the recommended article list. You can{% for %}.
    • type="related"This parameter tells the CMS that we want to get articles related to the current article.The CMS will automatically match according to the category and ID of the current article.
    • 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 archives %}:Loop through the recommended article list obtained.
    • item.Link:Link address of the recommended article.
    • item.Title:Title of the recommended article.
    • item.Thumb:Recommended article thumbnail (if any). Thumbnails uploaded during backend document editing will be displayed here.
    • stampToDate(item.CreatedTime, "2006-01-02"): UsestampToDateThe filter formats the article's creation timestamp into the date format of “year-month-day”.
  • {% empty %}This is a very practical tag. IfarchiveListNo matching recommended articles were found,{% empty %}and{% endfor %}The content between will be displayed, which avoids blank pages or error prompts, enhancing the user experience.

More precise recommendation strategy: based on keywords or manual association

除了基于分类的自动推荐,archiveList标签还允许您通过like参数,进一步细化“相关”的定义。like参数需要与type="related"Used together.

  1. 基于关键词的推荐 (like="keywords")If you want to match more finely according to the keywords of the article, you canarchiveListtags inlike="keywords"Parameters. AnQi CMS will find other articles containing the same keywords under the same model based on the keywords set for the current article.

    <div class="related-articles-by-keywords">
        <h3>根据关键词推荐</h3>
        <ul>
            {% archiveList keywordArchives with type="related" like="keywords" limit="3" %}
                {% for item in keywordArchives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
                {% empty %}
                <li>暂无根据关键词推荐的文章。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>
    </div>
    
  2. Based on manual association recommendations (like="relation")In the document editing interface of Anqi CMS, you can manually associate other articles as recommendations.This method is most accurate because it is completely controlled by the operator.like="relation"Parameter.

    <div class="related-articles-manual">
        <h3>编辑精选推荐</h3>
        <ul>
            {% archiveList manualArchives with type="related" like="relation" limit="4" %}
                {% for item in manualArchives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
                {% empty %}
                <li>暂无编辑精选推荐文章。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>
    </div>
    

Flexible display of recommended article information

In the above examples, we mainly show the title, link, thumbnail, and publication time of the article. In fact,itemThe variable provides more field information of the articles, you can choose and combine according to your design requirements:

  • item.Description: The introduction or abstract of the article. If the content is longer, it can be combined withtruncatecharsFilters for slicing, such as{{ item.Description|truncatechars:80 }}.
  • item.Views: The number of views of the article, which can show the popularity of the article.
  • item.CategoryId: The ID of the category to which the article belongs, combinedcategoryDetailTags can obtain the name and link of the category.
  • item.Logo:Article cover first image (usually a larger image).
  • item.Images:Article cover image set, this is an array, you can use a loop to display multiple images.

Example: Combine abstract and views.

<div class="related-articles-full">
    <h3>更多相关推荐</h3>
    <ul>
        {% archiveList moreArchives with type="related" limit="6" %}
            {% for item in moreArchives %}
            <li>
                <a href="{{ item.Link }}">
                    <h4 class="related-title">{{ item.Title }}</h4>
                    {% if item.Description %}
                        <p class="related-description">{{ item.Description|truncatechars:120 }}</p>
                    {% endif %}
                    <div class="related-meta">
                        <span>发布于:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span>阅读量:{{ item.Views }}</span>
                    </div>
                </a>
            </li>
            {% empty %}
            <li>暂无更多相关推荐。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Summary

Using the powerful security features of the AnQi CMSarchiveListTags and flexible parameter settings, you can easily display a diverse list of recommended articles on the current article page.Whether it is smart recommendation based on article classification, precise matching based on keywords, or even high-quality content manually associated by operators, AnQi CMS can provide a simple and efficient implementation method.These features not only help to enhance the content depth and user engagement of the website, but also play a positive role in search engine optimization.


Common Questions (FAQ)

1. Why is my recommended article list not displaying any content?

  • Check the article properties:Make sure the current article is set to a category.type="related"Pattern mainly relies on the classification information of the article to find related content.
  • Number of contents:Ensure that your website has enough content, especially the number of articles in the same category. If there are too few articles, it may not be possible to find suitable recommendations.
  • Keyword/related settings:If you have usedlike="keywords"orlike="relation"Parameters,