In website operation, the related articles recommendation feature on the article detail page can not only effectively enhance the user's browsing depth within the site and reduce the bounce rate, but also indirectly improve the overall SEO performance of the website by guiding users to discover more valuable content.AnQiCMS as a content management system that focuses on efficiency and scalability, provides flexible template tags, making it intuitive and convenient to implement this function.

Next, let's discuss how to elegantly implement related article recommendations on the article detail page of AnQiCMS.

Core Feature Overview and Preparation

The AnQiCMS template system uses syntax similar to the Django template engine, which means we can call data through specific tags and control page logic. The template for the article detail page is usually located{模型table}/detail.htmlFor example, the corresponding article model might bearticle/detail.htmlAll operations related to content will revolve aroundarchiveThis core variable, which represents the details of the document being viewed.

In order to display related articles, we need to usearchiveListThe tag, it is a universal tag used in AnQiCMS to get the document list.By passing different parameters, we can achieve various complex list queries, of course, including recommendations for related articles.

Method one: Using the built-in "related documents" function of AnQiCMS

AnQiCMS provides a very intuitive "related document" type, making the recommendation function extremely simple. You just need to usearchiveListLabel, andtypethe parameter to"related"Just do it.

Whentype="related"At that time, AnQiCMS will intelligently search for and recommend other documents in the same category or with similar content based on the current article ID.This approach is very suitable for the needs of most websites, without complex configuration, it can achieve good recommendation effects.

How to make recommendations more accurate? UnderstandlikeParameter

Intype="related"On this basis, you can further utilizelikeParameters to refine the matching logic of relevant articles:

  • like="keywords": If your articles are set with keywords or tags, AnQiCMS will match other articles based on the keywords of the current article.This usually brings more relevant content recommendations because it directly relates to the theme of the article.
  • like="relation"This option is used when you want to manually specify 'related articles' for each article in the background.In the document editing interface, AnQiCMS allows you to set specific associated articles.Enable this parameter and the system will only display the articles you manually associate.

Generally speaking,like="keywords"Combining automatically extracted keywords or manually added tags can meet most needs because it has a high degree of automation and can maintain the relevance of recommendations.

Code example: display related article title and link

Suppose we want to display 5 related articles at the bottom of the article detail page, and show their titles and links, you can write the template code like this:

<section class="related-articles">
    <h2>相关文章推荐</h2>
    <ul>
        {% archiveList relatedArticles with type="related" like="keywords" limit="5" %}
            {% for item in relatedArticles %}
            <li>
                <a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
            </li>
            {% empty %}
            <li>暂时没有相关推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

In this code block:

  • We defined a namedrelatedArticlesThe variable is used to store the query results.
  • type="related"Instructs the system to search for relevant documents.
  • like="keywords"The system is instructed to match relevance based on keywords.
  • limit="5"Limited the number of recommended articles to 5.
  • {% empty %}The block will display a prompt when no related articles are found, to avoid the page from appearing blank.

Method two: Recommend based on article categories (supplementary strategy)

Althoughtype="related"Powerful, but sometimes you may want to limit the recommendation more explicitly to the category of the current article.For example, an article about 'product review' may only recommend other articles in the same 'product review' category.

To achieve this, we need to get the current article's category ID and then usearchiveListtags to query by category ID.

Code example: Display related articles in the same category

<section class="category-related-articles">
    <h2>同分类下推荐</h2>
    <ul>
        {% archiveList categoryRelated with categoryId=archive.CategoryId excludeId=archive.Id limit="5" %}
            {% for item in categoryRelated %}
            <li>
                <a href="{{ item.Link }}" title="{{ item.Title }}">{{ item.Title }}</a>
            </li>
            {% empty %}
            <li>暂时没有同分类推荐文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

Here:

  • categoryId=archive.CategoryId: We go througharchive.CategoryIdGet the category ID of the current article and pass it toarchiveList.
  • excludeId=archive.Id: This parameter is very important, it ensures that the recommended list will not include the article currently being viewed.

Practical suggestions and optimization

  1. quantity control:limitThe parameter is your helper. It is usually recommended to have 3 to 8 articles in the range, which can provide enough options without appearing redundant.
  2. rich display content：In addition to the title and link, you can also consider adding a thumbnail of the article to the recommendation list ({{ item.Thumb }}or{{ item.Logo }})、a brief description ({{ item.Description }}) or the publication time ({{ stampToDate(item.CreatedTime, "2006-01-02") }}) to make the recommendation more attractive.
  3. Style beautification: Although template tags are responsible for data calls, the final display effect still needs to be combined with CSS styles. By addingsection/ul/lito elements with appropriate class names (as shown in the above example)related-articles), you can easily beautify the layout and visual effects of the recommendation list with CSS.
  4. Avoid empty recommendations: In allarchiveListlabel's{% for %}cycles, it is recommended to add{% empty %}Block. Even if no recommended articles matching the conditions are found