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 attributes of the content. When faced with more complex content organization needs, such as on a product list page, not only do we need to display products, but also we need to filter by multi-dimensional attributes such as 'color', 'size', 'material', etc.archiveFiltersLabels can really shine and help us easily achieve these complex content filtering and display.

Core Function and Application Scenarios

archiveFiltersThe core function of the label is to generate dynamic filtering conditions for our content model.It is not just simple classification filtering, but also the ability to delve into the content model to define custom fields, presenting these field values as filtering options to the user.

Imagine that you are building a product showcase website, where the product has attributes such as 'Color (red, blue, green)', 'Material (wooden, metal, plastic)', 'Size (large, medium, small)', etc., in addition to the regular name and description.When users visit the product list page, they hope to find the products they want quickly based on these attributes.This will be a tedious and difficult task if each filtering condition is manually written.

archiveFiltersIt is designed to solve such pain points. It can read the custom fields you configure for the content model in the AnQiCMS backend and automatically generate corresponding filter links. When users click on these links, the content displayed on the page (usually througharchiveListLabel invocation will be updated accordingly, achieving dynamic filtering.

Preparation: Define content model and custom fields.

To make use ofarchiveFiltersLabel, first you need to do some preparation work in the AnQiCMS background, that is, define the content model and add custom fields.

  1. Go to the background：Login to AnQiCMS admin panel, navigate to 'Content Management' -> 'Content Model'.
  2. Select or create a content model：You can choose existing 'Article Model', 'Product Model', or create a new content model based on business needs (for example, 'Real Estate Information').
  3. Add Custom Fields：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
    • Call field：Use English letters, such ashouse_type/area/orientation.
    • field type: In order toarchiveFiltersCan correctly identify and generate filtering conditions, it is recommended to choose types such as 'Single Choice', 'Multiple Choice', or 'Dropdown Selection'.Here, the options you enter in the "Default Value" (one per line) will be directly used as the optional values for the filter.
    • Is required：Set according to actual needs.
  4. Publish content and fill in the fields：Ensure that the content you publish is filled in with data in the corresponding custom field. Only fields with data exist,archiveFilterscan generate meaningful filter options.

Complete these steps and our website content will have the basic multi-dimensional filtering capabilities.

archiveFiltersExplanation of label parameters

archiveFiltersWhen using labels, some parameters can be used to control their behavior:

  • 变量名This is optional. If you specifyarchiveFiltersSpecify a variable name (for examplefilters），then it will store the filtered data in this variable. You can access the data through this variable name inside the tags. If not specified, it will default to direct output.
  • moduleIdSpecify the content model ID you want to generate the filter for. For example,moduleId="1"usually represents the "article model",moduleId="2"可能代表“产品模型”。这是非常重要的参数，它告诉标签应该从哪个模型中获取自定义字段来生成筛选条件。
  • allTextSet the display text when all filter conditions are not selected, such as “All”, “Unlimited”. If you do not want to display this option, you can set it toallText=false.
  • siteId：If you have enabled multi-site management and need to call data from specific sites, you can specify the site ID with this parameter.In most cases, this parameter does not need to be filled in, the system will default to fetching data from the current site.

UnderstandingarchiveFiltersData Structure

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

  • filters：An array containing multiple filtering dimensions（item）.
  • EachitemAn object represents a specific filtering condition group, such as “type of house” or “area”. It includes the following fields:
    • Name：Filter condition group display name (e.g., 'Type').
    • FieldName：Filter condition corresponding custom field name (e.g.,)house_type).
    • Items：A list of all possible values under the filter condition (val）.
  • EachvalThe object represents a specific filter option, such as “one bedroom one living room” or “Dongcheng District”. It includes the following fields:
    • LabelThe display name of the filter option (for example, “two bedrooms”).
    • Link：Click this option to jump to the URL. AnQiCMS will automatically handle URL parameters to ensure correct filtering.
    • IsCurrentAn English value, indicating whether the current option is selected. This is very useful for adding highlight styles to selected options.

Implement a filter interface in the template

With the above data structure, we can build dynamic filtering interfaces in the template. Typically, we would use nestedforloops to iterate over these 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-