In AnQi CMS, to implement multi-condition filtering on the article list page, such as filtering by custom parameters such as "area" and "house type", it requires us to cleverly combine the system-provided "content model" function with the "document parameter filtering tag" of the front-end template (')archiveFiltersAnd the '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 basis for realizing multi-condition filtering, which is to define customizable filter parameters for your articles. The "Content Model" function of Anqi CMS is precisely for this purpose.

The first step is to define the filtering field in the content model

First, you need to enter the AnQi CMS backend management interface and findThe 'Content Management' menu under the 'Content Model'In here, you can manage built-in models (such as "article model", "product model"), and also create new content models.

Click the model you want to edit (for example, if you want to add 'area', 'house type' filters to an article, select the 'article model' for editing), or create a new content model.In the model editing page, in the "Content Model Custom Field" area, you can add new fields.For example, in terms of "area" and "house type":

  • Parameter name:Enter a user-friendly name, such as “Area”, “Type”. This will be displayed when editing articles in the background.
  • Call field:This is a key identifier, you will use it in the front-end template to refer to this field.Please use English lowercase letters, for example, 'region' and 'housetype'.
  • Field type:For the filtering function, we usually chooseSingle choice, multiple choice, or drop-down selectionThese types allow you to preset a series of options for users to choose from when publishing articles, and it also facilitates the generation of filtering conditions on the frontend.
  • Default: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 'Apartment type' can be:
    
一室一厅
两室一厅
三室两厅
复式
  • Mandatory?:Decide according to your business needs.

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

Step 2: Fill in the custom parameters for the article.

After 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.

EnterThe "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 "housing type".

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

Implement multiple condition filtering on the article list page

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

Step 3: Present the filtering conditions in the front-end template

In your article list page template (usually){模型table}/list.html), you can use the Aiqi CMS providedarchiveFilterstags to automatically generate filtering conditions.

archiveFiltersTags will automatically generate an HTML structure 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="不限" %}: InvokearchiveFilterstags to retrieve filter data.moduleIdSpecified which article model to filter (assuming the article model ID is 1),allTextIs the display text for the default 'Unlimited' option.
  • {% for item in filters %}:filtersA variable is an array that contains all the custom fields you define for filtering (such as “region”, “house type”).item.NameThat is, the names of fields such as “region”, “house type”, and so on,.item.FieldNameIt is the corresponding calling field (such as "region").
  • {% for val in item.Items %}:item.ItemsIt is all the optional values under the current custom parameter (such as "region") (such as "Dongcheng District", "Xicheng District").
  • {{val.Link}}This is the key! The Anqi CMS will automatically generate the URL with the corresponding filter parameters after clicking 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 whether the current filter option is selected, convenient for you to add CSS styles to highlight.

Step 4: CombinearchiveListTag display filter results

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

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

`twig {# Example: Display the article list filtered by conditions #}

<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