In AnQiCMS, we often need to display website content in various ways, such as by category, by tag, or even by filtering based on specific content attributes. When faced with more complex content organization needs, such as on a product list page, we not only need to display products but also need to filter them based on custom attributes such as 'color', 'size', 'material', and so on.archiveFiltersThe label can fully showcase its capabilities, helping us easily achieve these complex content filtering and display.

Core features and application scenarios

archiveFiltersThe core role of the tag is to generate dynamic filtering conditions for our content model.It is not just a simple classification filter, but it can go deep into the content model to define custom fields, presenting these field values as filter options to the user.

Imagine that you are building a product display website, where products have standard attributes such as name, description, as well as additional attributes like 'color (red, blue, green)', 'material (wooden, metal, plastic)', and 'size (large, medium, small)'.When users visit the product list page, they hope to quickly find the products they want based on these properties.At this point, if you manually write the logic for each filter condition, it will be a tedious and difficult task to maintain.

archiveFiltersIt is precisely to solve such pain points that it was born. It can read the custom fields you configure for the content model in the AnQiCMS background and automatically generate corresponding filter links, after the user clicks on these links, the content displayed on the page (usually througharchiveListLabel call) it will be updated accordingly to achieve dynamic filtering.

Preparation: Define content model and custom fields.

To utilizearchiveFiltersLabel, first you need to do some preparations on the AnQiCMS background, that is, define the content model and add custom fields.

  1. Enter the backendLog in to the AnQiCMS backend, navigate to 'Content Management' -> 'Content Model'.
  2. Select or create a content model: You can choose from existing 'Article Model', 'Product Model', or create a new content model according to business needs (for example, 'Real Estate Information').
  3. Add custom field：Enter the editing page of the content model you have selected or created. Here, you can add new custom fields, such as:
    • field name：For example, "type of house", "house area", "orientation".
    • Field invocation: Use English letters, such ashouse_type/area/orientation.
    • Field type: In order toarchiveFiltersCan correctly identify and generate filtering conditions, it is recommended to choose 'Single Selection', 'Multiple Selection' or 'Drop-down Selection' and other types.Such, the options you fill in the "default value" (one per line) will be directly used as the optional values of the filter.
    • Mandatory?: Set according to actual needs.
  4. Publish content and fill in the fieldsMake sure you have filled in the data in the corresponding custom fields. Only fields with data,archiveFilterscan generate meaningful filter options.

After completing these steps, our website content will have the foundation for multi-dimensional filtering.

archiveFiltersParameter interpretation of tags

archiveFiltersWhen tags are used, they can be controlled by some parameters:

  • 变量名This is optional. If you specifyarchiveFiltersa variable name (for examplefilters), then the filter data returned will be stored in this variable, and you can access the data through this variable name within the tag. If not specified, it defaults to direct output.
  • moduleIdSpecify the content model ID you want to generate the filter for. For example,moduleId="1"usually represents "article model",moduleId="2"May represent a "product model". This is an important parameter, it tells the label which model to get custom fields from to generate filtering conditions.
  • allText: Set the display text when all filter conditions are not selected, such as "All", "Unlimited". If you do not want to display this option, it can be set toallText=false.
  • siteIdIf you have enabled multi-site management and need to call data from a specific site, you can specify the site ID through this parameter.In most cases, this parameter does not need to be filled in, and the system will automatically retrieve the data of the current site.

UnderstandingarchiveFiltersdata structure

When you usearchiveFiltersLabel and store the result in a variable (for examplefilters), this variable is actually a nested array object, with a clear structure and easy for us to loop render:

  • filtersA list containing multiple filtering dimensions(item).
  • EachitemAn object represents a specific filtering condition group, such as "type" or "area". It includes the following fields:
    • Name: The display name of the filter condition group (for example, "Type of house").
    • FieldName: The custom field name corresponding to the filter condition (for example,house_type)
    • Items: A list containing all the selectable values under the filter condition (val).
  • EachvalAn object represents a specific filtering option, such as "one bedroom one living room" or "Dongcheng District". It includes the following fields:
    • Label: The display name of the filtering option (e.g., "two bedrooms").
    • LinkClick this option to jump to the URL. AnQiCMS will automatically handle the URL parameters and ensure proper filtering.
    • IsCurrentA boolean value indicating whether the current option is selected. This is very useful for adding highlight styles to selected options.

Implementing a filtering interface in the template.

With the above data structure, we can build a dynamic filtering interface in the template. Usually, we would use nestedforloops to traverse the data.

`twig {# Parameter filtering code area #}

<h3>内容筛选</h3>
{% archiveFilters filters with moduleId="1" allText="不限" %} {# 假设模型ID为1，显示“不限” #}
    {% 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-option {% if val.IsCurrent %}active{% endif %}">
                <a href="{{ val.Link }}">{{ val.Label }}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
{% endarchiveFilters %}

{# Document list code area, it will automatically respond to the above filtering conditions #}

{% archiveList archives with moduleId="1" type="page" limit="10" %} {# 同样指定模型ID为1，并开启分页 #}
    {% for archive_item in archives %} {# 遍历筛选后的文档列表 #}
    <div class="content-