How to help visitors quickly find the information they are interested in on increasingly rich websites is the key to improving user experience and website efficiency.The traditional fixed category navigation often fails to meet users' multi-dimensional and personalized filtering needs.This is provided by AnQiCMS at this timearchiveFiltersThe tag can shine, it can help us dynamically display multi-dimensional content filtering conditions, making your website content management and presentation more flexible and intelligent.
Imagine if your website posted a large number of real estate listings, product catalogs, or industry reports, visitors may not only want to search through "area" or "category", but they may also hope to filter simultaneously according to various conditions such as "price range", "house type", "release date", or "report type", "industry field", and so on. Manually maintaining these complex filtering combinations is almost an impossible task, andarchiveFiltersIt is designed precisely to solve such challenges.
Build the foundation for multi-dimensional filtering: understand content models and custom fields
To makearchiveFiltersThe label plays a role, we first need to lay a good structural foundation for the content, which is the strength of AnQiCMS -Flexible content modelIn the background "Content Model" management, you can create or modify models according to business needs, such as "Real Estate Model", "Product Model", or "Industry Report Model".
Each content model can be customized with multiple fields. These custom fields are the core of building multi-dimensional filtering conditions.For example, in the 'real estate model', you can add 'house type' (single choice: one-bedroom, two-bedroom, etc.), 'area' (dropdown selection: south city, north city, etc.), 'price range' (single-line text or numeric range), 'year of release' (number), and other fields.When publishing specific content, operations personnel only need to fill in these fields,archiveFiltersThese fields can be automatically recognized and converted into filter conditions available for visitors to select.
Custom fields support various types, such as single-line text, numbers, multi-line text, and single-choice, multi-choice, and dropdown selections that are more suitable for filtering.For the filtering function, we usually choose the last three types, which allow us to preset options for convenience in generating accurate filtering conditions.
archiveFiltersThe core function of the tag and parameter parsing
archiveFiltersThe main responsibility of the tag is to dynamically render the filter fields and their corresponding options defined in the backend content model on the front-end page. It usually works with the document list tagarchiveListAnd pagination labelspaginationUsed together, they constitute a complete filtering experience.
Let's take a look at the basic usage of this tag:
{% archiveFilters filters with moduleId="1" allText="全部" %}
{# 在这里循环输出筛选条件 #}
{% endarchiveFilters %}
There are several important parameters to understand:
filtersThis is the variable name you define for the filtered result set. Through this variable, you can loop through all the generated filter conditions and their options inside the tag.moduleIdThis parameter is very critical, it tellsarchiveFilterswhich content model you want to generate the filtering conditions based on. For example,moduleId="1"usually corresponds to the default article model on the back end,moduleId="2"The value may correspond to the product model. You need to set it according to your actual model ID to ensure that the filtering conditions match the content.allTextWhen a visitor first enters the filter page, or wants to cancel a filter condition, there is usually an 'All' or 'Unlimited' option.allTextThe parameter is used to set this text content. If you do not want to display this option, you can set it toallText=false.siteIdIf you have used the multi-site management feature of AnQiCMS and want to filter data from other sites, you can do so bysiteIdSpecify. For most single-site users, this parameter usually does not require manual entry.
filtersThis variable itself is an array object that contains information about each filtering field. For each of themitem(i.e., a filtering field), you will find the following key properties:
NameThis is the Chinese display name of the filtering field, for example, 'room type', 'area'.FieldNameThis is the actual field name of the filtering field in the database, for example, 'house_type', 'area'.ItemsThis is an embedded array that contains all available options for the filtering field.
AndItemsEach in the arrayvalThat includes: another filtering option:
LabelThis is the Chinese display text of the filter options, for example, 'One-bedroom', 'South City'.LinkThis is the URL address to which you will be redirected after clicking on this filter option. AnQiCMS will automatically build this URL for you.IsCurrentThis is a boolean value indicating whether the current option has been selected. This is very useful for highlighting the current filter state in the front-end style.
Practice makes perfect: Build a dynamic filtering interface
After understanding the basic concepts, we demonstrate through an actual code snippetarchiveFiltersHow to witharchiveListandpaginationTag collaboration to create a complete dynamic filtering interface. Suppose we have a real estate listing page that needs to be filtered according to 'house type' and 'area'.
{# 1. 首先，渲染动态筛选条件区域 #}
<div class="filter-section">
<h3 class="visually-hidden">内容筛选</h3>
{% archiveFilters filters with moduleId="1" 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-option {% if val.IsCurrent %}active{% endif %}">
<a href="{{ val.Link }}">{{ val.Label }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% endarchiveFilters %}
</div>
{# 2. 接着，渲染文档列表以显示筛选结果 #}
<div class="archive-list-area">
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<div class="archive-item">
<a href="{{ item.Link }}">
<h4>{{ item.Title }}</h4>
<p>{{ item.Description|truncatechars:100 }}</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>
{% if item.Thumb %}
<a href="{{ item.Link }}" class="archive-thumb">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</a>
{% endif %}
</div>
{% empty %}
<p class="no-content">当前筛选条件下没有找到相关内容。</p>
{% endfor %}
{% endarchiveList %}
</div>
{# 3. 最后，添加分页功能 #}
<div class="pagination-area">
{% pagination pages with show="5" %}
<ul class="pagination-list">
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{% if pages.PrevPage %}
<li class="page-item"><a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a></li>
{% endif %}
{% for item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Name }}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-item"><a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a></li>
{% endif %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
</li>
</ul>
{% endpagination %}
</div>
In the code above,archiveFiltersGenerated all possible filter options. Each option'sval.Linkwill automatically include the current page.