How to use the `archiveList` tag on the front-end page to search for keywords (`q` parameter) to filter documents?

Unlock AnQiCMS: Use it cleverlyarchiveListTags enable keyword search and content filtering on the front-end page.

As an experienced website operations expert, I fully understand the importance of an efficient and flexible content management system to a company.AnQiCMS, this system developed in Go language, with its excellent performance and rich features, is becoming the preferred choice for an increasing number of small and medium-sized enterprises and content operation teams.In the era of information explosion, whether users can quickly find the content they need is directly related to the user experience and conversion rate of the website.archiveListTagsqParameters make it easy to implement keyword search and content filtering on the front-end page.

UnderstandingarchiveListThe power and flexibility of tags

In the template system of AnQiCMS,archiveListTags are undoubtedly the core tool for content display. It's like a universal content query machine that can help us search for content based on various conditions, such as document model ID (moduleId), category ID (categoryId), recommended attributes (flag)，list out the articles and products we need. Whether it's showcasing the latest news, popular articles, or product lists under specific categories,archiveListyou can accomplish the tasks with ease.

It not only supports flexible sorting methods (order), such as sorting by the most recent releases or by views, but also allows for precise control of the number of items displayed (limit）。But its capabilities are far from that. When we need to achieve more advanced content interaction, such as allowing users to actively search for information within the site,qthe parameter shines on the scene, it willarchiveListFrom a static content display tool, upgraded to a powerful dynamic content filtering engine.

Core Function:qParameter - the secret weapon of front-end keyword search

In short,qParameter isarchiveListParameters specifically used in tags to receive keyword search requests. When you want the user to enter a word on the front end, the website can intelligently filter outtitles containing that wordof the documents,qThe parameter is your best choice.This means that users only need to enter the keywords they are interested in, and the system can quickly match and present a list of relevant content, greatly enhancing the discoverability of content.

It is worth noting that in order to fully utilize its search filtering and pagination display capabilities,qthe parameters are usually related totype="page"this list type for use.type="page"informarchiveListThe current one is a paginated list that intelligently cooperates with pagination tags (pagination) to work together, providing a complete pagination feature for search results.

The intelligence of AnQiCMS lies in the fact that if the page URL already containsq=关键词such a query parameter,archiveListTags intype="page"The mode will automatically recognize and use this keyword for filtering, without the need for us to specify it inside the tagqParameters. This design greatly facilitates developers, making the implementation of the search function simpler and more efficient.

Practical Exercise: Step-by-step construction of the frontend keyword search function

Next, we will demonstrate how to implement a basic keyword search function in AnQiCMS with a simple example.

1. Create a search form.

Firstly, we need to provide an intuitive search entry on the frontend page, usually an HTML form.This form can be placed anywhere on the website, such as the navigation bar, sidebar, or a dedicated search page.

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

In this form:

• method="get"means that the form is submitted using the GET method, and the search keywords will be appended to the URL query string (for example)/search?q=关键词).
• action="/search"specifies that the search results page will be/searchMake sure you have the file in your AnQiCMS template directory.search/index.htmlOr route search requests to the correct template through the pseudo-static rules in the backend.
• name="q"This is a crucial point, it defines the name of the keyword input box, corresponding toarchiveListTagsqthe parameters.
• value="{{urlParams.q}}"This part is a little trick that ensures the user's previously entered keywords are still displayed in the search box after submitting the search, enhancing the user experience.

2. Display search results

Next, it's time to configure the display page of search results. Suppose we have asearch/index.htmltemplate specifically designed to display search results.

In this template, we will usearchiveListTags to dynamically retrieve and render a document list that matches the search criteria. See the example code below:

`twig {# search/index.html template content example #}

{# Introduce the common header, usually containing the search form itself #} {% include “partial/header.html” %}

<h1>搜索结果</h1>

{# 使用 archiveList 标签获取搜索结果 #}
{% archiveList archives