How to implement keyword search and filtering display on article list or search result pages?

How to allow visitors to quickly find the content they need in a vast amount of information as our website content becomes increasingly rich, is undoubtedly a key to improving user experience and the effectiveness of content marketing.AutoCMS (AutoCMS) knows this very well, therefore, it provides a strong and flexible mechanism to help us easily implement keyword search and content filtering functions on article lists or search result pages.

The implementation of this feature mainly revolves around the core template tags of the Anqi CMS, allowing us to transform the content of the backend management into a user-friendly interactive interface through the exquisite design of the front-end template.

The core of content display: document list

In AnQi CMS, whether it is articles, products, or other custom content models, their list display cannot do withoutarchiveListThis powerful template tag. It is the cornerstone of content presentation and can flexibly retrieve and organize content according to our needs.

When we want to display a content list on the page, we usually use it like this:

{% archiveList archives with type="page" limit="10" %}
    {# 在这里循环展示每一篇文章或产品，例如： #}
    {% for item in archives %}
        <a href="{{item.Link}}">{{item.Title}}</a>
        <p>{{item.Description}}</p>
    {% endfor %}
{% endarchiveList %}

Here,type="page"It indicates that we want this list to be paginated,limit="10"and it controls the number of items displayed per page.archivesThe variable name we give to the content list, convenient toforcall in the loop.

Implement keyword search function

Allow visitors to search for content by entering keywords is an important step to enhance the practicality of the website. The Anqi CMS hasarchiveListbuilt-in support for search keywords in tags.

We only need to place a simple search form on the page and pass the search keywords through URL parametersqpass them to the server. The security CMS will intelligently identify thisqparameter, and inarchiveListThe label fetches content and automatically filters out the content that contains the keyword in the title.

A typical search form might look like this:

<form method="get" action="/search">
    <input type="text" name="q" placeholder="输入关键词搜索" value="{{urlParams.q}}">
    <button type="submit">搜索</button>
</form>

Here,action="/search"It usually points to the search results page of our website,name="q"Then it is a predefined keyword parameter.value="{{urlParams.q}}"The usage is very clever, it allows the user to retain the previously entered keywords in the search box after searching, providing a better user experience. When this form is submitted, for example, entering 'AnQi CMS', the URL may become/search?q=安企CMS。At this point, we search the results page.archiveListTags will naturally filter out relevant content.

Deep optimization: content filtering and classification

In addition to direct keyword search, more refined content filtering can help visitors quickly narrow down the scope and find the most matching needs.This is usually achieved based on content classification, tags, or custom attributes.

Anqi CMS'sarchiveFiltersLabels, which are designed to build such filtering interfaces. It can dynamically generate filtering options based on the custom fields defined in the backend content model.

Imagine you have a product model that defines custom fields such as 'color', 'size', and so on. ByarchiveFilterslabels, you can display the filtering options for these fields on the frontend:

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

In this code block:

• moduleId="1"指定了我们希望获取哪个内容模型（例如文章模型ID为1）的筛选参数。
• allText="全部"设置了“全部”选项的显示文本。
• filtersThe variable will include all selectable parameter groups, eachitemrepresents a custom field (such as “Color”).
• item.Itemsthen it includes all the optional values of the field (such as “Red”, “Blue”).
• val.LinkThis link is automatically generated by Anqi CMS, and when clicked, the URL will include the corresponding filtering parameters.
• val.IsCurrentUsed to determine if the current option is selected, which is convenient for adding to the selected items.activestyles can be added.

When the visitor clicks on a filter condition, the corresponding parameters will be added to the URL (for example/list?color=red&size=large)，and the one mentioned beforearchiveListLabels can automatically recognize and apply these filtering conditions when retrieving content, displaying precise matching results.

In addition to custom field filtering, we can alsocategoryIdParameter inarchiveListFilter the specified category directly or use.tagDataListTags to display articles under specific tags, these are all effective means of content filtering.

Build a user-friendly filtering interface

An well-designed, intuitive and easy-to-use filter interface, which can greatly enhance the user experience. CombinedarchiveFiltersandarchiveList, we can create a comprehensive filter page.

Usually, we will archiveFiltersLabels placed at the top or sidebars of the page, used to display filtering options.archiveListThe label is used to display the filtered content list. Both work together to respond to the query parameters in the URL.

For example, on a product list page, visitors can first go througharchiveFiltersSelect "Color" as "Blue","Size" as "Large", after the page refresh,archiveListall blue large products will be automatically displayed. At the same time,paginationLabels can also ensure that the pagination function works normally in the filtered results.

Pagination display: A necessity for large lists

For any list that may produce a large number of results, pagination is an essential feature. The Anqi CMS is...paginationTags andarchiveListClosely cooperate, and can elegantly handle pagination logic.

WhenarchiveListis set totype="page"When, the page can be usedpaginationLabel to render pagination navigation. It will provide links for “Home”, “Previous Page”, “Next Page”, “End Page” as well as links for the middle page numbers, and it can automatically judge the current page and add itactivestatus.

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

PasspagesVariable, we can get all the information of the current page, such as the total number of items, the total number of pages, and the current page