In the AnQi CMS, implementing the multi-condition filtering feature for the document list page, especially the filtering based on custom parameters, is crucial for enhancing user experience and helping users quickly find the content they need.The Anqi CMS, with its flexible content model and powerful template tag system, makes this feature both efficient and intuitive.

The entire process can be divided into several core steps: first, define your content model and custom filter fields in the background; second, build the display interface for the filter conditions in the template; finally, present the filtered results in the document list using list tags.

一、Preparation: Define Content Model and Custom Fields

To implement filtering based on custom parameters, we first need to ensure that the content itself includes these parameters available for filtering.The CMS provides flexible content model management functions, allowing users to customize fields according to business needs.

  1. Enter content model management：Login to the Asecurity CMS backend, navigate to 'Content Management' -> 'Content Model'.Here, you can choose to modify the existing content model (such as 'Article Model' or 'Product Model') or create a new model.

  2. Add Custom FieldsIn the content model editing page, find the 'Content Model Custom Fields' area. Click Add Field, and you need to configure the following key items:

    • Parameter nameThis is the display name of the field, for example, "House Type
    • Call fieldThis is the unique identifier used to call this field in the template, it is usually recommended to use letters, such ashouseType/region/priceRange. This field name will be used directly in the URL query parameters.
    • field typeThis is very important.For easy filtering, we usually choose types such as 'Single Selection', 'Multiple Selection', or 'Dropdown Selection'.These types can provide preset options to generate standardized filtering conditions.
    • Default valueIf the "Single ChoiceEach option takes up a line, and the system will automatically parse it as an independent filtering item.For example, in the "House Type
    • Is requiredAccording to your business requirements set.

By following these steps, you have added custom parameters with filtering potential to the content model.For example, add fields such as 'floor plan' (single selection, options: one bedroom, two bedrooms, three bedrooms) and 'decoration' (single selection, options: finished, raw, simple decoration) to the property model.

Second, core functions: Build a display interface for filter conditions.

The custom parameter definition is completed, and then these filtering conditions need to be displayed on the front-end page for users to select. This is mainly achieved through the security CMS providedarchiveFilterstags.

  1. Choose the appropriate template file: The template file corresponding to the document list page is usually{模型table}/list.htmlor{模型table}/list-{文档分类ID}.html. In this file, you need to insert the template code for filtering conditions.

  2. UsearchiveFilterstags:archiveFiltersTags are specifically used to generate a list of filtering conditions based on custom parameters of the model.It will traverse the custom fields suitable for filtering that you define for the specified model, and generate corresponding filter links for each field option.

    It supports the following parameters:

    • moduleId：Specify the content model ID to be filtered. For example,moduleId="1"Represents the article model,moduleId="2"Represents the product model. If the current page is itself a list page for a model, this parameter can be omitted, and the system will automatically identify it.
    • allText：Used to set the display text of the “All” option for each filtering condition item, such as “No limit”, “All”, etc. If you do not want to display it, you can set it tofalse.

    archiveFiltersLabel will return an array object containing all filtered fields and their options. Each field object includesName(parameter name),FieldName(the called field) andItems(all options of this field).ItemsThe each option in the array also includesLabel(Display text of the option),Link(Filter link) andIsCurrent(Whether currently selected) and

  3. Build a filter interface example：The following is a typical code structure of a filter interface:

    <div class="filter-area">
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
        <ul class="filter-group">
            <li class="filter-name">{{ item.Name }}:</li>
            {% for val in item.Items %}
            <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                <a href="{{ val.Link }}">{{ val.Label }}</a>
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

    This code will iterate through all the selectable custom fields and generate one for each field (such as “House Type”, “Decor”):<ul>List, and display all options of this field in it. Each option will generate a link, clicking on which will take the corresponding query parameters to jump to the current list page, and at the same timeIsCurrentProperties can help us add filters to the currently selected conditions.activeClass, to implement highlight display.

3. Linked display: Make the filter results take effect in the document list.

When the user clicks the filter link, the URL will contain parameters like?houseType=三居室&decoration=精装修. At this time, the document list needs to recognize and respond to these parameters, only displaying documents that meet the criteria.

  1. UsearchiveListtagsIn the document list page, we usearchiveListtags to retrieve and display document data. The key is to settype="page"so thatarchiveListTags can automatically parse query parameters from the URL and apply them as filtering conditions to document queries.

    archiveListTags support various parameters, the most important of which is:

    • type="page"：Tell the tag that this is a paginated list that will automatically handle the filtering parameters and page number in the URL.
    • moduleId：Specify the model to which the document to be displayed belongs.
    • limit：Control the number of documents displayed per page.
    • Other parameters such ascategoryId/order/q(search keywords) can also be used as needed.

  2. Build an example of document column representation:

    <div class="document-list">
    {% archiveList archives with type="page" moduleId="1" limit="10" %}
        {% for item in archives %}
        <div class="document-item">
            <a href="{{ item.Link }}">
                <h3>{{ item.Title }}</h3>
                <p>{{ item.Description }}</p>
                <div class="meta">
                    <span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
                    <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>浏览量: {{ item.Views }}</span>
                </div>
            </a>
        </div>
        {% empty %}
        <p>没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}
</div>


{# 分页导航 (需配合 type="page" 使用) #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 分页逻辑代码，此处省略，可参考文档 tag-pagination.md #}
        <!-- 示例: 首页、上一页、页码、下一页、末页链接 -->
    {% endpagination %}
</div>

    By settingtype="page",archiveListwill automaticallyarchiveFiltersThe generated query parameters passed after clicking the URL are recognized as filter conditions.It will filter documents based on these parameters and only display documents that meet the criteria.paginationLabel, realize correct pagination under filtering conditions.

IV. Integration and Optimization: A complete example of a filtering page.

Integrate the above filtering condition display and document list display code into the same template file (for exampleproduct/list.html), and you will form a multi-condition filtering document list page with complete functions.

For example, on a real estate website's list page, users can select conditions such as 'type of house', 'area', 'price range', etc. to filter:

`twig {# 筛选条件展示区 #}