How to display related documents or search results on the article list page?

How to make visitors find the content they are interested in faster, or seamlessly discover more related information after reading an article, is the key to improving user experience and website stickiness.AnQiCMS provides powerful and flexible template tags that can help us easily implement displaying related documents or search results on the article list page, thus building a more intelligent and interactive website.

Skillfully use content list tags to present dynamic information

One of the core advantages of Anqi CMS lies in its highly customizable template system. For article (or product) list pages, we mainly use a powerful template tag:archiveList. This tag is the foundation for building content lists, and by pairing with different parameters, it can achieve various content display methods, including regular lists, pagination lists, related document lists, and even search results.

UnderstandingarchiveListlabel'stypeParameters are crucial. They determine the type of the list:

  • type="list": Used to display a fixed number of content lists, usually used in sidebar recommendations, the latest articles on the homepage, and other scenarios.
  • type="page"Used to build a content list with pagination functionality, suitable for article archive pages, category pages, or search result pages.
  • type="related"Specifically used to display content related to the current article.

Next, we will discuss how to cleverly present related documents and search results on the article list page.

Display 'related documents' on the article list page.

When a user is reading a specific article, we usually want to recommend some articles with similar themes and complementary content, which is the role of 'related documents'.AnQi CMS can intelligently find related content based on multiple logic.

To implement this feature, you need to first make sure that your template file is the article detail page template (usually 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先确保你的模板文件是文章详情页的模板（通常是 实现这一功能，你需要先archive/detail.htmlOr a custom document template). On this page, you first need to get some information about the current document, such as its ID or keywords, so that the security CMS can know what it is related to.This can be donearchiveDetailLabel it easily.

{# 假设这是文章详情页的模板，我们首先获取当前文档的ID和关键词 #}
{% archiveDetail currentArchive with name="Id" %} {# 获取当前文档ID #}
{% archiveDetail currentKeywords with name="Keywords" %} {# 获取当前文档的关键词 #}

<div class="related-articles-section">
    <h3>相关推荐</h3>
    <ul class="related-list">
    {# 使用 archiveList 标签，并设置 type="related" 来获取相关文档 #}
    {# limit="5" 表示显示5篇相关文档 #}
    {# like="keywords" 会根据当前文档的关键词来查找相关文档。
       如果希望根据后台手动设置的相关文档，可以使用 like="relation" #}
    {% archiveList relatedArchives with type="related" limit="5" like="keywords" %}
        {% for item in relatedArchives %}
        <li>
            <a href="{{ item.Link }}" title="{{ item.Title }}">
                {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="related-thumbnail" />
                {% endif %}
                <span class="related-title">{{ item.Title }}</span>
            </a>
        </li>
        {% empty %}
        <li>暂无相关内容推荐。</li>
        {% endfor %}
    {% endarchiveList %}
    </ul>
</div>

In this code block,archiveListlabel'stype="related"Parameters are the key to implementing related documentation. Anqi CMS will default to intelligently recommending content based on the current document's category, model, or backend settings. Throughlike="keywords"It will give priority to matching other articles with similar keywords to the current article; whilelike="relation"it will show the "related documents" manually added when editing articles in the background.limitThe parameter controls the number of items displayed.

Build the presentation of the "search results" in the article list.

Providing in-site search functionality is an important way to enhance users' ability to navigate autonomously.After the user enters a keyword, we hope to present the relevant results in a clear list.This usually appears on a dedicated search results page (for example/searchImplemented on, but can also be integrated into a general article list template.

First, you need a search form that allows users to enter keywords:

<form action="/search" method="get" class="website-search-form">
    <input type="text" name="q" placeholder="输入你想搜索的内容..." value="{{ urlParams.q }}" class="search-input" />
    <button type="submit" class="search-button">搜索</button>
</form>

This form will be submitted to/searchthe path, and include a namedqparameter, whose value is the keyword entered by the user.{{ urlParams.q }}Will retain the user's last search keywords to enhance user experience.

Next, on your search results page template (usually)search/index.htmlOr any page you specify as a search result, you can usearchiveListtags to dynamically load search results:

`twig

{# 显示用户当前的搜索关键词 #}
<h3>搜索结果：<span>“{{ urlParams.q }}”</span></h3>

<ul class="search-results-list">
{# 使用 archiveList 标签，设置 type="page" 实现分页，limit="10" 每页显示10条 #}
{# q 参数会被安企CMS自动从URL中读取，无需手动传递 #}
{% archiveList searchResults with type="page" limit="10" %}
    {% for item in searchResults %}
    <li>
        <a href="{{ item.Link }}" title="{{ item