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

In website operation, how to allow visitors to find the content they are interested in faster, or seamlessly discover more relevant information after browsing an article, is the key to improving user experience and website stickiness.AnQiCMS (AnQiCMS) provides powerful and flexible template tags that can help us easily display related documents or search results on the article list page, thereby building a more intelligent and interactive website.

Skillfully use content list tags to present dynamic information

One of the core strengths of Anqi CMS lies in its highly customizable template system. For the article (or product) list page, 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 presentation methods, including regular lists, pagination lists, related document lists, and even search results.

UnderstandingarchiveListTagstypeThe parameter is crucial. It determines the type of the list:

  • type="list": Used to display a fixed number of content lists, usually used in scenarios such as sidebar recommendations, latest articles on the homepage, etc.
  • type="page"：Used to build content lists with pagination features, suitable for article archive pages, category pages, or search result pages.
  • type="related"：Used specifically 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.The CMS can intelligently find related content based on various logic.

To implement this feature, you need to make sure that your template file is the article detail page template (usuallyarchive/detail.htmlOr a custom document template).In this page, you first need to obtain some information about the current document, such as its ID or keywords, so that the security CMS can know 'what is related to'.archiveDetailLabel implementation is easy.

{# 假设这是文章详情页的模板，我们首先获取当前文档的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,archiveListTagstype="related"The parameter is the key to the relevant documentation. The Anqi CMS will default to intelligently recommending content based on the current document's category, model, or backend settings. Throughlike="keywords"It will prioritize matching other articles with keywords similar to the current article;like="relation"It will then display the "related documents" you manually add while editing articles in the background.limitThe parameter controls the number of items displayed.

Build the presentation of 'Search Results' in the article list.

Offering an in-site search function is an important way to enhance users' ability to navigate autonomously.After the user enters keywords, we hope to present relevant results in a clear list./searchImplemented on, but can also be integrated into a generic article list template.

Firstly, you need a search form for 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 parameter namedqwhose value is the keywords entered by the user.{{ urlParams.q }}The user's last search keywords will be retained to enhance user experience.

Next, on your search results page template (usually)search/index.html，or 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