As an experienced CMS website operation personnel of an enterprise, I am well aware of the importance of building an efficient and user-friendly content filtering interface for improving user experience and content discoverability.In AnQiCMS, with its flexible content model and powerful template tag system, we can easily create a multi-condition filtering interface based on document parameters.This not only helps readers quickly find the information they need, but also effectively improves the organization and SEO performance of the website content.
The foundation of creating a multi-condition filtering interface: understanding document parameters
In AnQiCMS, document parameters are the core of multi-condition filtering.These parameters are actually the fields you customize for specific document types (such as articles, products, etc.) in the 'Content Model'.For example, if you operate a real estate website, you may define custom fields such as 'House Type' (apartment, villa, shop), 'Area' (Haidian, Chaoyang, Fengtai), and 'Price Range' for the 'Real Estate' content model.These custom fields and their default values will be directly displayed as filter conditions on the front end.
In order to create a filtering interface in the template, you first need to ensure that your content model is configured with custom fields that can be used for filtering.In the AnQiCMS backend, by going to the "Content Management" under the "Content Model" feature, you can create or edit content models.In the custom field settings of the model, select an appropriate field type (such as single selection, multiple selection, drop-down selection), and set their default values.These are the default values that the front-end filter will display.For example, the "House Type" field can be set to default values such as "Apartment", "Villa", "Shop", with each value occupying a line.
Build the filtering interface: usearchiveFiltersTag
In AnQiCMS template files,archiveFiltersThe tag is the key to generating a multi-condition filter interface. This tag can automatically obtain all document parameters available for filtering under the current module or specified module, and intelligently judge which filter conditions have been selected based on the current URL query parameters.
UsearchiveFiltersWhen tagging, you can specifymoduleIdTo obtain the filtering parameters of a specific content model, for examplemoduleId="1"Indicates the article model.allTextParameters are used to set the display text for the 'All' or 'Unlimited' option. If the option is not needed, it can be set tofalse. This tag will return a collection of various filtering parametersitem）and its corresponding options（item.Items）array. Each option（val）not only has its display text（val.Label），but also has the generated filter link（val.Link) and a boolean value indicating the current selection statusval.IsCurrent)
The following is an example of the code to build the filtering interface part in the template
{# 参数筛选代码区域 #}
<div>
<h3>文档筛选：</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>
This code will iterate over all filterable parameters (such as "house type", "area") and generate a list item with the correct link for each option under each parameter (such as "apartment", "villa"). When the user clicks on a filter option,val.LinkIt will ensure that the URL adds or updates the corresponding query parameters correctly.val.IsCurrentIt allows you to add a highlight style to the currently selected filter option using CSS to provide clear visual feedback.
Display filtered results:archiveListTags and pagination
The filter has generated a URL with parameters, next we needarchiveListTags to receive these parameters and display the corresponding document list.archiveListThe tag is intype="page"In this mode, it can intelligently parse the query parameters of the current URL and filter out matching documents according to these parameters.This means you don't have to manually write complex logic to parse the filtering conditions in the URL, AnQiCMS will automatically handle these.
At the same time, in order to provide a good user experience, the filtering results usually need to be combined with pagination functions.archiveListwith the tag andpaginationTags can be used together to easily achieve pagination display.
This is an example of the code for document list and pagination:
{# 文档列表区域 #}
<div class="document-list">
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<div class="document-item">
<a href="{{ item.Link }}">
<h4>{{ item.Title }}</h4>
<p>{{ item.Description }}</p>
<div class="meta-info">
<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="thumbnail">
<img alt="{{ item.Title }}" src="{{ item.Thumb }}">
</a>
{% endif %}
</div>
{% empty %}
<p class="no-results">根据您的筛选条件，暂无相关文档。</p>
{% endfor %}
{% endarchiveList %}
{# 分页代码区域 #}
<div class="pagination-controls">
{% pagination pages with show="5" %}
<ul>
<li class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{% if pages.PrevPage %}
<li class="page-link">
<a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
</li>
{% endif %}
{% for item in pages.Pages %}
<li class="page-link {% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{ item.Name }}</a>
</li>
{% endfor %}
{% if pages.NextPage %}
<li class="page-link">
<a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
</li>
{% endif %}
<li class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
</li>
</ul>
{% endpagination %}
</div>
</div>
By combining the above,archiveFiltersThe generated filter link will automatically pass parameters toarchiveList,archiveListRetrieve documents from the database based on these parameters and display them with pagination.The entire process is implemented at the template level, no complex backend logic needs to be written, which greatly improves development efficiency and maintainability.
Optimizations and注意事项 in practice.
When deploying the multi-condition filtering interface, some details also need to be paid attention to.Firstly, in order to provide a smoother user experience, you can use Ajax technology to load filtered results and avoid page refresh.Although AnQiCMS tags do not provide Ajax functionality directly, you can use JavaScript (such as jQuery or the native Fetch API) to intercept the click event of filter links, then asynchronously request data and update the page content.
Secondly, pay attention to the impact of URL structure on SEO. AnQiCMS's pseudo-static function can generate search engine friendly URLs.When multiple filter conditions are combined, the URL may become very long, but AnQiCMS usually uses query parameters (such as?param1=value1¶m2=value2The form of ）is acceptable in most cases for SEO. Make sure yourrobots.txtandsitemap.xmlconfiguration is appropriate so that search engines can correctly crawl and index.
Finally, provide a clear style and interaction design for the filter interface.For selected filter options, add prominent highlighting, provide a "Clear all filters" button, and display friendly prompts when no search results are found.These user experience details can significantly improve visitors' satisfaction with the website.
Frequently Asked Questions (FAQ)
1. Why did I use the tag in the templatearchiveFiltersLabel, but the filter options are not displayed?
This is usually because you have not configured the content model and its custom fields correctly in the background.Please check if you have added custom fields of type 'Single Choice', 'Multiple Choice', or 'Dropdown' in your content model, and whether these fields have been set to 'Default Value'.archiveFiltersThe label depends on these preset values to generate filter options. Also, make sure inarchiveFiltersThe label is correctly specifiedmoduleIdto match the content model you want to filter.
2. How do I create a "Clear all filters" or "Reset filters" button?
To implement the "Clear all filters" function, you just need to provide a link to the base URL of the current category or module, which does not contain any filter parameters. For example, if your category list page URL is `/category