How does the content list on the search results page dynamically display based on the user's query keywords?

In website operation, the search function is the core to enhance user experience and help users quickly find the information they need.A highly efficient and intelligent search results page can not only meet users' immediate needs but also effectively guide traffic and enhance the visibility of website content.AnQiCMS (AnQiCMS) provides us with powerful tools that allow the content display on the search results page to be flexibly and dynamically adjusted according to the user's query keywords, thereby achieving more accurate and personalized content presentation.

Core mechanism: Understanding the search results page of AnQiCMS

The search result page of Anqi CMS usually corresponds to a template filesearch/index.htmlIn this template, we mainly use built-in template tags to obtain and display content. The core lies inarchiveListThe tag can dynamically filter out matching documents from the website content library based on different parameters.

When a user submits a search request on a website, the query keywords (usually through the URL in theqparameters passed) will be automatically captured by AnQiCMS.archiveListThe tag is intype="page"In mode, it can intelligently utilize thisqThe parameter will display the matched document. This seamless integration allows us to implement powerful search functionality without writing complex backend logic.

Dynamic content display:archiveListPractical application of tags

To make the search results page dynamically display content,archiveListtags are crucial. We will be using them insearch/index.htmlthe template like this:

{% archiveList archives with type="page" limit="10" %}
    {# 遍历搜索结果，archives 就是所有匹配到的文档列表 #}
    {% for item in archives %}
        <div class="search-result-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            <div class="meta-info">
                <span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读量: {{item.Views}}</span>
            </div>
        </div>
    {% empty %}
        <p>抱歉，没有找到与“{{urlParams.q}}”相关的结果。</p>
    {% endfor %}
{% endarchiveList %}

In the code above:

• archiveList archives with type="page" limit="10": This line of code tells the system that we want to retrieve the document list(archives), and is displayed in pagination mode(type="page") Displayed, 10 items per page(limit="10"). When the URL contains(q=关键词such query parameters,archiveListit will automatically include these keywords in the search scope.
• {% for item in archives %}This is looping through all the documents found.itemRepresents each document.
• {{item.Link}}/{{item.Title}}/{{item.Description}}And: These variables are used to display the link, title, introduction, and other basic information of the document. We can also display the category name as needed (categoryDetail) publication time (stampToDate) and reading volume, etc.,
• {% empty %}If there are no search results, this content will be displayed to prompt the user that no relevant information was found. We are using{{urlParams.q}}Display the user's input keywords to make the prompt more friendly.

By such settings, whenever a user enters different keywords, the search results page will dynamically display a list of matching content.

Optimize user experience: integration of pagination function.

When there are many search results, pagination is an essential feature. AnQiCMS'spaginationTags can be used witharchiveList type="page"Perfectly配合，providing smooth pagination navigation.

In the abovearchiveListBelow the tag, we can add pagination code:

    {# 分页代码 #}
    <div class="pagination-container">
        {% pagination pages with show="5" %}
            <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
            {% if pages.PrevPage %}
                <a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
            {% endif %}
            {% for item in pages.Pages %}
                <a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}
                <a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
            {% endif %}
            <a class="pagination-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
        {% endpagination %}
    </div>

pagination pages with show="5"This line of code generates a pagination navigation that includes up to 5 page numbers. It will be based on the total number of search results andarchiveListset inlimitThe parameter automatically calculates the total number of pages and generates correct page number links. This allows users to easily browse through multi-page search results.

Beyond keywords: utilizingarchiveFiltersImplement advanced filtering

The strength of AnQiCMS lies in its 'flexible content model' and 'custom fields for content model' features.We can define unique fields for different content models (such as articles, products), such as "property type", "price range", and so on.archiveFiltersThe tag makes use of these custom fields to provide a more refined and multi-dimensional filtering function on the search results page.

To add these advanced filters to the search results page, we need to combinearchiveFiltersTags:

    <div class="filter-area">
        {% archiveFilters filters with moduleId="1" allText="全部" %}
            {% for item in filters %}
                <div class="filter-group">
                    <span class="filter-label">{{item.Name}}:</span>
                    <ul class="filter-options">
                        {% for val in item.Items %}
                            <li class="{% if val.IsCurrent %}active{% endif %}">
                                <a href="{{val.Link}}">{{val.Label}}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endfor %}
        {% endarchiveFilters %}
    </div>

Here:

• archiveFilters filters with moduleId="1" allText="全部"This will generate all available filters for the specified model ID (here is the article model, ID is 1).allText="全部"The display text for the 'Unlimited' option is defined.
• {% for item in filters %}: Traverse each filter group (e.g., "Real Estate Type").
• {% for val in item.Items %}: Traverse each option within the filter group (e.g., "Residential", "Commercial").
• {{val.Link}}Each filter option will generate a URL with parameters, which will be automatically received when the user clicksarchiveListto further narrow down the search results range.

This way allows users not only to search through keywords but also to click on different filtering conditions to gradually narrow down the scope and obtain a more accurate list of content.

SEO friendly settings: Improve search page performance

In addition to functionality, the SEO performance of the search results page should not be ignored.Although search result pages are usually not the focus of SEO optimization, providing friendly TDK (Title, Description, Keywords) still helps improve user experience and search engine understanding.

we cansearch/index.htmlTemplate's<head>partly usedtdkTags to dynamically set these elements:

<title>{% tdk with name="Title" siteName=true %} - 搜索结果</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">

Of course, the more ideal approach is to base it on user input.qParameters to dynamically generate these TDK, for example, toqParameters as part of the title.

Actual operation suggestions and template structure

To implement these dynamic display functions in Anqi CMS, the key is to understand the structure and usage of templates and tags. The template file for the search results page is/template/你的模板名称/search/index.html. Be sure to follow the basic conventions of template making in AnQiCMS, such as using.htmlfile extension, UTF8 encoding, Django template engine syntax, etc.

By flexible applicationarchiveList/paginationandarchiveFiltersWe can build a powerful, responsive, and rich content search experience for users with tags like this.

Frequently Asked Questions (FAQ)

1. How the 'q' parameter in the search results page is beingarchiveListLabel recognition?

when you arearchiveListSet in the labeltype="page"At that time, AnQiCMS will automatically check if the current page URL contains a namedqThe query parameter. If it exists, the system will use its value as a search keyword and automatically apply it toarchiveListcontent filtering. This means that you do not need to explicitly write inarchiveListtags.q="{{urlParams.q}}"The system can intelligently capture and utilize this keyword.

2. How to display mixed results of different content models (such as articles and products) on the search results page?

archiveListlabel'smoduleIdThe parameter allows you to specify the content model to be queried. If you want to display a mixed result of multiple content models, you can consider creating two or morearchiveListtags, specifying differentmoduleIdThen merge their results and display. For example, use one firstarchiveListDisplay the article results, then use anotherarchiveListAlthough display the product results.archiveListThe system does not support direct cross-model mixed search, but it can be flexibly realized through multiple calls to the template layer.

How to implement custom sorting on the search results page, such as sorting by latest release or popularity?

archiveListTags providedorderParameters, which can be used to specify the sorting method of search results. For example,order="id desc"Indicates sorting by ID in reverse order (usually the most recently published),order="views desc"Indicates sorting by view count in reverse order (usually the most popular). You cansearch/index.htmlIn the template, by adding some sort links, allow users to dynamically select sorting methods, and pass the sorting parameters to the URL, and thenarchiveListThe label will be adjusted according to the parameters in the URL.