In the AnQi CMS, efficiently managing and displaying website content is the key to improving user experience.When the content volume keeps growing, providing flexible filtering functions becomes particularly important to help visitors quickly find the information they need.archive/filtersInterface retrieves the filter conditions and applies themarchive/listIn the interface's custom filter parameters, we can build extremely practical content filtering functions.
Understanding the filter mechanism of Anqi CMS
The document filtering capability of AnQi CMS is mainly reflected in the collaborative work of two core API interfaces: one is used forFoundavailable filtering conditions on the website (/api/archive/filters), and the other isApplyThese conditions to get the specific document list (/api/archive/list
When using these two interfaces, a crucial parameter isModel ID (moduleId).In the AnQi CMS, different content types (such as articles, products, cases, etc.) correspond to a specific content model, and each model may have its unique filtering fields.Therefore, identifying which model's documents you want to filter is the first step before performing any filtering operation.
Get available filtering conditions (/api/archive/filters)
Imagine that you are designing a filter for your product showcase page, and users want to search for related products by "city" or "educationmoduleIdIt configured which fields and options are available for filtering.
By calling/api/archive/filtersthe interface, and passing in your interests,moduleIdyou can get a detailed list of filtering conditions. For example, the request{域名地址}/api/archive/filters?moduleId=1，The data structure returned will tell you what filters (such as “City”, “Education level”) are available under the current model, and their correspondingfield call names (field_name)and all optional onesParameter options (items.label).
This data is crucial, it is like a "map" of the filtering function, where,field_nameIs a unique identifier for each filter condition in the backend system, and it is also the key name we will use when building query parameters.itemsin an array.labelField, it is the specific option displayed to the user by the front-end, such as “Beijing”, “Shanghai”, or “Master”, “Bachelor” and so on.
Apply filter conditions to get the document list (/api/archive/list)
The next step is how to convert the user's selection into an actual query request and submit it to/api/archive/listInterface. This interface is responsible for returning a list of documents that meet the criteria based on the parameters you provide.
/api/archive/listInterface not only supports regularmoduleId/categoryId/page/limit/q(search keywords) parameters, what's more powerful is that it allows you to addCustom filter parametersThe key names of these custom parameters are the ones we get from/api/archive/filtersinterfacefield_name.
For example, if/api/archive/filterstells us there is afield_nameresponse forcityThe filter, and it has options such as 'Beijing', 'Shanghai', etc. When the user selects 'Beijing', we can send a query parameter like/api/archive/listinterfacecity=北京.The complete API call would look like this:{域名地址}/api/archive/list?moduleId=1&type=page&city=北京.
If the user selects multiple filter conditions at the same time, such as both searching for documents related to "Beijing" and filtering for a "Bachelor's" degree, then we just need to overlay these filter parameters in the form of URL Query String:{域名地址}/api/archive/list?moduleId=1&type=page&city=北京&certificate=本科. Please note, in order to enable the filter function and get the total number,typethe parameters usually should be set topage.
In addition, you can also combine other parameters to further optimize the results, such as usingorderParameter specifies the sorting method (such asorder=views descsorted by views in descending order), or useqparameter for keyword search, which can be seamlessly combined with custom filtering parameters.
The actual operation steps and frontend implementation ideas
To better understand the entire process, let's sort out how to build a dynamic content filtering function using these two interfaces in practical development:
- Step one: Define the target modelWhen your page or component loads, first determine which document model content you want to filter, obtain its