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

How to intelligently display related article lists in the AnQiCMS template?

After we publish an excellent article, it is natural to hope that readers will continue to browse more interesting content on the website.This involves the skill of displaying the 'related articles' list at the bottom of the article detail page.A recommended article is excellent, not only can it effectively extend the user's stay on the website, improve the user experience, but also is very beneficial for the SEO optimization of the website and the in-depth mining of content.AnQiCMS (AnQiCMS) fully understands this and provides very concise and efficient template tags, allowing us to easily implement this feature.

Core mechanism:archiveListwith the tag andtype="related"Parameter

In the template system of AnQiCMS,archiveListThe tag is the universal key to obtain the list of articles. It is powerful and flexible, able to filter and display articles according to various conditions. The key to implementing the 'related articles' call lies inarchiveListSet a special parameter for the tag:type="related".

Whentypethe parameter torelatedthen,archiveListTags no longer require you to manually specify classification IDs, sorting methods, and other cumbersome information. Instead, they will automatically find 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 'related'?

How does AnQiCMS determine which articles are 'related' by default? Its intelligent logic is: based on the current article ID, fromthe same categorySearch in the publish time or IDClose toThis article is displayed. This default logic based on categorization and proximity typically meets the basic needs of most websites, ensuring relevance.

However, if you have a finer control need for the definition of “relevant”,archiveListthe tags also providelikeparameter to extend this smart matching:

  • based on keyword association (like="keywords")If you want to set the basis for judging related articles as the keywords used in the articles, you can setlike="keywords". The system will try to find other articles that match the current article's keyword tags. This is very useful for emphasizing the consistency of the content theme on the website.
  • Based on manual association in the background (like="relation"): When you edit articles in the AnQi CMS backend, you can manually specify specific "related documents" for the articles. If you want the template to only display the content you carefully select, through settinglike="relation"The template can accurately call the associated articles you have configured in the background. This provides the highest degree of content control.

It should be noted that,type="related"TagCan only be used on the article detail page.Because it needs the context of the current article to determine relevance.

How to implement a related article list in the template?

Now, let's see how to add this code to your Anqi CMS template. Typically, this part of the content is placed on the article detail page (for exampletemplate/default/article/detail.htmlAfter the main content of the custom detail template.)

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

<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 label.
    • archives: The list of relevant articles obtained will be assigned to a variable namedarchivesfor use in subsequent operations.forLoop usage.
    • type="related": Clearly tell AnQiCMS that we want to get the recommended content related to the current article.
    • limit="5": Control the number of related articles displayed, here set to a maximum of 5. You can adjust this number according to the page layout and requirements.
  2. {% for item in archives %}: TraversearchivesEach article in the variable. Inside the loop,itemrepresents the single article object being traversed.
  3. {{ item.Link }}: Output the link to the relevant article.
  4. {% if item.Thumb %}<img src="{{ item.Thumb }}" ...>{% endif %}: Determine if the article has a thumbnail. If it does, display it. Thumbnails can effectively enhance the visual appeal of the list.
  5. <h4>{{ item.Title }}</h4>: Display the title of the related article.
  6. <p class="description">{{ item.Description|truncatechars:80 }}</p>: Show the article's introduction and usetruncatecharsThe filter truncates it to 80 characters to avoid layout issues caused by long content.
  7. {{ stampToDate(item.CreatedTime, "2006-01-02") }}: UsestampToDateThe tag formats the article's creation timestamp into the form of “Year-Month-Day”.
  8. {{ item.Views }}: Display the number of times the article has been read.
  9. {% empty %}<li>暂无相关文章推荐。</li>{% endfor %}: This is very useful.forLoop feature. IfarchivesThe list is empty (i.e., no related articles are found), and it will display{% empty %}the content in the block, not blank.

Advanced Usage and Optimization Suggestions

  • BylikeParameter Fine-tuning RelevanceIf the default 'Same Category Adjacent Articles' logic does not meet your needs, don't forget to trylike="keywords"orlike="relation"To achieve more accurate recommendations, use the keyword tags or manual association features in the background.
  • Control the number of displays.:limitThe parameter is very flexible, in addition to setting a fixed number, you can also uselimit="2,5"such a format, indicating that the 2nd item (index starts from 0, actually the 3rd item) starts, and displays 5 articles.
  • Style beautification: The above code only provides the HTML structure, you need to add appropriate CSS styles for elements according to your website design to make them consistent with the overall page style.related-articles-section/related-articles-list/related-article-thumbetc. elements add suitable CSS styles 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