How to filter tags through document parameters to achieve a list content combination display with multiple conditions?

In content operation, we often need to display lists of content with different themes and attributes, and allow visitors to filter based on their own needs through multi-condition filtering, for example, a real estate website may need to filter housing resources in multiple dimensions such as 'type of house', 'area', and 'area range'.If it is organized manually or developed customarily every time, it is not only inefficient but also difficult to maintain.AutoCMS (AutoCMS) provides a flexible and powerful document parameter filtering mechanism that can help us easily achieve the display of a list of content with multiple conditions.

Next, we will delve into how to use the document parameter filtering tags of the Aanqi CMS to build a dynamic content list that meets user needs and is easy to manage.

The foundation of building a flexible filtering system: Custom content model

In the Auto CMS, the first step to implementing multi-condition filtering is to define clear, filterable attributes for our content.This is due to its powerful 'flexible content model' feature.We can create or modify content models based on business requirements (such as "article model

These custom fields are the source of our multi-condition filtering.When adding fields, you can choose different field types, such as single-line text, number, multi-line text, single selection, multiple selection, and dropdown selection.Single choice, multiple choice and dropdown choiceThese three types are especially suitable for use as filtering conditions. For example, in the 'property model', we can add:

  • House type(Drop-down selection: Residential, Shop, Apartment)
  • House layout(Single selection: One bedroom, Two bedrooms, Three bedrooms)
  • Decorating situation(Multiple selection: Fully decorated, Simple decorated, Raw)
  • Region(Single line text, but can be configured as a filter condition in the background)

When defining these fields, we also need to provide default values for selection, radio, and checkbox field types. These values will serve as optional items on the front-end filtering interface.

Content release: Data filtering provided

After custom content model and field definitions are completed, we need to fill in the content of these custom fields specifically when publishing or editing documents.Only when the document contains this parameter information, can they be correctly retrieved and displayed in the front-end filter list.For example, when publishing a property information, we will choose its 'House Type', 'Layout', and 'Decorative Condition', and fill in the 'Belonging Area'.

Design front-end filtering interface:archiveFiltersThe magic use of tags

Now, we have filterable content and defined dimensions. Next is how to display these filtering conditions on the website front-end. Anqi CMS providesarchiveFiltersLabel, used specifically to generate these filters.

This label will intelligently read the custom fields you define in the content model and dynamically generate filter links based on the current page URL.We can place it anywhere that needs to display a filter, such as the sidebar or top of the list page.

Here is a typicalarchiveFiltersLabel and its usage examples:

{# 参数筛选代码 #}
<div class="filter-section">
    <div class="filter-title">参数筛选：</div>
    {% archiveFilters filters with moduleId="1" allText="全部" %}
        {% for item in filters %}
        <ul class="filter-group">
            <li class="group-label">{{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 %}
</div>

In this code snippet:

  • filtersIs our custom variable name, used to receive.archiveFiltersThe data returned by the label.
  • moduleId="1"指定了我们希望筛选的是ID为1的内容模型（例如“文章模型”）。If we need to filter 'Product Model' or 'Property Model', we need to replace them with the corresponding model ID.
  • allText="全部"Set the display text for the "All" option in each filter group, if you do not want to display it, you can set it toallText=false.
  • {% for item in filters %}Loop through all available filter parameters,item.NameIt will display the Chinese name of the parameter (such as “House Type”),item.FieldNamewhich is the corresponding field name.
  • {% for val in item.Items %}Then, we traverse the optional values under each parameter,val.LabelIs the display text of the option (such as "Residential"), whereasval.Linkis the URL automatically generated by the Anqi CMS, which includes the current filtering conditions.
  • {% if val.IsCurrent %}active{% endif %}This line of code is very useful, it automatically determines whether the current option is selected, thereby facilitating the addition of CSS styles to selected items and enhancing the user experience.

In this way,archiveFiltersThe tag not only helps us build the filter UI, but more importantly, itautomatically handles the filtering logic, and uses the selected parameters as the query string of the URL (for example?house_type=住宅&area=市中心附加到链接上。

动态展示内容列表：archiveList标签的智能响应

With the filtering interface, we need a list that can dynamically display content based on these filtering conditions. The Anqi CMS'sarchiveListThe tags here show their intelligence.

archiveListTags intype="page"in mode, it not only can realize the pagination function, but alsoautomatically parse the query parameters in the current URLauto: ，and use these parameters as filtering conditions to query matching document content. This means that we do not need to manually obtain URL parameters in the template and pass them toarchiveListEverything is done automatically!

The following is an example used with the above filterarchiveListLabel example:

"`twig {# Document list code #}"

{% archiveList archives with moduleId=“1” type=“page” limit=“10” %}

{% for item in archives %}
<div class="list-item">
    <a href="{{item.Link}}">
        <h5 class="item-title">{{item.Title}}</h5>
        <p class="item-description">{{item.Description}}</p>
        <div class="item-meta">
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>阅读量：{{item.Views}}</span>
        </div>
    </a>
    {% if item.Thumb %}
    <a href="{{item.Link}}" class="item-thumb">
        <img alt="{{item.Title}}" src="{{item.Thumb}}">
    </a>
    {% endif %}
</div>
{% empty %}
<p class="no-content">该列表没有任何内容</p>
{% endfor %}

{% endarchiveList %}

{# 分页代码 #}
<div class="pagination-section">
    {% pagination pages with show="5" %}
        <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}
        <a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
        {% endif %}
        {% for item in pages.Pages %}
        <a class="pagination-link {% if item.IsCurrent %}active{% endif %