How to filter and display a list of documents in AnQiCMS using custom parameters?

In AnQiCMS (AnQiCMS), when managing and displaying a large amount of content, we often need to go beyond simple categorization and tags to achieve more refined content filtering.For example, a real estate website may need to filter listings by type, area, and price range;An e-commerce website may need to filter products by 'color', 'size', and 'brand'.AnQiCMS provides a powerful custom parameter feature, making it very intuitive and efficient to implement this advanced filtering.

Below, we will gradually understand how to filter and display document lists in AnQiCMS by using custom parameters.

Step 1: Define your custom content model and parameters (backend operation)

All content filtering originates from the detailed definition of content. In AnQiCMS, this means that you need to first create or modify the content model for your content in the background and add the required custom parameters.

1. Enter content model management:Log in to the AnQiCMS backend, navigate to "Content Management" -> "Content Model".Here is a list of all the content models on your website, such as the default "article model" and "product model", and you can also create new models according to your business needs.
2. Add custom field:Select the content model you want to add a filter parameter (such as "Product Model"), click "Edit" to enter the model details.In the "Content Model Custom Field" area, you can add new fields.
   • Parameter name:This is the Chinese display name of the field, for example, "house type", "color".
   • Call field:This is the English name used to refer to the field in the template, for example 'housingType', 'color'.
   • Field type:AnQiCMS provides various field types, especially recommended for filtering functions, using 'Single selection', 'Multiple selection' or 'Drop-down selection'.These types allow you to preset the filtering values available for users to select (such as "one bedroom", "two bedrooms", etc., "red", "blue", etc.).
   • Default:For selection type fields, you can set specific option values here, one per line. These values will directly become options in the frontend filter.
   • Mandatory?:Set according to your business requirements.

By these settings, you have built rich attribute dimensions for the content model, laying a foundation for subsequent filtering.

Step two: Enter custom parameter values for the document (backend operation)

After defining custom parameters, you can enter specific values for these custom fields when publishing or editing documents belonging to the content model.

1. Publish or edit documents:Navigate to 'Content Management' -> 'Document Management', click 'Add New Document' or select an existing document to 'Edit'.
2. Fill in custom parameters:On the document editing page, select the correct "category" (this category must belong to the content model you modified in the first step).The page will automatically load all the custom fields of the model. You will see the previously defined custom parameters (such as "house type", "color"), and select or enter the corresponding values according to the field type.

Ensure that the custom parameter content is filled in completely and accurately; this is the data foundation for the front-end filter to work normally.

Step 3: Implement custom parameter filtering in the front-end template (template design)

Now, the content model and document data are ready, and the next step is to convert these custom parameters into an operable filtering interface in the front-end template.AnQiCMS provides dedicated template tags to simplify this process.

