How to use the `archiveFilters` tag in Anqi CMS to implement multiple condition filtering, such as "house type" and "area"?

In today's information explosion in the network world, users' demand for obtaining information is becoming more and more precise.A great website should not only be rich in content but also provide an efficient and convenient content filtering function to help users quickly locate the information they need.As an experienced website operations expert, I am well aware of the importance of refined filtering for improving user experience and website conversion rates.archiveFiltersIt can help you easily implement multi-condition filtering, for example, on real estate websites, filtering accurately according to "house type" and "area

AnQi CMS, with its flexible content model and powerful template system, provides website operators with a great degree of freedom. The core of implementing multi-condition filtering lies in two points: first, you need to define the custom fields available for filtering through the 'Content Model' function of the AnQi CMS backend; second, utilizingarchiveFiltersTags are dynamically generated on the front end to create these filtering conditions and combine them witharchiveListandpaginationTags to display the filtered content.

Basic construction: Understanding the principle of custom content models and filtering

In Anqi CMS, whether it is articles, products, or any other type of content, it is all built based on the 'content model'.To implement multi-screening for 'house type' and 'area', you first need to add these custom fields to your 'real estate' content model in the background.

  1. Create or edit the content model:

    • Enter the AnQi CMS backend, find 'Content Management' -> 'Content Model'.
    • You can choose to edit an existing 'article model' or 'product model', or create a new 'real estate' content model.
    • Click to enter the model details, in the "Content Model Custom Fields" area, add the following fields:
      • House type:
        • Parameter name:房屋类型
        • Call field:houseType(Suggested to use camelCase naming)
        • Field type:单项选择or下拉选择(For example: apartment, villa, shop, office building)
        • Default value: enter one option per line, for example:
          
公寓
别墅
商铺
写字楼
      • Area:
        • Parameter name:面积
        • Call field:areaRange
        • Field type:下拉选择(It is usually defined as a range option for easy filtering, rather than entering numbers directly)
        • Default value: for example:
          
50-80平米
80-120平米
120-150平米
150平米以上
    • After saving the content model, you can select the corresponding "house type" and "area" when you publish real estate information.

  2. archiveFiltersmechanism:archiveFiltersThe elegance of the tag lies in its ability to intelligently read the filterable fields configured in your content model (such as single-choice, multiple-choice, dropdown selections), and then dynamically generate a series of filter options, and for each option generate a query parameter with a specific query (such as?houseType=公寓or?areaRange=80-120平米The URL link. When the user clicks on these links,archiveListThe tag automatically identifies these parameters in the URL and filters out matching content from the database according to these conditions.This means, you do not need to manually write complex query logic, Anqí CMS has taken care of everything for you.

MasterarchiveFiltersTag: Multi-filter template实战

archiveFiltersTags are mainly used on the front end of a website, such as content list pages or category pages, to generate dynamic filtering interfaces. They usually need to be linked witharchiveListandpaginationUse labels in conjunction to achieve the complete function of generating filter conditions, displaying content lists, and pagination navigation.

Let's take a look atarchiveFiltersbasic usage and the powerful capabilities it provides:

`twig {# Assume your "Real Estate" content model ID is 1, please modify moduleId according to actual conditions #}

<h3>房产筛选</h3>
{% archiveFilters filters with moduleId="1" allText="不限" %}
    {% for item in filters %}
    <div class="filter-group">
        <span class="filter-label">{{item.Name}}:</span>
        <ul class="filter-options">
            {% for val in item.Items %}
            <li class="{% if val.IsCurrent %}active{% endif %}">
                <a href="{{val.Link}}">{{val.Label}}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
{% endarchiveFilters %}

{# Real estate list display area, ensure type=“page” to support filtering and pagination #}

{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for item in archives %}
    <div class="house-item">
        <a href="{{item.Link}}">
            <img src="{{item.Thumb}}" alt="{{item.Title}}">
            <h4>{{item.Title}}</h4>
            <p>{{item.Description}}</p>
            {# 可以在这里显示自定义字段，例如： #}
            <p>类型：{% archiveDetail with name="houseType" id=item.Id %}</p>
            <p>面积：{% archiveDetail with name="areaRange" id=item.Id %}</p>
        </a>
    </div>
    {% empty %}
    <p>抱歉，没有找到符合条件的房产信息。</p>
    {% endfor %}
{% endarchiveList %}

{# 分页代码 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a class="page-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间多页 #}
        {% for pageItem in pages.Pages %}
        <a class="page-link {% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {# 下