AnQiCMS as an efficient and customizable enterprise-level content management system, provides strong template tag support when building feature-rich websites. Among them,archiveFilters/archiveListandpaginationThese tags work together to help us easily build a filter page with an excellent user experience, allowing visitors to quickly locate the content they need.
Today, let's delve into how these three tags work together seamlessly to build a complete and dynamic content filtering system.
1. Starting point of filtering:archiveFilterstags
An efficient filtering page requires clear and flexible filtering conditions. In AnQiCMS,archiveFiltersLabels play this role. It can dynamically generate a series of filter options for users to choose from based on the fields you customize in the content model.
Imagine that you are running a real estate information website, users may need to filter listings based on conditions such as 'property type (apartment, villa)', 'area (Haidian, Chaoyang)', 'price range', and so on.These filtering conditions are not fixed but are closely related to the fields in the "house model" defined on your backend.
archiveFiltersThe power of tags lies in the fact that they do not require you to manually hard-code each filter option. They will read the filter options you have set for a content model (viamoduleIdParameters specified for configuration of filterable fields and their display. For example, if you define 'Color' and 'Size' fields for a product model and set them as filterable,archiveFiltersit will automatically generate the "Color" and "Size" filter areas.
It will generate an object containing multiple filter groups.Each group represents a filterable field (such as "ColorarchiveFiltersIt will intelligently generate the corresponding URL and append the filtering conditions to the query parameters of the URL. In addition, it can alsoIsCurrentProperties, intelligently judge which filter condition is selected, convenient for us to add highlight styles on the front-end, enhancing user experience.
Core function:Dynamically generate the filter condition interface and construct the filter parameter URL based on the user's selection.
The core of the content:archiveListtags
With filter conditions, the next step is to display the list of content that meets the conditions.archiveListLabels are the core tags used in AnQiCMS to retrieve lists of documents (or other archive content, such as products).It can flexibly retrieve and display content based on various parameters.
In order toarchiveFiltersandpaginationwork together,archiveListthere is a crucial parameter setting:type="page"). WhentypesetpagewhenarchiveListIt will enter pagination mode, which means it will retrieve data based on the pagination information and filter parameters in the current URL and return a paginated result set.
When the user througharchiveFiltersSelected a condition, such as “Color: Red”, and the URL will appear something like?color=redthe configuration is set totype="page"ofarchiveListThis will automatically parse these URL parameters, and retrieve matching document content from the database based on the condition "color is red." This means you do not need to write additional code to handle URL parameters,archiveListEnglish translation: Everything has been done for you.
archiveListIt will also return detailed information for each content item, such as title, link, description, thumbnail, views, publish time, etc., and this data can be found inforLooping for convenient rendering.
Core function:Dynamically fetch and display the list of matching content based on the filtering and pagination parameters in the URL.
III. Smooth navigation:paginationtags
When the number of filtered content is still large, the pagination feature becomes indispensable.paginationTags andarchiveList(type="page"mode) work closely together to provide users with intuitive and convenient page navigation.
paginationTags can be based onarchiveListReturns the pagination information (total number of items, total pages, current page, etc.), generating 'Home', 'Previous Page', 'Next Page' and specific page number links. More importantly, all the generated pagination links will自动继承当前 URL 中所有的筛选参数。
This means that, whether the user clicks on a filter condition or jumps to the next page in the filter results, the original filter conditions will be retained.For example, the user filtered the "red" products and clicked "next page" in the results. The products on the new page are still "red", and the pagination function works normally.This seamless experience greatly enhances the navigation efficiency of users on the filtering page.
pagination标签提供了丰富的页面信息，如pages.TotalItems(total number of entries),pages.CurrentPage(Current page) andpages.Pages(Page number array) and so on. We can use this information to build an aesthetically pleasing and fully functional pagination navigation bar, and highlight the current page using the attribute.item.IsCurrentattribute to highlight the current page.
Core function:Provide navigation links for pagination content and automatically retain all filtering conditions.
Four, Collaborative Work: Build a complete example of a filtering page.
Now, let's demonstrate how these three tags work together in a simplified scenario to build a complete product filtering page.
The product list page assumes that we need to filter products based on the 'brand' and 'price range', and support pagination.
- Define the content model:In the product content model of AnQiCMS backend, we have customized the 'Brand' (single selection) and 'Price Range' (single selection) fields, and set them as filterable.