How to implement multi-condition filtering display on the article list page with the `archiveFilters` tag of AnQiCMS?

It is crucial to provide users with convenient and accurate content search experience in website operation.As the content of the website becomes richer, simple categorization or keyword search is often not enough to meet the personalized needs of users.This is when the multi-condition filtering function on the article list page becomes particularly important.For AnQiCMS users, it is clever to make use ofarchiveFiltersTags can easily achieve this goal, instantly giving your article list page powerful filtering capabilities.

The core feature revelation:archiveFiltersworking principle

archiveFiltersThe tag 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 linksWhen the user clicks on these links, the page URL will carry the corresponding filter parameters, andarchiveListLabel (when set to pagination mode)type="page"then it will automatically recognize and extract articles that meet these criteria from the database, thereby realizing multi-condition filtering display.

In simple terms,archiveFiltersThe tag's uniqueness lies in the fact that it does not require you to manually write complex filtering logic, you only need 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 links with specific URL parameters 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 makearchiveFiltersThe tag plays a role, first you need to make the "behind-the-scenes" preparation in the AnQiCMS backend---that is, define the custom fields that can be used for filtering in your content model.

Imagine if your website is a real estate information platform, you may want users to be able to filter listings based on conditions such as 'property type' (such as residential, apartment, villa), 'area range' (such as 50-80 square meters, 80-120 square meters), and so on.

In the 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 types of these fields are very critical:

• Single choice: Suitable for situations where options are fixed and the user can only select one, such as 'House Type'.
• Multiple selections: If the user can select multiple tags or properties at the same time, for example, "Property Features" (with a garden, school district house, etc.).
• Drop-down selection: Similar to single selection, but presented as a dropdown menu in the UI.

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

Step-by-step operation: How to use in the template.archiveFilters

UnderstoodarchiveFiltersThe principle and background preparation after, let's take a look at how to apply it in the front-end template.

Suppose we have a "real estate model" where we definehouse_type(house type) andarea_range(Area range) Two custom fields.

1. IntroductionarchiveFiltersTag

First, in your article list page template (for example)article/list.htmlorarchive/list.htmlUse it inarchiveFilterstags 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 tell the system to get all the filter conditions for model ID 1 (usually the article or default content model) and set the display text of the 'All' option to 'Unlimited'.filtersIt is a variable defined to receive filtered data.
• {% for item in filters %}: The outer loop iterates over each filter group, such as "House Type", "Area Range", etc.
  • {{item.Name}}: Display the friendly name of the filter group (such as “House Type”).
  • {{item.FieldName}}: This is the database field name corresponding to the filter group (such ashouse_type), although it is not displayed directly, it is generatedval.LinkPlaying a core role.
• {% for val in item.Items %}: The inner loop traverses the specific options under each filter group, such as '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