How to retrieve and display related article lists based on the current article in AnQiCMS templates?

How to intelligently display related article lists in AnQiCMS template?

After publishing a wonderful article, we naturally hope that readers will continue to browse more interesting content on the website.This involves the technique of displaying the 'Related Articles' list at the bottom of the article detail page.An excellent article recommendation, which can effectively extend the user's stay on the website, enhance user experience, and is also very beneficial for the website's SEO optimization and content depth mining.Auto CMS (AutoCMS) knows this and provides very concise and efficient template tags, allowing us to easily implement this feature.

Core Mechanism:archiveListTags andtype="related"Parameters

In the template system of AnQiCMS,archiveListThe label is the universal key to get the article list. It is powerful and flexible, and can filter and display articles according to various conditions. The key to implementing the "related articles" call is to...archiveListLabel sets a special parameter:type="related".

Whentypeparameter settingsrelatedwhenarchiveListTags no longer require you to manually specify category ID, sorting method, and other tedious information, but will automatically find and display related articles based on the context of the current article.This design greatly simplifies the work of template developers, allowing you to focus on content presentation.

How does AnQiCMS judge 'relevant'?

How does AnQiCMS determine which articles are 'related' by default? Its intelligent logic is: based on the current article's ID,in the same categoryLooking for in the release time or IDNearbyThe article is displayed. This default logic based on classification and proximity usually meets the basic needs of most websites and ensures relevance.

However, if you have more refined control requirements for the definition of “related”,archiveListthe tag also provides,likeparameters to expand this intelligent matching:

  • based on keyword association (like="keywords")If you want the basis for judging related articles to be the keywords used in the articles, you can setlike="keywords". Thus, the system will try to find other articles that match the current article's keyword tags. This is very useful for websites that emphasize the consistency of content themes.
  • Based on manual association in the background (}]like="relation")English: When you edit articles in the Anqi CMS backend, you can manually specify specific "related documents" for the article. If you want the template to only display these carefully selected contents, you can setlike="relation"，Template can accurately call the associated articles you have configured in the background. This provides the highest level of content control.

It is worth noting that,type="related"tagsCan only be used on the article detail page.Because it needs the context information of the current article to judge the relevance.

How to implement the list of related articles in the template?

Now, let's see how to add this code to your security CMS template. Typically, this part of the content is placed on the article detail page (for exampletemplate/default/article/detail.html或You customize the detail template) of the main content after.

{# 假设这是您的文章详情页模板，在展示完文章内容后，可以添加以下代码来显示相关文章 #}

<article>
    {# ... 这里是文章标题、发布时间、正文内容等，使用 archiveDetail 标签或 {{archive.*}} 直接调用 ... #}

    <div class="article-content">
        {{- archiveDetail articleContent with name="Content" render=true -}}
        {{ articleContent|safe }}
    </div>

    {# 相关文章列表区域开始 #}
    <div class="related-articles-section">
        <h3>相关推荐</h3>
        <ul class="related-articles-list">
            {% archiveList archives with type="related" limit="5" %} {# 调用相关文章，限制显示5篇 #}
                {% for item in archives %}
                    <li>
                        <a href="{{ item.Link }}">
                            {% if item.Thumb %}
                                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="related-article-thumb">
                            {% endif %}
                            <div class="related-article-info">
                                <h4>{{ item.Title }}</h4>
                                <p class="description">{{ item.Description|truncatechars:80 }}</p> {# 截取描述，显示前80个字符 #}
                                <div class="meta">
                                    <span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                                    <span>阅读量：{{ item.Views }}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                {% empty %}
                    <li>暂无相关文章推荐。</li>
                {% endfor %}
            {% endarchiveList %}
        </ul>
    </div>
    {# 相关文章列表区域结束 #}

</article>

Code analysis:

  1. {% archiveList archives with type="related" limit="5" %}: This is the core tag.
    • archives: We will assign the list of related articles obtained to a variable namedarchivesso that it can be used in subsequent operations.forUsed in the loop.
    • type="related": Clearly inform AnQiCMS that we want to get the recommended content related to the current article.
    • limit="5": Control the number of related articles displayed. Here it is set to a maximum of 5 articles. You can adjust this number according to page layout and requirements.
  2. {% for item in archives %}TraversalarchivesEach article in the variable. Inside the loop,itemrepresents the current article object being traversed.
  3. {{ item.Link }}: Output the link to the relevant article.
  4. {% if item.Thumb %}<img src="{{ item.Thumb }}" ...>{% endif %}: 判断文章是否有缩略图，如果有则显示。缩略图能有效提升列表的视觉吸引力。
  5. <h4>{{ item.Title }}</h4>: 显示相关文章的标题。
  6. <p class="description">{{ item.Description|truncatechars:80 }}</p>: Show the article summary, and usetruncatecharsthe filter to truncate to 80 characters to avoid affecting the layout due to too long content.
  7. {{ stampToDate(item.CreatedTime, "2006-01-02") }}: UsestampToDateLabel the article creation timestamp in the format of “Year-Month-Day”.
  8. {{ item.Views }}: Show the number of times the article has been read.
  9. {% empty %}<li>暂无相关文章推荐。</li>{% endfor %}: This is very useful.forLoop feature. Ifarchives列表为空（即没有找到相关文章），就会显示 English{% empty %}块中的内容，而不是空白。

进阶使用与优化建议

  • Passlike参数微调相关性If the default 'Nearby Articles in the Same Category' logic does not meet your needs, don't forget to trylike="keywords"orlike="relation"to achieve more accurate recommendations through the background keyword tags or manual association feature.
  • Control the number of displayed items:limitThe parameter is very flexible, in addition to setting a fixed number, you can also uselimit="2,5"This format, indicating that from the 2nd item (index starts from 0, which is actually the 3rd item), display 5 articles.
  • Style beautification：The above code only provides the HTML structure, you need to add appropriate CSS styles according to your website design, making them consistent with the overall page style.related-articles-section/related-articles-list/related-article-thumbAdd suitable CSS styles for elements such as these to make them consistent with the overall page style.
  • Continuously optimize: Observe user behavior data, such as the click-through rate of related articles, regularly