In Anqi CMS, efficiently managing and displaying website content is the key to improving user experience.When the amount of content grows, it is particularly important to provide flexible filtering functions to help visitors quickly find the information they need.Strong API interface support provided by AnQi CMS, through the clever combination ofarchive/filtersThe interface retrieves the filtering conditions and applies themarchive/listIn the custom filtering parameters of the interface, we can build a highly practical content filtering function

Understanding the filtering 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 forDiscoveravailable filtering conditions on the website (/api/archive/filters), and the other isapplyThese conditions are used to obtain a specific document list (/api/archive/listThere is a close connection between these two, we usually first understand through the first interface which dimensions are available for filtering in the current content model, and then convert the user's selection into parameters that the second interface can recognize, so as to accurately extract the required content.

An extremely important parameter when using these two interfaces isModel ID(moduleId)In Anqi CMS, different content types (such as articles, products, cases, etc.) correspond to a specific content model, and each model may have unique filtering fields.Therefore, defining which model's documents you want to filter is the first step before performing any filtering operation.

Get the available filtering conditions (/api/archive/filters)

Imagine that you are designing a filter for your product display page, where users can search for related products by 'city' or 'education'. At this point, you need to know the 'product' model provided by Anqi CMS (assuming itsmoduleIdAre you 1) configured which fields and options are available for filtering.

By calling/api/archive/filtersthe interface, and passing the fields you are interested in.moduleIdyou can get a detailed list of filtering conditions. For example, request{域名地址}/api/archive/filters?moduleId=1The data structure returned will tell you which filters (such as "City", "Education") are available under the current model, as well as their correspondingfield namingfield_name)and all optional onesParameter options(items.label).

This data is crucial, it is like a "map" of the filtering function. Among them,field_nameIs the unique identifier for each filtering condition in the backend system, and it is also the key name we will use to construct query parameters.itemsin the array,labelField, which is the specific option displayed to the user on the front end, such as 'Beijing', 'Shanghai', or 'Master', 'Bachelor' and so on.

Apply filter conditions to get the document list (/api/archive/list)

Now we know which dimensions we can filter by, 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 specified parameters.

/api/archive/listThe interface not only supports conventionalmoduleId/categoryId/page/limit/q(Search keywords) and other parameters, what is even more powerful is that it allows you to addCustom Filter Parameter. These custom parameter names are exactly what we get from/api/archive/filtersthe interfacefield_name.

For example, if/api/archive/filterstells us that there is afield_nameWithcityThe filter, and it has options like 'Beijing', 'Shanghai', etc. When the user selects 'Beijing', we can send a query parameter to/api/archive/listthe interface in the form ofcity=北京. The complete API call would look like this:{域名地址}/api/archive/list?moduleId=1&type=page&city=北京.

If a user selects multiple filter conditions at the same time, such as searching for documents in "Beijing" and filtering for a bachelor's degree, then we just need to overlay these filter parameters in the form of a 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 are usually set to,page.

In addition, you can combine other parameters to further optimize the results, such as usingorderParameter specifies the sorting method (such asorder=views descSort by view count in descending order), or useqParameter for keyword search, all of which can be seamlessly integrated with custom filter parameters.

The actual operation steps and front-end implementation ideas

In order to better understand the entire process, let's sort out how to build a dynamic content filtering function in actual development using these two interfaces:

  1. Step 1: Clarify the target modelWhen your page or component loads, first determine which document model's content you want to filter and retrieve its