How to combine the `archiveList` tag with query parameters in the URL to implement dynamic search and filtering?

Build an interactive and easy-to-navigate website in Anqi CMS, where dynamic search and filter functions are indispensable.archiveListTags act as the core tool for content output, cleverly combining URL query parameters, which can help us achieve a powerful content discovery mechanism, allowing users to easily locate the information they are interested in.

archiveListThe core role of tags

archiveListTags are used in AnQi CMS to retrieve and display document lists. Whether it's articles, products, or other custom content models,archiveListThey can flexibly call and organize them.It provides rich parameters, such as filtering content by category ID, model ID, recommended attributes, etc.However, its true strength lies in its ability to seamlessly collaborate with query parameters in URLs, achieving highly dynamic content display.

Understanding URL query parameters

In web browsing, the URL (Uniform Resource Locator) often appears at the end?symbol, followed by a serieskey=valueof key-value pairs, which are the URL query parameters, for exampleyourdomain.com/list?category=news&tag=CMSThey are used to pass additional information to the server, usually to indicate dynamic changes in page content, such as search keywords, filter conditions, or current page number. AnQi CMS'sarchiveListLabels can intelligently parse and apply these parameters without additional backend programming.

Implement dynamic search

Dynamic search is the first step in discovering website content.Users enter keywords in the search box, click search, and the page should display related content based on the keyword.archiveListlabel'sqParameter to achieve.

When a user submits a search form using a GET method (for example<form method="get" action="/search">) in the search boxname="q"The input content will be added to the URL, forming something like/search?q=关键词such query parameters. At this time, you just need to use in the template of the search results pagearchiveListtag and usetypeset the attribute to"page"(indicating pagination mode),archiveListIt will automatically detect if the URL containsqparameters and filter the content according to their values.

For example, in your search template (such assearch/index.html), you can place it like this.archiveListTags:

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

{# 动态搜索结果列表 #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a> - {{item.Description}}</li>
    {% empty %}
        <li>没有找到相关内容。</li>
    {% endfor %}
{% endarchiveList %}

{# 分页导航 #}
{% pagination pages with show="5" %}
    {# 渲染分页链接 #}
{% endpagination %}

{{urlParams.q}}The use is a small trick that ensures the search box still displays the previously entered keywords when the user performs a new search or refreshes the page, enhancing the user experience.

Achieve dynamic filtering

In addition to keyword search, the dynamic filtering feature allows users to narrow down content based on predefined attributes (such as categories, custom field values, etc.).This is especially practical in scenarios such as product lists and case displays.The Anqi CMS concept of 'content model' allows you to define custom fields for different types of content, which are the foundation of dynamic filtering.

archiveFiltersTags are a powerful tool for building dynamic filtering interfaces. It will base on the specified content model (moduleId) and the context of the current page, automatically generates a series of filtering conditions and corresponding URL links. These links' URLs also contain query parameters, such aslist?property_type=apartment&area=CBD.

when the user clicksarchiveFiltersWhen generating the filter link, the page URL will be updated,archiveListthe tags will automatically recognize these newly added query parameters (for exampleproperty_type=apartment), and only display content that meets all conditions.

A typical scenario where a dynamic filter and list are used together may look like this:

{# 动态筛选器界面 #}
<div>
    <h3>筛选条件：</h3>
    {% archiveFilters filters with moduleId="1" allText="全部" %}
        {% for item in filters %}
            <p>{{item.Name}}:</p>
            <ul>
                {% for val in item.Items %}
                    <li class="{% if val.IsCurrent %}active{% endif %}">
                        <a href="{{val.Link}}">{{val.Label}}</a>
                    </li>
                {% endfor %}
            </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

{# 动态筛选结果列表 (与搜索共用同一 archiveList 标签) #}
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h4>{{item.Title}}</h4>
                <p>{{item.Description}}</p>
            </a>
        </li>
    {% empty %}
        <li>没有找到符合筛选条件的内容。</li>
    {% endfor %}
{% endarchiveList %}

{# 分页导航 #}
{% pagination pages with show="5" %}
    {# 渲染分页链接 #}
{% endpagination %}

In this example,archiveFiltersIt will traverse all the filterable custom fields in the content model (such as "House TypearchiveListIt is responsible for querying the existing parameters in the current URLq(search keywords) as well asarchiveFiltersthe generated custom field parameters, dynamically querying and displaying matching documents.

Practice: Combined Search and Filtering

Combining dynamic search with dynamic filtering can provide users with an extremely refined content discovery experience. Imagine that users can enter keywords to search forarchiveListWill intelligently overlay these conditions to present the most suitable result for the user's needs.

All of this is due toarchiveListAutomated processing of URL query parameters. Whether the user enters the URL directly, or through a search box, filtering link operations,archiveListCan understand and respond to these parameters, ensuring the accuracy and timeliness of content display.At the same time, the pseudo-static function of Anqi CMS ensures that these dynamically generated URLs still maintain SEO-friendliness, making it easier for search engines to index them.

In this way, the website is no longer just a static display page, but a powerful platform that can interact deeply with users and provide information as needed.

Frequently Asked Questions (FAQ)

1. Question:archiveListHow does the tag know which custom fields to filter by?Answer:archiveFiltersThe tag reads the custom fields you have set for a specific model through the "Content Model" in the backgroundmoduleIdThe field defined by the specified parameter. Only those fields set as filterable in the custom field will bearchiveFiltersrecognized and used to generate filter links.archiveListIt will then apply the filter automatically based on the query parameters that match these custom fieldsFieldName。“What if I use both search keywords (

2. parameters) and multiple filter conditions at the same time?q}archiveListHow will it be handled?Answer:archiveListThe label is very intelligent, it will automatically include all query parameters in the URL (includingqparameters and througharchiveFiltersThe generated custom field parameters are叠加起来，as the internal query filtering condition.This means it will meet all conditions simultaneously, returning content that includes the search keywords and meets all filtering conditions.

3. Ask: Can the pagination function still work in dynamic search and filtering scenarios?Answer: Absolutely. When `archive