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

How to make visitors quickly find the content they need among the vast amount of information on our website is undoubtedly a key to improving user experience and content marketing effectiveness.AnQiCMS (AnQiCMS) fully understands this, and therefore provides a powerful and flexible mechanism to help us easily implement the keyword search and content filtering functions on the article list or search results page.

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

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 a 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 the list to be pageable, whereaslimit="10"it controls the number of items displayed per page.archivesis the 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 improve the practicality of the website. Anqi CMS has built-in support for search keywords inarchiveListtags.

We just need to place a simple search form on the page and pass the search keywords through the URL parametersqto the server. Anqi CMS will intelligently identify thisqand it will take effect in thearchiveListWhen tagging content, it automatically filters out content with 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" Usually points to the search results page of our website,name="q"It is the agreed keyword parameter.value="{{urlParams.q}}"The usage is very clever, it allows the search box to retain the previously entered keywords after searching, providing a better user experience. After submitting the form, for example, if you enter "Anqi CMS", the URL may become/search?q=安企CMSAt this time, we search for the result page ofarchiveListThe tags 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 based on content classification, tags, or custom attributes.

Of Security CMSarchiveFiltersThe label is 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 where you define custom fields such as "color", "size", and so on. ByarchiveFilterstags, you can display the filtering options of these fields on the front end:

{% 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"Specify the filter parameters for the content model we want to retrieve (e.g., article model ID is 1).
• allText="全部"Set the display text for the "All" option.
• filtersThe variable will include all filterable parameter groups, eachitemrepresents a custom field (such as “Color”).*
• item.Itemswhich includes all the optional values for the field (such as “Red”, “Blue”).*
• val.LinkIs an Anqi CMS automatically generated filter link, clicking it will add the corresponding filter parameters to the URL.
• val.IsCurrentUsed to determine whether the current option is selected, convenient for us to add to the selected items.activeStyle.

When a visitor clicks on a filter option, the URL will include the corresponding parameters (for example/list?color=red&size=large), while the previous one mentionedarchiveListLabels can automatically identify and apply these filtering conditions when retrieving content, displaying precise matching results.

In addition to custom field filtering, we can alsocategoryIdThe parameter is inarchiveListFilter content directly by category, or usetagDataListtags to display articles under specific tags, all of these are effective means of content filtering.

building a user-friendly filtering interface

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

Generally, we willarchiveFiltersLabels placed at the top or side of the page, used to display filter options. AndarchiveListTags are used to display the filtered content list. Both work together to respond to query parameters in the URL.

For example, on a product list page, visitors can first filter througharchiveFiltersSelect "Color" as "Blue","Size" as "Large", page refreshed,archiveListall blue large products will be displayed automatically. At the same time,paginationTags can also ensure that pagination functions normally in filtered results.

Pagination display: A necessity for large lists.

For any list that may produce a large number of results, pagination is essential. Anqi CMS'spaginationwith the tag andarchiveListwork closely together, can elegantly handle pagination logic.

WhenarchiveListSet totype="page"When, the page can be usedpaginationLabels to render pagination navigation. It provides links for 'Home', 'Previous page', 'Next page', 'End page' as well as links to the middle page numbers, and can automatically judge the current page and add links to it.activestatus。“

{% 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 %}

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