How to use the `archiveList` tag to perform keyword search (using `q` parameter) to filter documents on the frontend page?

Unlock AnQiCMS: Use巧妙archiveListTags to implement keyword search and content filtering on the front-end page

As an experienced website operations expert, I am well aware of the importance of an efficient and flexible content management system for a company.AnQiCMS, this system developed based on the Go language is renowned for its excellent performance and rich features and is becoming the preferred choice for an increasing number of small and medium-sized enterprises and content operation teams.In this 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.Today, let's delve deeply into a very practical and powerful feature of AnQiCMS - how to usearchiveListlabel'sqParameters, easily implement keyword search and content filtering on the front-end page.

UnderstandingarchiveListThe power and flexibility of tags

In the AnQiCMS template system,archiveListTags are undoubtedly the core tool for content display. It is like a universal content query machine, helping us to find documents based on various conditions, such as document model ID (moduleId), classification ID (categoryId), recommended attributes(flagList out the articles and products we need. Whether it's showcasing the latest news, popular articles, or product lists under specific categories,archiveListwe can accomplish the tasks with ease.

It not only supports flexible sorting methods (order) such as sorting by the latest release or views, but also can accurately control the number of displayed items (limit）。But its capabilities are far from limited. When we need to implement 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,qThe parameter isarchiveListA parameter specifically used to receive keyword search requests. When you want the website to intelligently filter out a word entered by the user on the frontendThe title contains this wordwhen searching for the document,qThe parameter is your best choice. This means that the user only needs 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 the content.

It is noteworthy that in order to fully utilize its search filtering and pagination display capabilities,qthe parameters are usually used withtype="page"this list type.type="page"TellarchiveListCurrently, it is a paginated list that intelligently cooperates with pagination tags (pagination) to work together, providing a complete pagination function for search results.

The intelligence of AnQiCMS lies in the fact that if the page URL already containsq=关键词query parameters,archiveListThe tag is intype="page"In mode, it will automatically recognize and use this keyword for filtering, without us needing to specify it within the tagqParameters. This design greatly facilitates developers, making the implementation of the search function more concise and efficient.

Practical training: Build the front-end keyword search function step by step.

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 a user-friendly search entry on the front-end page, usually a 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"It indicates that the form is submitted using the GET method, the search keywords will be attached to the query string of the URL (for example)/search?q=关键词)
• action="/search"It specifies that the search results page will be/searchMake sure that the AnQiCMS template directory containssearch/index.htmlfile, or route the search request to the correct template through the backend pseudo-static rules.
• name="q"This is a crucial point, it defines the name of the keyword input box, andarchiveListlabel'sqcorresponds to the parameters.
• value="{{urlParams.q}}"This part is a little trick, it ensures that the search box still displays the keywords entered by the user after submitting the search, enhancing the user experience.

2. Display search results

Next, it is to configure the display page of search results. Suppose we have onesearch/index.htmltemplate is specifically used to display search results.

In this template, we will usearchiveListLabel to dynamically retrieve and render a list of documents that match the search criteria. See the following example code:

”`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