How to help visitors quickly find the information they are interested in on a content-rich website 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.archiveFiltersTags can really shine, they 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 publishes a large amount of housing information, product lists, or industry reports. Visitors may not only want to search through "area" or "category", but also hope to combine and filter based on multiple conditions such as "price range", "house type", "publish date", or "report type", "industry field". Manually maintaining these complex filter combinations is almost an impossible task, andarchiveFiltersIt is designed to solve such challenges.
Laying the foundation for multi-dimensional filtering: Understanding 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 your business needs, such as "Real Estate Model", "Product Model", or "Industry Report Model".
Each content model can customize multiple fields.These custom fields are the core of building multi-dimensional filtering conditions.For example, in the “Real Estate Model”, you can add fields such as “House Type” (radio buttons: studio, two-bedroom, etc.), “Area” (drop-down selection: South City, North City, etc.), “Price Range” (single line text or numeric range), and “Release Year” (numeric).archiveFiltersIt can automatically identify these fields and convert them into filter conditions available for visitors to select.
Custom fields support multiple 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, making it convenient for the system to generate accurate filtering conditions.
archiveFiltersThe core function of tags and parameter parsing
archiveFiltersThe main responsibility of the label is to dynamically render the filtering fields and their corresponding options that you define in the backend content model on the front-end page. It usually works with the document list labelarchiveListAnd pagination labelpaginationUsed 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 that need to be understood:
filtersThis is the variable name you define for the filtering result set. Through this variable, you can access all generated filtering conditions and their options within the label.moduleIdThis parameter is very critical, it tellsarchiveFilterswhich content model you want to generate the filter conditions based on. For example,moduleId="1"usually corresponds to the default article model on the back end,moduleId="2"May correspond to 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 filtering page or wants to cancel a certain filtering condition, there is usually an option for 'All' or 'Unlimited'.allTextParameters are used to set this text content. If you do not want to display this option, you can set it toallText=false.siteId：If you have used the multi-site management function of AnQiCMS and want to filter data from other sites,siteIdTo specify. For most single-site users, this parameter usually does not need to be filled in manually.
filtersThis variable itself is an array object, which contains information about each filter field. For eachitem(i.e., a filter field), you will find the following key properties:
NameThis is the Chinese display name of the filter field, for example, 'Room type', 'Area'.FieldNameThis is the actual field name of the screening field in the database, for example, “house_type”, “area”.ItemsThis is an embedded array that contains all available options for this filtering field.
whileItemsEach item in theval(i.e., a filtering option) also contains:
LabelThis is the Chinese display text of the filter option, for example, 'One bedroom', 'South of the city.'LinkThis is the URL address that is jumped to after clicking the filter option, which includes the corresponding filter parameters. AnQiCMS will automatically build this URL.IsCurrentThis is a boolean value indicating whether the current option has been selected. This is very useful for highlighting the current filter status in front-end styles.
Practice makes perfect: Building a dynamic filtering interface
After understanding the basic concepts, we demonstrate through a practical code snippetarchiveFiltersHow to work witharchiveListandpaginationLabel collaboration, create a complete dynamic filtering interface. Assume we have a real estate list page and need to filter by "type of housing" 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 above code,archiveFiltersGenerated all possible filter options. Each option includesval.Linkautomatically includes the current page