As an experienced CMS website operation personnel for information security, I am well aware of the importance of building an efficient and user-friendly content filtering interface for enhancing 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 can not only help readers quickly find the information they need, but also effectively improve the organization and SEO performance of the website content.
The foundation of creating a multi-condition filter interface: understanding document parameters
To create a filter 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 AnQiCMS backend, through the 'Content Management' under the 'Content Model' feature, you can create or edit content models.In the model's custom field settings, select an appropriate field type (such as single selection, multiple selection, dropdown selection), and set their 'default values'.These default values are the specific options 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 filter interface: usearchiveFilterstags
In AnQiCMS template files,archiveFiltersLabels are the key to generating multi-condition filter interfaces.This tag can automatically retrieve all document parameters available for filtering under the current module or a specified module, and intelligently judge which filtering conditions have been selected based on the current URL query parameters.
UsearchiveFilterswhen labeling, you can specifymoduleIdTo obtain the filter parameters of a specific content model, for examplemoduleId="1"Represents the article model.allTextThe parameter is 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 an object containing various filtering parameters (item）and its corresponding options（item.Items）array. Each option（val）also has its display text（val.Label），and a generated filter link（val.Link）as well as a boolean value indicating the current selection stateval.IsCurrent).
The following is an example of the code for building 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”).val.LinkEnsure that the URL is correctly added or updated with the corresponding query parameters.val.IsCurrentThen, it allows you to add highlight styles for the currently selected filter option through CSS to provide clear visual feedback.
Show filtered results:archiveListTags and pagination
The filter has generated a URL with parameters, nextarchiveListTags to receive these parameters and display the corresponding document list.archiveListTags intype="page"In English, the mode can intelligently parse the query parameters in the current URL and filter out matching documents based on these parameters.This means you don't need to manually write complex logic to parse the filter conditions in the URL, AnQiCMS will handle them automatically.
At the same time, in order to provide a good user experience, the filtering results usually need to be combined with the pagination feature.archiveListTags andpaginationUsing tags together can easily achieve pagination display.
This is an example of 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>
Through the above combination,archiveFiltersthe generated filter link will automatically pass parameters toarchiveList,archiveListRetrieve documents that match these parameters from the database and display them with pagination.The entire process is implemented at the template level, without the need to write complex backend logic, which greatly improves development efficiency and maintainability.
optimizations and注意事项 in practice
When deploying the multi-condition filtering interface, some details need to be paid attention to.Firstly, in order to provide a smoother user experience, you can use Ajax technology to load the filtered results without refreshing the page.Although AnQiCMS tags themselves do not provide direct Ajax functionality, you can use JavaScript (such as jQuery or the native Fetch API) to intercept the click event of the filter link, then asynchronously request data and update the page content.
Next, pay attention to the impact of URL structure on SEO.AnQiCMS's pseudo-static feature can generate SEO-friendly URLs.?param1=value1¶m2=value2The format in the form of ）is acceptable in most cases for SEO. Make sure that yourrobots.txtandsitemap.xmlconfiguration is appropriate so that search engines can correctly crawl and index.
Finally, provide clear style and interaction design for the filtering interface.For selected filter options, add prominent highlighting, provide a "Clear all filters" button, and display friendly prompt information when no search results are found.These details of user experience can significantly improve visitors' satisfaction with the website.
Common Questions and Answers (FAQ)
1. Why did I usearchiveFiltersLabel, 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 with field types of 'Single Choice', 'Multiple Choice', or 'Drop-down Selection' in your content model, and whether these fields are set with 'Default Values'.archiveFiltersLabel depends on these preset values to generate filter options. Additionally, please make sure inarchiveFiltersspecified correctly in the labelmoduleIdto 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" feature, 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 the URL of your category list page is `/category