1. UtilizearchiveFiltersLabel generation filter UI: archiveFiltersLabels are used to generate a series of filter condition links. It reads the custom parameters under the current page or specified model and generates clickable filter links for each possible value of each parameter.

   Example of usage:

   <div class="filter-area">
       <h3>筛选条件：</h3>
       {% archiveFilters filters with moduleId=1 allText="不限" %}
           {% for item in filters %}
           <div class="filter-group">
               <span class="filter-name">{{ item.Name }}:</span> {# 例如：户型 #}
               <ul class="filter-options">
                   {% for val in item.Items %}
                   <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                       <a href="{{ val.Link }}">{{ val.Label }}</a> {# 例如：一居室 #}
                   </li>
                   {% endfor %}
               </ul>
           </div>
           {% endfor %}
       {% endarchiveFilters %}
   </div>
   

   • moduleId: Specify the content model ID you want to generate the filter for (for example,1Represents the article model,2Represents product model).
   • allText: Set the display text for the 'All' or 'Unlimited' option.
   • filtersVariable: It is an array where each element represents a custom parameter (such as 'House Type', 'Color').
   • item.NameCustom parameter name (e.g., 'Type of house').
   • item.ItemsAll filter options under the parameter (e.g., 'One bedroom', 'Two bedrooms').
   • val.LabelDisplay text for each filter option.
   • val.LinkThe most important part! This is the URL automatically generated by AnQiCMS with filtering parameters. When the user clicks, the page will refresh and apply the filtering conditions.
   • val.IsCurrentA boolean value indicating whether the current option is selected, which can be used to add CSS styles (such asactivea class) to highlight.

2. UtilizearchiveListTag to display the filtered document list: archiveListThe tag is used to retrieve and display a document list. When the user's URL contains the parametersarchiveFiltersgenerated byarchiveListit will automatically recognize these parameters and only return documents that meet the conditions.

   Example of usage:

   <div class="document-list">
       {% archiveList archives with type="page" moduleId=1 limit="10" %}
           {% for item in archives %}
           <div class="document-card">
               <h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
               <p>{{ item.Description }}</p>
               {# 还可以显示自定义参数 #}
               {% archiveParams docParams with id=item.Id sorted=false %}
                   {% if docParams.housingType %}<span>户型: {{ docParams.housingType.Value }}</span>{% endif %}
                   {% if docParams.color %}<span>颜色: {{ docParams.color.Value }}</span>{% endif %}
               {% endarchiveParams %}
               <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
           </div>
           {% empty %}
           <p>抱歉，没有找到符合条件的文档。</p>
           {% endfor %}
       {% endarchiveList %}
   
       {# 分页标签，确保筛选条件下也能正常分页 #}
       {% pagination pages with show="5" %}
           {# 分页UI代码，参考pagination标签文档 #}
       {% endpagination %}
   </div>
   

   • type="page": This is a paginated list.
   • moduleId: Specify the content model ID similarly to ensure the correct type of document is obtained.
   • Key points:You do not need toarchiveListexplicitly pass custom filtering parameters in the tag. As soon as the user clicksarchiveFiltersThe generated link will include such?color=red&housingType=two_bedroomquery parameters,archiveListwhich will automatically read and apply these parameters for database queries.

By following these three steps, you can easily build a highly customized document filtering function in AnQiCMS.This can not only help users quickly find the content they are interested in, but also significantly improve the user experience and accessibility of the website.

Frequently Asked Questions (FAQ)

Q1: Can I filter multiple custom parameters at the same time?

A1: Yes, you can do that completely. AnQiCMS'archiveFiltersThe link generated by the tag will automatically handle multiple parameter combinations.When the user selects a parameter (such as "Type: two bedrooms"), the corresponding query parameters will be added to the URL.If the user selects another parameter (such as "Color: Red"), the system will automatically add or modify the color parameter based on the existing URL parameters, forming something similar to?housingType=two_bedroom&color=redURL.archiveListThe tag reads all custom parameters from the URL, combining and filtering them to display content that meets multiple conditions.

Q2: Is custom parameter filtering SEO-friendly?

A2: AnQiCMS's custom parameter filtering function considered SEO-friendliness in its design.archiveFiltersThe generated links are typically standard GET request URLs (for exampleyourdomain.com/category/list?housingType=two_bedroom&color=red）。The search engine can capture these URLs with parameters, thus indexing the filtered content.In addition, by providing more precise filtering, users can find the information they need faster, which indirectly improves user experience, and a good user experience is an important plus point for SEO.For important filtering combination pages, you can also consider optimizing through pseudo-static rules.

Q3: Can I display the custom parameters I define, in addition to filtering, on the document detail page?

A3: Of course you can. The custom parameters you define in the content model can not only be used for filtering but also displayed on the document detail page. The template on the document detail page is usuallydetail.htmlIn it, you can usearchiveDetailUse a tag to get the value of a single custom parameter, orarchiveParamsUse a tag to loop through all the custom parameters in a document. For example, to display the namedcolorThe custom parameter value, you can write it like this: `{% archiveDetail with name=“color”}