In content operations, we often need to display lists of content with different themes and properties, and allow visitors to filter according to their own needs. For example, a real estate website may need to filter properties according to "property type", "location", "area range", and other multi-dimensional combinations.If each time is organized manually or developed custom, it is not only inefficient but also difficult to maintain.AnQiCMS provides a flexible and powerful document parameter filtering mechanism that can help us easily achieve this combination display of list content with multiple conditions.
Next, we will delve into how to use the document parameter filtering tags of Anqi CMS to build dynamic content lists that meet user needs and are easy to manage.
The cornerstone of building a flexible filtering system: Custom content model
The first step to implementing multi-condition filtering in Anqi CMS is to define clear, filterable properties for our content.This is due to its powerful 'flexible content model' feature.We can create or modify content models based on business requirements (such as "article model", "product model", and even custom "property model", "commodity model" etc.), and add various "custom fields" to them.
These custom fields are the source of our multi-condition filtering implementation.When adding fields, you can choose different field types, such as single-line text, numbers, multi-line text, single selection, multiple selection, and dropdown selection. Among them,Single choice, multiple choice, and dropdown choiceThese three types are particularly suitable for use as filtering conditions. For example, in the 'property model', we can add:
- House type(Dropdown selection: Residential, Shop, Apartment)
- Room type(Single selection: One room, Two rooms, Three rooms)
- Decorating situation(Multiple selection: Finishing, Simplified finishing, Raw finishing)
- Area(Single line text, but can be configured as a filter condition in the background)
When defining these fields, we also need to provide default values for fields of type selection, radio, and checkbox, which will serve as selectable items on the frontend filtering interface.
Content release: Provide data for filtering
After custom content models and field definitions are completed, we need to fill in the contents of these custom fields specifically when publishing or editing documents.Only when the document contains this parameter information, can they be correctly retrieved and displayed in the front-end filter list.For example, when publishing a real estate information, we will choose its 'house type', 'layout', and 'decoration', and fill in the 'region'.
Design the front-end filtering interface:archiveFiltersThe clever use of tags
Now, we have filterable content and well-defined filtering dimensions. Next, it's about how to display these filtering conditions on the website front-end. Anqi CMS providesarchiveFiltersLabel, used specifically to generate these filters.
This tag will intelligently read the custom fields you define in the content model and dynamically generate filter links based on the current page URL.We can place it anywhere we need to display a filter, such as the sidebar or top of the list page.
This is a typicalarchiveFiltersLabel and its usage examples:
{# 参数筛选代码 #}
<div class="filter-section">
<div class="filter-title">参数筛选：</div>
{% archiveFilters filters with moduleId="1" allText="全部" %}
{% for item in filters %}
<ul class="filter-group">
<li class="group-label">{{item.Name}}: </li> {# 显示参数名称，如“房屋类型” #}
{% for val in item.Items %}
<li class="filter-option {% if val.IsCurrent %}active{% endif %}">
<a href="{{val.Link}}">{{val.Label}}</a> {# 生成筛选链接，并高亮当前选中项 #}
</li>
{% endfor %}
</ul>
{% endfor %}
{% endarchiveFilters %}
</div>
In this code snippet:
filtersIt is a custom variable name used to receivearchiveFiltersThe data returned by the label.moduleId="1"Specify the content model (for example, 'article model') we want to filter by ID 1.If we need to filter "Product Model" or "Real Estate Model", we need to replace it with the corresponding model ID.allText="全部"Set the display text for the “All” option in each filter group, if you do not want to display it, you can set it toallText=false.{% for item in filters %}Loop through all available filter parameters,item.NameThe parameter name will be displayed (such as "House type"),item.FieldNameIt is the corresponding field name.{% for val in item.Items %}Next, we traverse the optional values under each parameter,val.LabelIt is the display text of the option (such as "Residential"), whileval.Linkit is automatically generated by the Anqi CMS, containing the current filtering conditions URL.{% if val.IsCurrent %}active{% endif %}This line of code is very useful, it will automatically judge whether the current option is selected, thus facilitating us to add CSS styles to the selected items to enhance the user experience.
By this means,archiveFiltersThe tag not only helps us build the filter UI, but more importantly, itautomatically handles the filtering logicputs the selected parameters as a query string in the URL (for example?house_type=住宅&area=市中心Attach to the link.
Dynamic display of content list:archiveListIntelligent response of tags
We need a list that can dynamically display content based on these filtering conditions, as we have a filtering interface. Anqi CMS'sarchiveListThe tag shows its intelligence here.
archiveListThe tag is intype="page"In the mode, it can not only achieve pagination function, but alsoautomatically parse the query parameters in the current URLThis will filter the document content with these parameters. This means that we do not need to manually retrieve the URL parameters and pass them toarchiveListEverything is automatically done!
The following is an example used in conjunction with the above filterarchiveListLabel example:
`twig {# Document list code #}
{% for item in archives %}
<div class="list-item">
<a href="{{item.Link}}">
<h5 class="item-title">{{item.Title}}</h5>
<p class="item-description">{{item.Description}}</p>
<div class="item-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="item-thumb">
<img alt="{{item.Title}}" src="{{item.Thumb}}">
</a>
{% endif %}
</div>
{% empty %}
<p class="no-content">该列表没有任何内容</p>
{% endfor %}
{% endarchiveList %}
{# 分页代码 #}
<div class="pagination-section">
{% pagination pages with show="5" %}
<a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}
<a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{% for item in pages.Pages %}
<a class="pagination-link {% if item.IsCurrent %}active{% endif %