How to iterate over and display each filter parameter's optional values and their corresponding links for the `archiveFilters` tag?

Good, as an experienced website operation expert, I am more than happy to analyze AnQi CMS in depth.archiveFiltersThe subtlety of the label, and how to flexibly apply it in practice, building a content filtering function that is both beautiful and practical.

In-depth analysis of AnQi CMS:archiveFiltersLabel, build a dynamic content filtering tool

In the world of content management, how to enable users to quickly find the information they need is the key to improving website experience and conversion rates. Anqi CMS understands this well, with its powerful template tag system, archiveFiltersTags are designed as tools to achieve this goal.It allows us to easily traverse and display each filter parameter's optional values and their corresponding links, providing visitors with an intuitive and efficient content filtering experience.

archiveFiltersThe core function and role of the tag

Imagine you are running an e-commerce website with a variety of products, and users want to filter products based on multiple attributes such as "color", "size", "brand", and so on; or, you are an estate information platform, and users need to find housing resources based on conditions such as "house type", "area", "price range", and so on. WithoutarchiveFiltersBefore the label, you may need to manually build a large number of filtering conditions and links, which is not only a huge amount of work but also difficult to maintain.

archiveFiltersTags are created to meet such dynamic filtering needs. Their core function is:

1. Dynamically obtain filterable parameters:It can automatically identify all the custom parameters that can be used for filtering based on the current content model or a specified model (for example, the fields you create in the content model such as "house type
2. Traverse and display parameter options:For each selectable parameter, it lists all predefined, existing, or associated option values (such as "one bedroom one living room", "red", "Xiaomi").
3. Generate filter link:It is particularly important that it will dynamically generate a URL link with a filtering parameter for each option value.After the user clicks on these links, the page will automatically refresh and only display content that meets the filtering criteria.
4. Identify the current selected state:It can also intelligently judge and mark the selected filter conditions that have been selected, making it convenient for users to understand the current filtering status and proceed to the next step of operation.

In short,archiveFiltersTags are an intelligent filter constructor that draws inspiration from the background content model configuration, automatically converting complex filtering logic into an interactive filter interface on the front end, thereby greatly enhancing the efficiency and usability of users in searching for content and the website.

Get to know in-deptharchiveFiltersUsage method of the tag

archiveFiltersThe usage method is concise and powerful, and its basic structure is:

{% archiveFilters 变量名 with moduleId=1 allText="全部" %}
    {# 筛选参数的遍历与显示逻辑 #}
{% endarchiveFilters %}

here,变量名Is a variable you define to receivearchiveFiltersAll filtered data processed. For example, we can name itfilters.

Understand core parameters:

• moduleId:This is a crucial parameter. It tellsarchiveFiltersYou want to generate a filter condition based on which content model. For example, if you want to filter content under the "Article" model and the model ID is 1, you need to setmoduleId="1". If not specified, it will try to get the model ID of the current page context.
• allText:This parameter is used to set the display text for the "All" or "Unlimited" option of each filter parameter. For example, you can set it toallText="所有"orallText="不限户型"If you do not want to display this 'All' option, you can set it toallText=false.
• siteId:In a multi-site management scenario, if you need to retrieve filtered data from other sites, you can usesiteIdSpecify the target site. Usually, this parameter does not need to be manually set.

Reveal the internal data structure:

WhenarchiveFiltersAfter the tag is executed, it will store the processed data in the location you define.filtersIn the variable. ThisfiltersThe variable itself is an array that contains all the parameter types available under your content model.

1. Each parameter'sitemObject:Each element in the array is calleditem, representing an independent filter parameter type (such as "house type" or "color"). Eachitemincludes the following properties:

   • Name: The display name of the filtering parameter, such as 'Apartment Type', 'Price Range'.
   • FieldName: The field name of the filtering parameter in the database, used for internal identification and URL construction.
   • ItemsThis is an embedded array that contains all the specific values that the parameter can have.

2. Each option'svalObject: ItemsEach element in the array is calledvalEach one represents a specific filter option (such as "three bedrooms and one living room" or "red"). Eachvalincludes the following properties:

   • Label: The display text of the filter option, such as "three bedrooms and one living room", "two bedrooms".
   • LinkThe most critical attribute, this is a URL link that can be clicked directly to apply the filter condition.The Anqi CMS will automatically build this link based on the current page URL and the filter conditions you select.
   • IsCurrentA boolean value (trueorfalse) indicates whether the current filter option has been selected. This is very useful for highlighting the current filter condition on the front end.

Actual operation example: Build a dynamic filtering interface

Next, let's demonstrate how to use with a specific code examplearchiveFiltersTag traversal and display these filtered parameters and their corresponding links. Usually,archiveFilterswill be witharchiveList(Document list tag) andpagination(Pagination tag) combined to achieve complete dynamic filtering and pagination functionality.

`twig {# Display area for filtering parameters #}

<h4>内容筛选：</h4>
{% 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-option {% if val.IsCurrent %}active{% endif %}">
                <a href="{{ val.Link }}">{{ val.Label }}</a>
            </li>
        {% endfor %}
    </ul>
    {% endfor %}
{% endarchiveFilters %}

{# Document list display area #}

{# 遍历并显示筛选后的文档内容 #}
{% for item in archives %}
<div class="archive-item">
    <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
    <p>{{ item.Description }}</p>
    <p>发布时间: {{ stampToDate(item.CreatedTime, "2006-01-02") }} | 浏览量: {{ item.Views }}</p>
</div>
{% empty %}
<p>没有找到符合条件的文档。</p>
{% endfor %}

{# 分页导航区域 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        <a class="{% if pages.FirstPage.IsCurrent %}current{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for page in pages.Pages %}
            <a class="{% if page.IsCurrent %}current{% endif %}" href="{{page.Link}}">{{page.Name}}</a>
        {% endfor