In website operation, providing users with efficient and accurate content filtering features is the key to improving user experience and content discoverability.Whether it is complex real estate information, massive product SKUs, or professional industry documents, a well-designed filtering interface can allow users to quickly locate the required information.archiveFiltersThe label is a powerful tool for building such complex filtering interfaces.
Understanding the core of the filtering interface: content model and custom parameters
To build flexible filtering functionality, you first need to understand the concept of 'content model' in the 'Anqi CMS'.The Auto CMS allows us to customize content models according to business needs, such as creating a model for 'Real Estate' and another for 'Products'.In these models, we can add various custom fields to describe the different properties of the content.
For example, for a real estate website, we may define the following custom fields in the real estate model:
- House type(Single selection: residential, apartment, villa, shop)
- House layout(Single choice: one bedroom one living room, two bedrooms one living room, three bedrooms two living rooms)
- Area(Numeric range)
- Decorative degree(Single choice: rough, simple decoration, refined decoration, luxury decoration)
- Region(Drop-down selection: Beijing, Shanghai, Guangzhou, Shenzhen)
These fields defined in the content model, with types of single-choice, multiple-choice, or drop-down selection, arearchiveFiltersLabels that can be identified and used to build filter conditions. They provide structured options for users, making it convenient for us to dynamically generate filter links.
archiveFiltersEnglish: Dynamic builder for filtering conditions.
archiveFiltersTags are specifically used to generate a list of filtering conditions based on custom parameters of the content model.It will output an array that can be iterated over in the template, where each element represents a filterable parameter (such as "house typeEach parameter includes all of its optional values and corresponding filter links.
The basic usage is like this:
{% archiveFilters filters with moduleId="1" allText="全部" %}
{# 循环遍历筛选参数 #}
{% endarchiveFilters %}
Here,filtersIs our custom variable name, used to receive.archiveFiltersLabel output data.
moduleIdEnglish: Specify which content model's documents to filter. For example,moduleId="1"可能代表文章模型，moduleId="2"可能代表产品模型。这个ID需要与你在后台创建内容模型时分配的ID相对应。allTextProvide a 'All' or 'No Limit' option text for each filter parameter. If set tofalse, this option will not be displayed.
filtersThe variable itself is an array containing multiple filtering parameter objects. In the template, we will display these parameters one by one through a loop:fora loop to display these parameters one by one:
{% for item in filters %}
{# item 代表一个筛选参数，例如“房屋类型” #}
<div class="filter-group">
<span class="filter-name">{{ item.Name }}:</span> {# 显示参数名称，如“房屋类型” #}
<ul class="filter-options">
{% for val in item.Items %}
{# val 代表参数的一个可选值，例如“住宅” #}
<li class="{% if val.IsCurrent %}active{% endif %}">
<a href="{{ val.Link }}">{{ val.Label }}</a> {# 显示选项名称和对应的筛选链接 #}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
In this code block:
item.NameIt will display the parameter names defined on our backend, such as “House Type”, “Layout”.item.ItemsIt is a small array containing all the optional values.val.LabelIt will display the text of each option, such as “Residential”, “Apartment”.val.Linkis the most critical part, it contains the filter URL that the option jumps to after clicking it.The CMS will automatically generate a new URL with the corresponding query parameters based on the current page URL and the selected filtering conditions.val.IsCurrentIt is a boolean value indicating whether the current option is selected, which is useful for addingactiveClasses, implementation of highlighting is very useful.
Display of filtered results and linkage
archiveFiltersThe tag-generated filter link will automatically carry parameters (such as?房屋类型=住宅&户型=两室一厅) to the current list page. And the Anqi CMS'sarchiveListLabel is in thetype="page"Mode calls will automatically parse the query parameters from these URLs and use these parameters to filter and display the corresponding documents. This means you don't need to manually write complex query logic, just inarchiveListautomoduleIdautoarchiveFiltersauto
autopaginationauto
Below is a comprehensive example showing how to build a property filtering interface in the security CMS template:
{# 假设当前模板是房产列表页，并已定义好房产内容模型，moduleId="2" #}
<div class="filter-area">
<h3>房产筛选</h3>
{% archiveFilters filters with moduleId="2" allText="不限" %}
{% for item in filters %}
<div class="filter-group">
<span class="filter-label">{{ item.Name }}:</span>
<ul class="filter-options">
{% for val in item.Items %}
<li class="filter-item {% if val.IsCurrent %}active{% endif %}">
<a href="{{ val.Link }}">{{ val.Label }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% endarchiveFilters %}
</div>
<div class="house-list-area">
<h3>房源列表</h3>
{% archiveList archives with moduleId="2" type="page" limit="10" %}
{% for item in archives %}
<div class="house-card">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="house-thumb">
<h4>{{ item.Title }}</h4>
<p><strong>房屋类型:</strong> {% archiveDetail with name="房屋类型" id=item.Id %}</p>
<p><strong>户型:</strong> {% archiveDetail with name="户型" id=item.Id %}</p>
<p><strong>面积:</strong> {% archiveDetail with name="面积" id=item.Id %}平米</p>
{# 更多房产参数 #}
</a>
</div>
{% empty %}
<p>抱歉，没有找到符合条件的房源。</p>
{% endfor %}
{% endarchiveList %}
{# 分页导航 #}
<div class="pagination-area">
{% pagination pages with show="5" %}
<ul>
<li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
{% if pages.PrevPage %}
<li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
{% if pages.NextPage %}
<li><a href="{{pages.NextPage.Link}}">下一页</a></li>
{% endif %}
<li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
</ul>
{% endpagination %}
</div>
</div>
By the above example, we can seearchiveFiltersHow labels work with content models,archiveListandpaginationBuild a fully functional and highly dynamic filtering interface together.It greatly simplifies the development process, entrusting complex logic to the CMS internal processing, allowing content operators and template developers to focus on content and user experience.
Common Questions (FAQ)
Q:
archiveFiltersLabel can only filter custom fields in the content model?Answer: Yes,archiveFiltersTags are mainly used to filter custom parameter fields defined in content models.These fields are typically set to 'single choice', 'multiple choice', or 'drop-down selection' types when you create content models in the background, in order to provide fixed options for user filtering.archiveListTagsqParameters are searched by keywords.Question: How to add a price range or area range such as a numeric filter in the filter interface?Answer:
archiveFiltersThe label itself is mainly used for handling the classification and filtering of preset options.For numerical filters such as price range or area range, it usually requires combining custom form elements (such as input boxes, sliders) and front-end JavaScript to implement.?min_price=1000&max_price=5000), thenarchiveListThe label can be displayed through