How to display the AnqiCMS related document list on the front page to increase content relevance and user stay time?

In content operation, we all hope that users can stay longer on the website and browse more content.A well-written article is indeed important, but how to connect it with other relevant content to form a content matrix is the key to improving user experience and reducing the bounce rate.Imagine, after reading an article about 'AnQi CMS core features', if the page below can automatically recommend 'How to use AnQi CMS to build an e-commerce site' or 'AnQi CMS template creation tutorial', wouldn't it be more attractive to encourage them to continue exploring?

This is the topic we are discussing today: how to cleverly display the list of related documents on the front page of Anqi CMS, which can not only increase the relevance of the content but also effectively extend the user's stay on the website.

Why is it so important to display relevant documents?

It is not enough to just publish content when we are building website content.To maximize the value of each piece of content, we need to think about how to guide users to discover more.

  1. Improve user experience:Users who finish reading an article will feel convenient and considerate if they can immediately see the next step they might be interested in reading, this seamless guidance will make them feel convenient and considerate.
  2. Reduce bounce rate:When users find the relevant content they are interested in, they will not easily leave the website but continue to click and browse, thereby effectively reducing the website's bounce rate.
  3. Extend dwell time and increase page views:More clicks mean longer dwell time and more page views, which is crucial for the overall data performance of the website.
  4. Optimize SEO (Search Engine Optimization):Internal links are an important component of SEO.By reasonably recommending relevant content in the article, we can build a strong internal link structure, helping search engines better understand the theme of the website and improve the weight and ranking of the page.

The secret weapon of AnQi CMS:archiveListTag

AnQi CMS provides a powerful and flexible template tag system, where,archiveListLabels are a powerful tool for achieving content association and display.It can help us dynamically pull and display document lists based on various conditions such as categories, tags, recommended attributes, even custom fields.

Make good use ofarchiveListLabel, we usually need to first obtain the context information of the current page, such as the document ID being viewed by the user, the category ID, keywords, etc.archiveDetailLabels can help us complete the task well.

1. Get the context information of the current document.

Suppose we are on a document detail page (such asdetail.htmlorproduct/detail.htmlFirstly, it is necessary to obtain specific information about the current document in order to find relevant content later.

{# 假设我们正在文档详情页，archive变量已包含当前文档的所有信息 #}
{# 如果没有，可以使用 archiveDetail 标签来获取，例如：#}
{# {% archiveDetail currentArchive with name="Id" %} #}
{# {% set currentArchiveId = currentArchive %} #}
{# {% archiveDetail currentArchive with name="CategoryId" %} #}
{# {% set currentCategoryId = currentArchive %} #}

{# 实际开发中，通常在详情页，archive 变量是默认可用的，我们直接使用它 #}
{% set currentArchiveId = archive.Id %}
{% set currentCategoryId = archive.CategoryId %}
{% set currentArchiveKeywords = archive.Keywords %}

Thus, we have the ID, category ID, and keywords of the current document, which are important bases for constructing the list of related documents.

2. Display related documents according to different strategies.

Now, we can make use ofarchiveListtags, combined with different parameters, to implement various display strategies for related documents:

Strategy one: other documents under the same category

This is the most common and direct association method. Since the user is interested in the content of this category, they are likely to want to see other articles in the same category.

<section class="related-docs-by-category">
    <h3>同分类下其他文章</h3>
    <ul>
        {% archiveList relatedByCategory with type="list" categoryId=currentCategoryId limit="5" %}
            {% for item in relatedByCategory %}
                {# 避免显示当前文章本身，虽然安企CMS通常会智能处理，但手动判断更保险 #}
                {% if item.Id != currentArchiveId %}
                <li>
                    <a href="{{ item.Link }}">
                        {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" loading="lazy">{% endif %}
                        <h4>{{ item.Title }}</h4>
                        <p>{{ item.Description|truncatechars:80 }}</p>
                    </a>
                </li>
                {% endif %}
            {% empty %}
                <li>暂无同分类下其他文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

Strategy two: Based on keywords or manually associated documents

Of Security CMSarchiveListThe label is very practicaltype="related"A parameter that can intelligently recommend based on the keywords of the current document, even documents set by manual settings in the background.

<section class="related-docs-by-keywords">
    <h3>您可能还喜欢（根据内容相关性）</h3>
    <ul>
        {# type="related" 会根据当前文档的分类和关键词智能匹配，
           如果后台人工设置了相关文档，like="relation" 会优先展示人工关联的 #}
        {% archiveList relatedBySmart with type="related" like="keywords" limit="5" %}
            {% for item in relatedBySmart %}
                {% if item.Id != currentArchiveId %}
                <li>
                    <a href="{{ item.Link }}">
                        {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" loading="lazy">{% endif %}
                        <h4>{{ item.Title }}</h4>
                        <p>{{ item.Description|truncatechars:80 }}</p>
                    </a>
                </li>
                {% endif %}
            {% empty %}
                <li>暂无相关推荐。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

Strategy three: The latest released or most viewed documents

Sometimes, we may want to recommend the freshest content on the website or the most popular hot content, which can also effectively guide users to browse.

`twig

<h3>最新发布</h3>
<ul>
    {% archiveList latestDocs with type="list" order="id desc" limit="5" %}
        {% for item in latestDocs %}
            {% if item.Id != currentArchiveId %}
            <li>
                <a href="{{ item.Link }}">
                    <h4>{{ item.Title }}</h4>
                    <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                </a>
            </li>
            {% endif %}
        {% endfor %}
    {% endarchiveList %}
</ul>

<h3>热门文章</h3>
<ul>
    {% archiveList popularDocs with type="list" order="views desc" limit="5" %}
        {% for item in popularDocs %}
            {% if item.Id != currentArchiveId %}
            <li>
                <a href="{{ item.Link }}">
                    <h4>{{ item.Title }}</h4>
                    <span>浏览量: {{ item.Views }}</span>
                </a>