In the AnQi CMS, to implement multi-condition filtering on the article list page, such as filtering based on 'area', 'house type', and other custom parameters, it requires us to cleverly combine the 'content model' function provided by the system, as well as the 'document parameter filtering tags' of the front-end template.archiveFilters）and "Document List Tag"（archiveList）。The entire process can be divided into several core steps, let's take a detailed look together.

Core Function: Custom Content Model and Parameters

The foundation for implementing multi-condition filtering, defining custom filterable parameters for your articles. The "Content Model" feature of Anqi CMS is specifically designed for this purpose.

First step: Define the filter field in the content model

Firstly, you need to log in to the backend management interface of Anqi CMS, findthe 'Content Model' under the 'Content Management' menu. Here, you can manage the built-in models (such as "Article Model

Click the model you want to edit (for example, if you want to add 'Area', 'House Type' filters in an article, select 'Article Model' for editing), or create a new content model.On the model editing page, in the "Content Model Custom Fields" area, you can add new fields.

  • Parameter name:Enter a user-friendly name, such as “Area”, “House Type”. This will be displayed when editing articles in the background.
  • Field call:This is a key identifier, you will use it in the front-end template to refer to this field.please use english lowercase letters, such as "region" and "housetype".
  • Field Type:For the filtering feature, we usually choose“Single Choice”、“Multiple Choice” or “Dropdown Selection”These types. These types allow you to preset a series of options for users to select when publishing articles, which also facilitates the generation of filtering conditions on the front end.
  • Default value:If you have selected the above field type, this is where you set specific options. Each line represents an option. For example, the default value for "Region" can be: 
    
东城区
西城区
海淀区
朝阳区
    The default value for '户型' can be:
    
一室一厅
两室一厅
三室两厅
复式
  • Mandatory:Decide according to your business requirements.

After adding and configuring the fields, remember to save the content model.

Step 2: Fill in the custom parameters for the article

When you have completed the field definition of the content model, the next step is to select or fill in the corresponding custom parameters when publishing or editing articles.

Enter“Content Management” menu under “Publish Document” or “Document Management”Select an article to edit.At the bottom of the article editing page, you will see a collapsible area named "Other Parameters".Expand this area, and you will see the custom fields defined in the content model just now, such as “Area” and “House Type”.

Here, you can select or fill in the corresponding "area" and "house type" values based on the actual situation of the article.Ensure that your article data includes these custom parameters so that the front-end can filter correctly.

Implement multi-condition filtering on the article list page

Now, we have prepared the background data. The next step is how to present these filtering conditions to the user on the front-end page and make the list filterable according to the user's choices.

Third step: Present the filter conditions in the front-end template

In your article list page template (usually{模型table}/list.html), you can use the tags provided by the Anqi CMS toarchiveFiltersautomatically generate filter conditions.

archiveFiltersLabels are automatically generated HTML structures containing filter options and corresponding links based on the custom fields you define in the content model.

{# 示例：在文章列表页呈现“区域”和“户型”的筛选条件 #}
<div>
    <h3>多条件筛选：</h3>
    {% archiveFilters filters with moduleId="1" allText="不限" %} {# moduleId="1" 假设为文章模型ID，allText为“全部”选项的文本 #}
        {% for item in filters %} {# filters变量会包含所有可筛选的自定义参数 #}
        <div class="filter-group">
            <span class="filter-label">{{item.Name}}: </span> {# 显示自定义参数的名称，如“区域” #}
            <ul class="filter-options">
                {% for val in item.Items %} {# 遍历每个参数下的所有选项 #}
                <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a> {# val.Link是点击该选项后跳转的URL，val.Label是选项的显示文本 #}
                </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    {% endarchiveFilters %}
</div>

Code Explanation:

  • {% archiveFilters filters with moduleId="1" allText="不限" %}: To callarchiveFiltersLabels to retrieve filter data.moduleIdSpecified which content model's articles to filter (assuming the article model's ID is 1),allTextIs the display text for the default 'No Limit' option.
  • {% for item in filters %}:filtersThe variable is an array that includes all the custom fields you define that can be used for filtering (for example, "Areaitem.NameThese are the field names such as "Areaitem.FieldNameIt is the corresponding call field (such as “region”).
  • {% for val in item.Items %}:item.ItemsIt is all the optional values under the current custom parameter (such as “area”) (such as “Dongcheng District”, “Xicheng District”).
  • {{val.Link}}This is a key! The AQ CMS will automatically generate the URL with the corresponding filter parameters when you click on this option. For example, if you click on "Dongcheng District", the link may beyourwebsite.com/article/list?region=东城区.
  • {{val.Label}}：Display the text of the option, such as “Dongcheng District”.
  • {% if val.IsCurrent %}active{% endif %}：Used to determine if the current filtered option is selected, convenient for you to add CSS styles to highlight display.

Step 4: CombinearchiveListLabel display filter results

When the user clicks a filter condition on the front end, the page URL will automatically carry the corresponding parameters (for example?region=东城区&houseType=两室一厅)。At this time, your article list tagsarchiveListIt will automatically recognize and use these URL parameters to filter and display articles.

You just need to use it normally in the templatearchiveListTags to display the list of articles, and combine pagination tags as well.

`twig {# 示例：显示根据筛选条件过滤后的文章列表 #}

<h2>筛选结果</h2>
{% archiveList archives with moduleId="1" type="page" limit="10" %} {# type="page"表示启用分页，limit设置每页显示数量 #}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        {# 可以在这里显示其他文章信息，包括自定义参数值 #}
        {% archiveParams params with id=item.Id sorted=true %} {# 获取当前文章的自定义参数 #}
            {% for param in params %}
                {% if param.FieldName == 'region' %} {# 例如只显示“区域”参数 #}
                    <span>区域: {{param.Value}}</span>
                {% elseif param.FieldName == 'houseType' %} {# 例如只显示“户型”参数 #}
                    <span>户型: {{param.Value}}</span>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
    </div>
    {% empty %}
    <p>抱歉，没有找到符合条件的文章。</p>
    {% endfor %}
{% endarchiveList %}

{# 分页代码 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 这里是分页链接的HTML结构，具体可根据tag-pagination.md文档进行设置 #}
        <a href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}<a