How to display a list of related articles below the article detail page?

In website operation, the list of 'related articles' below the article detail page is an important feature to enhance user experience, increase page views (PV), and extend the time users stay on the site.It can guide users to discover more interesting content, thereby enhancing the overall stickiness of the website, and also has a positive effect on search engine optimization (SEO).To implement this feature in AnQi CMS, it is due to its flexible template system and powerful tag function, the whole process is intuitive and efficient.

1. Understand the mechanism of calling 'related articles'

The template tags of Anqi CMS are the core for implementing various functions. We mainly use them to display related articles.archiveListThis tag. This tag can not only be used to display a list of ordinary articles, but also specially provides atype="related"parameter for intelligently filtering out recommended content related to the current article.

Whentypethe parameter to"related"At that time, the system will automatically find other articles similar in content or close in time to the current article by its ID in the category it belongs to. You can further throughlimitParameters to control the number of articles displayed, for examplelimit="5"Indicates that 5 related articles are displayed.

II. Determine the location of the template file

First, you need to find the template file corresponding to the article detail page. According to the template design conventions of Anqi CMS, the default template for the article detail page is usually located{模型table}/detail.htmlFor example, if your article belongs to the "article model", then it is usuallyarchive/detail.html. If you have customized a template for a specific article or category, please perform the operation in the corresponding custom template file.

3. Write the template code to display the list of related articles.

After finding the article detail page template file, you can add the following code snippet at an appropriate position on the page (usually below the article content, above or below the comments) to call and display the related article list: 

{% archiveList archives with type="related" limit="5" %}
    {% if archives %}
    <div class="related-articles-section">
        <h3>相关推荐</h3>
        <ul class="related-articles-list">
        {% for item in archives %}
            <li class="related-article-item">
                <a href="{{item.Link}}" title="{{item.Title}}">
                    {% if item.Thumb %}
                        <img src="{{item.Thumb}}" alt="{{item.Title}}" class="related-article-thumb">
                    {% endif %}
                    <span class="related-article-title">{{item.Title}}</span>
                </a>
            </li>
        {% endfor %}
        </ul>
    </div>
    {% endif %}
{% endarchiveList %}

Code analysis:

  • {% archiveList archives with type="related" limit="5" %}This is the core tag, which tells Anqi CMS to find related articles to the current article and store the results in a namedarchives.limit="5"Limited to displaying 5 articles.
  • {% if archives %}This is a conditional judgment to ensure that the entire "related recommendations" block is displayed only when relevant articles are found, to avoid the title of the page being empty.
  • <h3>相关推荐</h3>This is the title of the related article list, you can customize it according to the website style.
  • {% for item in archives %}If related articles are found, they will be traversed here.archiveseach article in the variable.
  • {{item.Link}}The link of the current looped article will be output.
  • {{item.Title}}Output the title of the current looped article.
  • {% if item.Thumb %}Check if the article has a thumbnail.
  • <img src="{{item.Thumb}}" alt="{{item.Title}}">If the article has a thumbnail, then display it.
  • {% endfor %}/{% endif %}/{% endarchiveList %}Corresponding toforloop,ifJudgment andarchiveListThe end tag of the tag.

You can adjust as needed.limitThe value, or add more article fields (such as{{item.Description}}Show the summary,{{stampToDate(item.CreatedTime, "2006-01-02")}}Show the publication date, etc.), to enrich the display of your related article list.

IV. Select the matching strategy for related articles (Advanced)

archiveListThe tag is intype="related"Based on that, it also provideslikeParameters, allowing you to control the matching logic of related articles more accurately:

  1. Match based on keywords (like="keywords")If you want the recommendation of related articles to be more focused on the similarity of content topics, you can use the keywords of the article. When you publish an article in the background, you will fill in the keywords. Uselike="keywords"Parameter, AnQi CMS will search for other articles with a high degree of overlap with the current article keywords for recommendation.Modified code example:

    {% archiveList archives with type="related" like="keywords" limit="5" %}
    {# ... 相同的for循环和展示逻辑 ... #}
{% endarchiveList %}

    Premise:Make sure your article has filled in the relevant keywords in the "Document Keywords" field in the background.This can be found and set in the 'Content Management' -> 'Publish Document' or 'Edit Document' interface.

  2. According to manual matching from the background (like="relation")In some cases, you may want to manually specify the relationship between certain articles, such as series articles or special reports.The AnQi CMS allows you to set "related documents" in the background document editing interface. Uselike="relation"Parameters, the system will only display the articles you manually associate.Modified code example:

    {% archiveList archives with type="related" like="relation" limit="5" %}
    {# ... 相同的for循环和展示逻辑 ... #}
{% endarchiveList %}

    Premise:You need to manually associate other articles when editing articles in the background. For specific operations, please refer to the documentation or the 'Other Parameters' section of the backend interface.

By flexibly using these parameters, you can tailor the relevant article recommendation list that best meets user needs according to the operation strategy and content characteristics of the website, effectively enhancing the interactivity and content value of the website.

Frequently Asked Questions (FAQ)

  1. Ask: Why did I add the code for related articles, but no articles are displayed at the bottom of the page?Answer: There may be several reasons. First, please check if your template code is correct, including the start and end tags of the labels.Secondly, ensure that your website has enough content and that there is a certain degree of relevance between the content (such as the same category, the same keywords, or manual association), because if there are no matching articles, the list will naturally be empty.Finally, checklimitIs the parameter set to 0 or a negative number, which can also cause the articles not to be displayed?

  2. Question:type="related"andlike="keywords"/like="relation"What is the difference? Should I choose this way?Answer:type="related"It is a basic instruction that tells the system to search for related articles. By default, it will broadly match based on factors such as the category and publication time of the current article. Andlike="keywords"andlike="relation"This istype="related"Refine the matching logic:

    • like="keywords"We will prioritize matching based on the keywords of the article, with a greater emphasis on the similarity of the content theme.If you want users to see articles that discuss the same topic as the current article but may come from different categories, this option is very useful.
    • like="relation"It will only display the other articles you manually associate while editing articles in the background.This is suitable for scenarios where you have explicit series articles, thematic recommendations, or need manual intervention in recommendation lists.Choose which way depends on your specific needs. If you want the system to make intelligent recommendations and the article keywords are set up well, you can uselike="keywords". If you need to control the recommended content precisely, you can choose:like="relation".

  3. Question: Can I display the publication date or summary of the article in the list of related articles?Of course you can. In{% for item in archives %}In the loop, besides{{item.Title}}and{{item.Link}}you can also use otheritemfields to enrich the display content. For example, to display the publication date, you can use{{stampToDate(item.CreatedTime, "2006-01-02")}}; to display the article summary, you can use{{item.Description}}. Just add these variables to your<li> tags and combine them with HTML and CSS to layout.