What do the `Name` and `FieldName` fields represent in the `filters` variable? How are they used in the template?

As an experienced website operations expert, I am well aware of the importance of efficient and flexible template usage in content management systems (CMS) for website operation efficiency and user experience.AnQiCMS, with its simple and efficient features, provides us with powerful content operation tools, especially its flexible template tag system, making content display as easy as pie.

Today, we will delve into a very practical feature of AnQiCMS template development -archiveFiltersgenerated by tagsfiltersvariables, especially the two core fields:NameandFieldNameWhat they represent and how to skillfully use them in templates to achieve dynamic, user-friendly content filtering functionality.

Why is it neededfiltersIn variables,NameandFieldName?

In modern website operations, especially for websites with rich content and diverse categories (such as e-commerce, real estate, information platforms), users often need to filter content based on multiple dimensions.For example, a real estate website may need to filter by conditions such as 'property type' (residential, commercial), 'area' (urban, suburban), 'house type' (2 bedrooms and 1 living room, 3 bedrooms and 2 living rooms), and so on.The Anqi CMS provides a powerful "content model custom field" feature, allowing us to define these filtering dimensions according to business needs.

archiveFiltersThe tag is designed by AnqiCMS to dynamically display these custom filtering dimensions on the front-end template and enable filtering functionality. It generates a set of all filterable parameters based on the fields defined in the back-end content model.filtersvariable. ThisfiltersThe core charm of variables lies in the clear separation of "the name displayed to the user" and "the field identifier used internally in the system"—this is preciselyNameandFieldNamewhere their respective responsibilities lie.

NameField: Friendly display name of the filter parameter

InfiltersIn the variable, each filter parameter is an object,NameThe field represents the filter parameter on the front-end pageUser-friendly name displayedImagine that if you define a custom field in the background, its purpose is to allow users to select the "type of house", then this field'sNameIt should be 'House Type' or 'Property Type'.

For example:

• If you have a custom field to represent the 'Floor Area' of the property, then it might beName'Floor Area'.
• If you have a custom field to represent the 'color' of a product,Nameit might just be 'color'.

NameThe value of the field lies in its enhancement of user experience.The user can intuitively understand the meaning of each filtering condition when visiting the website, thereby finding the content they need more efficiently.It is the bridge connecting backend configuration with user perception.

FieldNameField: System internal parameter identifier

withNameField relative,FieldNameThe field represents where the filtering parameter is locatedThe unique identifier within the systemIt is usually a combination of English letters or pinyin, used to construct URL parameters, query in databases, or identify the filtering condition in backend logic.FieldNameIs a system-level concept, not directly displayed to the end user, but crucial for implementing filtering functions.

For example:

• IfNameIs a 'House Type', thenFieldNameIt could behouseType. When the user selects "Residential", the URL may contain?houseType=住宅such parameters.
• IfNameis "Floor Area",FieldNameIt could bearea.
• IfNameis "Color",FieldNameIt could becolor.

FieldNameThe primary function is to ensure the accuracy and uniqueness of filtering requests. On the front end, when we click on a filtering condition, we need to match the correspondingFieldNameAnd its value is passed as a URL parameter to the backend. The backend receivesFieldNameAfter that, it can accurately identify the conditions the user wants to filter and perform the corresponding data processing and return.

How to use in the templateNameandFieldName?

UnderstoodNameandFieldNameAfter the meaning, let's see how to actually use them in the AnqiCMS template to build a fully functional filter

archiveFiltersThe tag will generate afiltersA variable, this variable is an array where each element represents a filterable parameter (i.e., a custom field). Each parameter object containsName/FieldNameand all optional values of the parameter (usually inItemsthe form of an array).

Below is a typical AnqiCMS template code snippet demonstrating how to usearchiveFiltersTags andfiltersCreate a dynamic content filter using a variable:

{# 假设我们正在一个文章列表页，需要根据自定义字段进行筛选 #}

<div class="filter-section">
    <div class="filter-title">内容筛选</div>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {# 遍历所有的筛选参数（即后台定义的自定义字段） #}
        {% for item in filters %}
            <ul class="filter-group">
                {# 使用 item.Name 显示筛选参数的友好名称 #}
                <li class="group-name">{{ item.Name }}: </li>
                <li class="filter-options">
                    {# 遍历每个筛选参数的可选值 #}
                    {% for val in item.Items %}
                        <span class="filter-option {% if val.IsCurrent %}active{% endif %}">
                            {# val.Link 已经包含了完整的筛选URL，包括FieldName和val.Label #}
                            <a href="{{ val.Link }}">{{ val.Label }}</a>
                        </span>
                    {% endfor %}
                </li>
            </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

{# 筛选结果的内容列表，通常配合 archiveList 标签 #}
<div class="content-list">
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for archive_item in archives %}
            <div class="list-item">
                <h3><a href="{{ archive_item.Link }}">{{ archive_item.Title }}</a></h3>
                <p>{{ archive_item.Description }}</p>
                {# ... 其他内容显示 ... #}
            </div>
        {% empty %}
            <p>抱歉，没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航，配合 archiveList 的 type="page" 使用 #}
    {% pagination pages with show="5" %}
        <div class="pagination-nav">
            {# 首页 #}
            <a href="{{ pages.FirstPage.Link }}" class="{% if pages.FirstPage.IsCurrent %}active{% endif %}">{{ pages.FirstPage.Name }}</a>
            {# 上一页 #}
            {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>{% endif %}
            {# 中间页码 #}
            {% for page_num in pages.Pages %}
                <a href="{{ page_num.Link }}" class="{% if page_num.IsCurrent %}active{% endif %}">{{ page_num.Name }}</a>
            {% endfor %}
            {# 下一页 #}
            {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>{% endif %}
            {# 尾页 #}
            <a href="{{ pages.LastPage.Link }}" class="{% if pages.LastPage.IsCurrent %}active{% endif %}">{{ pages.LastPage.Name }}</a>
        </div>
    {% endpagination %}
</div>

In this example, we first use{% archiveFilters filters ... %}tag to getfiltersvariable. Then, through each one in the firstforLoop throughfiltersarrayitem. Inside the loop,item.Nameis used to display the filter condition title to the user (such as “House Type”), whileitem.Itemscontains all the optional values under that condition.

It is worth noting that,val.LinkThis field has been handled by AnqiCMS for us, it will automatically build the correct one based on the current page URL and selected filter conditions, includingFieldNameand the URL corresponding to the filter value. For example, ifFieldNameIshouseTypethe filter value is "residential",val.Linkit might be something similarcurrent_url?houseType=住宅The link. In this way, front-end developers do not need to manually concatenate complex URL parameters, greatly simplifying the development process.

Summary and **practice**

filtersVariable