How to implement multi-condition filtering display for article list pages using the `archiveFilters` tag in AnQiCMS?

In website operation, providing users with convenient and accurate content search experience is crucial.As the content of the website becomes richer, simple classification or keyword search is often not enough to meet the personalized needs of users.This feature of multi-condition filtering on the article list page is particularly important.archiveFiltersTags can easily achieve this goal, making your article list page instantly have powerful filtering capabilities.

Reveal the core features:archiveFiltersworking principle

archiveFiltersThe label plays the role of an intelligent guide in AnQiCMS, its main task is not to filter content directly, butBased on the definition of your website content model, dynamically generate a series of clickable filter links for users. When users click on these links, the page URL will carry the corresponding filter parameters, andarchiveListLabel (when set to pagination modetype="page") will automatically identify and, based on these parameters, extract articles that meet the conditions from the database to achieve multi-condition filtering and display.

In simple terms,archiveFiltersThe uniqueness of the tag lies in the fact that it does not require you to manually write complex filtering logic. It only needs to define the custom fields of the content model in the background, and it can automatically read the filtering options of these fields and generate a link with a specific URL parameter for each option.This design greatly simplifies front-end development work, allowing you to focus more on user experience and content presentation.

Behind the scenes preparation: Custom fields of the content model

To makearchiveFilters标签发挥作用，首先需要在 AnQiCMS 后台做好“幕后准备”——即在您的内容模型中定义好可用于筛选的自定义字段。

Imagine if your website is a real estate information platform, you might want users to be able to filter listings based on conditions such as 'House Type' (such as residential, apartment, villa), 'Area Range' (such as 50-80 square meters, 80-120 square meters), and so on.

In AnQiCMS backend, you can go to 'Content Management' under 'Content Model', select or create a model (such as 'Real Estate Model'), and then add custom fields. The type of these fields is very critical:

• Single selection：Applicable for options that are fixed and the user can only select one, such as “Type of house”.
• Multiple selection：If the user can select multiple tags or attributes at the same time, for example, 'Property Features' (with garden, school district house, etc.).
• Drop-down selection：Similar to single-choice, but presented in UI as a dropdown menu.

After you have set up the preset options for these custom fields,archiveFiltersLabels can intelligently recognize these options and present them to users as filtering conditions.

Step-by-step operation: How to use in templatesarchiveFilters

UnderstoodarchiveFiltersThe working principle and background preparation are done, let's take a look at how to apply it in the frontend template in English.

Suppose we have a 'real estate model', which defines in English.house_type(House type) and in English.area_range(Area range) Two custom fields.

1. IntroductionarchiveFilterstags

Firstly, in your article list page template (for example)article/list.htmlorarchive/list.html), usearchiveFiltersTag to get the filtering conditions:

{# 引入 archiveFilters 标签，变量名为 filters，指定模型ID为1，所有选项的文本为“不限” #}
{% archiveFilters filters with moduleId="1" allText="不限" %}
    {# 遍历每个筛选组，例如“房屋类型”、“面积范围” #}
    {% for item in filters %}
    <div class="filter-group">
        <span class="filter-name">{{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> {# 输出选项的文本和链接 #}
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
{% endarchiveFilters %}

In this code block:

• archiveFilters filters with moduleId="1" allText="不限"：We inform the system to retrieve all filtering conditions for the model ID of 1 (usually the article or default content model), and set the display text of the 'All' option to 'Unlimited'.filtersIt is a variable defined by us to receive filtered data.
• {% for item in filters %}: The outer loop iterates over each filter condition group, such as 'House Type', 'Area Range', etc.
  • {{item.Name}}：Show the friendly name of the filter group (e.g., “House Type”).
  • {{item.FieldName}}：This is the database field name corresponding to the filter group (e.g.,house_type)，though it is not directly displayed here, but it is used in generatingval.Linkauto plays a core role.
• {% for val in item.Items %}: The inner loop iterates over the specific options under each filtered group, for example, "Residential", "Apartment".
  • {{val.Label}}: Displays the text of the filter options (such as "Residential").
  • {{val.Link}}This is the most critical part, it will automatically generate one