As a senior security CMS website operator, I know how to meet user needs through refined content presentation.Build a list page of articles with filtering conditions, especially filtering on custom attributes, is an important means to improve user experience and help users quickly find the information they need.The Anqi CMS makes this process efficient and intuitive with its flexible content model and powerful template tags.
Build a list page of articles filtered by custom attributes, mainly involving the following core steps: First, define and configure these custom attributes in the background management system; second, use the tags provided by the Anqi CMS in the front-end template to generate the user interface for filtering conditions; finally, display the filtered content through the article list tags and combine it with the pagination feature to provide a complete browsing experience.
Configure custom content model and filtering properties
To implement the article filtering by custom attributes, the first step is to define these custom attributes in the Anqi CMS backend.The "Flexible Content Model" of AnQi CMS is the foundation for this feature.
You need to navigate to the "Content Management" module in the background and then click on "Content Model".Here, you can choose to edit an existing content model (such as 'Article Model') or create a brand new content model to meet specific business needs.In the content model editing interface, you can add "content model custom fields".These fields will be used as additional attributes for your article.
When adding custom fields, you need to specify the 'parameter name' as the name displayed and managed in the background, and the 'field name' as the unique identifier referenced in the front-end template (it is recommended to use lowercase English letters, such ashouseTypeorregion)，as well as the most important “field type”.To implement the filtering function, we usually choose 'Single Selection', 'Multiple Selection', or 'Dropdown Selection' among these types.When selecting these types, you need to enter all possible options line by line in the 'Default Value' (for example, for house types, you can enter 'Residential', 'Commercial', 'Apartment' etc.; for areas, you can enter 'Downtown', 'Suburban', 'Development Zone' etc.).These preset options will be directly used to generate the frontend filtering conditions.After defining the field, save the content model, and when publishing or editing articles, select or fill in the corresponding custom attribute values for each article.
Build the user interface for constructing front-end filtering conditions
After defining custom properties and adding the corresponding data to the article, we need to build the filtering feature in the article list page template. Safe CMS providesarchiveFiltersLabels to conveniently generate these filtering conditions.
Firstly, you need to determine the template file corresponding to your article list page. According to the "directory and template" convention of Anqi CMS, this is usually located at/template/您的模板目录/{模型table}/list.htmlThe file. In this template, you can usearchiveFilterstags to get and render filter conditions.
For example, if you want to generate a filter condition for a document with model ID 1 (usually the article model), you can use it like thisarchiveFiltersTags:
{# 参数筛选代码区域 #}
<div>
<div class="filter-title">筛选条件：</div>
{% archiveFilters filters with moduleId="1" allText="不限" %}
{% for item in filters %}
<ul class="filter-group">
<li class="filter-name">{{item.Name}}: </li>
{% for val in item.Items %}
<li class="filter-item {% if val.IsCurrent %}active{% endif %}">
<a href="{{val.Link}}">{{val.Label}}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
{% endarchiveFilters %}
</div>
In this code,moduleId="1"specified the filter we want to generate for the article model.allText="不限"Then the display text for the “All” option of each filter group is set.filtersThe variable includes all the custom attribute groups that can be filtered, eachitemRepresents a custom attribute (such as “House Type”).item.ItemsAre all the optional values under this attribute (such as “Residential”, “Commercial”).val.LinkThe URL will be automatically generated with the corresponding filter parameters, click to submit the filter request.val.IsCurrentThen it is used to determine whether the current option is selected, so that it can be highlighted on the interface.Through such a structure, users can clearly see all the filtering dimensions and their optional values, and can filter by clicking on the links.
Display the filtered article list and pagination.
Filter conditions generated, followed by displaying the actual article list. The Anqi CMSarchiveListTags can intelligently identify the filtering parameters in the URL and return the filtered articles accordingly.
In the same list page template, immediately following the filter condition code, you can addarchiveListTags to display articles. When the user clicks the filter link, the page URL will carry custom attribute parameters,archiveListTags will automatically read these parameters and perform content filtering, no additional coding is required:
{# 文章列表区域 #}
<div class="article-list-container">
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h3 class="article-title">{{item.Title}}</h3>
{% if item.Thumb %}
<img class="article-thumb" alt="{{item.Title}}" src="{{item.Thumb}}">
{% endif %}
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
<span class="category-name">所属分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span class="publish-date">发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span class="views-count">阅读量：{{item.Views}}</span>
</div>
</a>
</div>
{% empty %}
<div class="no-content-message">
抱歉，该筛选条件下暂无文章内容。
</div>
{% endfor %}
{% endarchiveList %}
{# 分页代码区域 #}
<div class="pagination-container">
{% 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 %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{% if pages.NextPage %}
<a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
<a class="pagination-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
</div>
InarchiveListin the tag,moduleId="1"The article model has been specified again.type="page"This indicates that it is a paged list that needs to be displayed.limit="10"Then the number of articles displayed per page is set.archivesThe variable contains all the article data on the current page, you can iterate over it and according toitemThe field is used to display the article title, link, description, thumbnail, and publish time information.
At the same time, we have usedpaginationtags to generate pagination navigation.pagesThe variable contains all the information required for pagination, including the total number of pages, the current page, the first page, the last page, the previous page, the next page, and the list of middle page numbers.show="5"The parameter controls the number of middle page links displayed. Users can use these links to browse through the filtered results.
Build a feature-complete, user-friendly article list page with custom attribute filtering conditions on the AnQi CMS by following these steps.This not only improves the organization of website content, but also greatly improves the efficiency of users searching for information.
Frequently Asked Questions
Q1: I defined a custom attribute, butarchiveFiltersWhy are these filter conditions not displayed, even though the tag is there?
A: First, make sure that when you add custom fields in the "Content Model", you set the "Field Type" to "Single Selection", "Multiple Selection", or "Dropdown Selection". These three types of data arearchiveFiltersTags can identify and generate filtering conditions. Next, please confirm that your article has indeed filled in and saved the values of these custom properties, andarchiveFiltersTagsmoduleIdParameters match the model ID of your article.
Q2: After clicking the filter condition link, the page does not change, or the article list does not update according to the filter conditions. How should I investigate?
A: This situation occurs, you need to check several points. First, confirm that your website's pseudo-static rules are correctly configured, because filtered links are usually presented in the form of URL query parameters (for example?region=cityCenter），if the rewrite configuration is not set properly, these parameters may not be parsed correctly. You can checkhelp-plugin-rewrite.mdthe rewrite rules in the document. Secondly, make sure that inarchiveListin the tag,typeparameter settings"page"Because only in pagination mode,archiveListOnly English will be handled automatically from the filter parameters in the URL.Finally, if the issue still persists, check the browser developer tools network requests to see if the filtered links are being sent correctly and if the backend data returned is as expected.
Q3: How to support multiple selection for custom filter conditions?
A: Secure CMSarchiveFiltersThe tag-generated filter link will be based on a single value for filtering.If the field type you set in the content model is 'Multiple Choice', users will usually click a filter value to apply the condition in the frontend template.?houseType=住宅&houseType=公寓），or encode multiple selection values into one parameter (for example,?houseType=住宅,公寓Then submit it to the backend. The security CMS.archiveListThe tag can handle queries with multiple identical field parameters in the URL. Just make sure the URL format generated by the frontend is correct.