How to display related article recommendations at the bottom of the AnQiCMS article detail page?

In AnQiCMS, adding a related articles recommendation feature to the article detail page can not only effectively increase the user's stay time on the website, guide them to discover more interesting content, but also have a positive effect on the website's SEO performance.It is not difficult to achieve this function with the flexible and powerful template tag system provided by AnQiCMS.

Understanding the template structure of AnQiCMS

In AnQiCMS, the page layout and content display of the website are controlled by template files. The template files for the article detail page are usually located in your template directory, the specific path may be/template/{你的模板名称}/archive/detail.html. If you are using the default template, it is very likely thatdefault/archive/detail.html. Understanding this file is the first step in implementing related article recommendations, as all changes will be made here.

AnQiCMS's template language is similar to Django template engine, variables are passed through double curly braces{{变量名}}Display, while logical control (such as loops, conditional judgments) uses single curly braces and percent signs{% 标签 %}Define.

The core of realizing relevant article recommendation:archiveListTag

We need to use the AnQiCMS provided on the bottom of the article detail page to display related articlesarchiveListTemplate tag. This tag is specifically used to retrieve document lists and provides various parameters to meet different requirements, including the function of retrieving "related articles".

Add recommended content to the article detail page, you need to edit/template/{你的模板名称}/archive/detail.htmlfile. Find the end of the main content of the article, usually at{{archive.Content|safe}}After this code, or at any location where you wish to display recommended content.

The following are several common ways to implement article recommendation and their code examples:

1. Based on the "Automatic" related recommendations of the current article

This is the simplest and most commonly used method. AnQiCMS, by default, when you usetype="related"When a parameter is specified, it will intelligently retrieve the closest other document to the current article, which is usually an article in the same category or with a similar publication time.

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

Code explanation:

  • <div class="related-articles">...</div>This is a container, you can add styles according to your website design.
  • {% archiveList archives with type="related" limit="5" %}This is the core tag.
    • archivesDefine a variable name to store the list of articles obtained.
    • type="related": Indicate the system to retrieve relevant articles.
    • limit="5": Limit the number of recommended articles to 5.
  • {% for item in archives %}...{% endfor %}: Loop through each article retrieved.
    • item: Represents the current article object in each loop.
    • {{item.Link}}Get the article link.
    • {{item.Title}}Get the article title.
    • {% if item.Thumb %}<img src="{{item.Thumb}}" alt="{{item.Title}}">{% endif %}Check if the article has a thumbnail, and display it if it does.item.ThumbIt will automatically provide the thumbnail path.
    • {{stampToDate(item.CreatedTime, "2006-01-02")}}: Format the article's publish timestamp to the "year-month-day" format.
  • {% empty %}<li>暂无相关文章推荐。</li>{% endempty %}: This is a very practical structure, whenarchiveListNo articles are retrieved, it will displayemptyBlock content, not blank.

2. Relevant recommendations based on the article's 'keywords'

If you want the recommended articles to be highly relevant to the current article's keywords (Tag), you can uselike="keywords"The parameter indicates that AnQiCMS will search for other related articles based on the first keyword of the current article.

<div class="related-articles-by-keywords">
    <h3>基于关键词的相关推荐</h3>
    <ul>
    {% archiveList archives with type="related" like="keywords" limit="5" %}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}" title="{{item.Title}}">
                <span class="article-title">{{item.Title}}</span>
                <span class="article-date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </a>
        </li>
        {% empty %}
        <li>暂无基于关键词的相关推荐。</li>
        {% endfor %}
    {% endarchiveList %}
    </ul>
</div>

This example is similar to the first, but it is in thearchiveListtag added.like="keywords"Parameters, AnQiCMS will automatically handle the matching logic.

3. Based on the relevant recommendations of 'Manual association in the background'

AnQiCMS also supports manually associating other articles in the background article editing interface. If you have already set up these manual associations in the background and want to display them, you can uselike="relation"Parameter.

<div class="related-articles-by-relation">
    <h3>手动关联推荐</h3>
    <ul>
    {% archiveList archives with type="related" like="relation" limit="5" %}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}" title="{{item.Title}}">
                <span class="article-title">{{item.Title}}</span>
                <span class="article-date">{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </a>
        </li>
        {% empty %}
        <li>暂无手动关联推荐。</li>
        {% endfor %}
    {% endarchiveList %}
    </ul>
</div>

Similarly, just modifylikethe parameters. Please note that if the article has not been manually associated, or if the selected 'related' logic does not match any articles,{% empty %}The block prompt will take effect.

Summary

By using the above methods, you can flexibly implement related article recommendation functions at the bottom of the AnQiCMS article detail page according to your own content strategy and needs.Choose the recommendation logic that best suits your website, paste the code snippet in the appropriate position of the article detail page template, save the file, and refresh the website page to see the effect.Remember to add appropriate CSS styles to the recommended block to keep it consistent with the overall design style of your website and provide a better user experience.

Frequently Asked Questions (FAQ)

**1. How do I recommend articles not in the current category, or only recommend certain specific categories?