In 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 might 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 through custom parameters.
第一步:Define your custom content model and parameters (backend operation)
All content filtering originates from the detailed definition of the content.In AnQiCMS, this means you need to first create or modify the content model for your content in the background and add the required custom parameters.
- Enter the content model management:Log in to the AnQiCMS backend, navigate to "Content Management" -u003e "Content ModelHere 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.
- Add custom fields:Select the content model you wish to add filtering parameters (such as 'Product Model'), click 'Edit' to enter model details.In the "Content Model Custom Fields" area, you can add new fields.
- Parameter name:This is the Chinese display name of the field, for example, 'House Type', 'Color'.
- Field call:This is the English name used when referencing the field in the template, for example, “housingType”、“color”.
- Field Type:AnQiCMS provides a variety of field types. For filtering functions, it is particularly recommended to use 'Single Selection', 'Multiple Selection', or 'Drop-down Selection'.These types allow you to preset the filter values available for user selection (such as the types of apartments such as 'one-bedroom', 'two-bedroom', etc., and the colors such as 'red', 'blue', etc.).
- Default value:For fields of selection type, you can set specific option values here, one per line. These values will directly become the options in the frontend filter.
- Mandatory:Set according to your business needs.
Through these settings, you have built rich attribute dimensions for the content model, laying the foundation for subsequent filtering.
Step 2: Enter custom parameter values for document entry (backend operation)
Custom parameter definition completed, you can enter specific values for these custom fields when publishing or editing documents that belong to the content model.
- Publish or edit documents:Navigate to 'Content Management' -> 'Document Management', click 'Add New Document' or select an existing document to 'Edit'.
- Enter custom parameters:On the document editing page, select the correct "Category" (this category must belong to the content model you modified in step one).The page will automatically load all custom fields of the model.You will see the previously defined custom parameters (such as "floor plan
Ensure that the custom parameters of the content are filled in completely and accurately, which is the data foundation for the frontend filter to work normally.
Third step: Implement custom parameter filtering in the front-end template (template design)
Now, the content model and document data are ready. Next, it is to transform these custom parameters into a user-operable filtering interface in the front-end template.AnQiCMS provides dedicated template tags to simplify this process.
Utilize
archiveFiltersTag 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 a clickable filter link 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 content for (for example,1Represents the article model,2Represents the product model).allText:Set the display text for the "All" or "Unlimited" option.filtersVariable: It is an array, each element representing a custom parameter (e.g., "House Typeitem.Name:Custom parameter name (e.g., 'House Type').item.Items:All filtering options under this parameter (e.g., 'One Bedroom', 'Two Bedrooms').val.Label:The display text for each filtering option.val.Link:The most important part! This is the URL generated automatically by AnQiCMS with filtering parameters. When the user clicks, the page will refresh and apply the filtering conditions.val.IsCurrent:An boolean value indicating whether the current option is selected, which can be used to add CSS styles (such asactiveclass) to highlight.
Utilize
archiveListTags to display the filtered document list:archiveListThe label is used to retrieve and display the document list. When the user's URL contains parametersarchiveFiltersgenerated by the filterarchiveListit will automatically recognize these parameters and only return the 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 indicates that this is a paged list.moduleId:Similarly, specify the content model ID to ensure that the correct type of document is obtained.- Key points:You do not need to in
archiveListExplicitly pass custom filtering parameters in the tag. As soon as the user clicksarchiveFiltersThe generated link, the URL will include such?color=red&housingType=two_bedroomsuch a query parameter,archiveListIt will automatically read and apply these parameters for database queries.
You can easily build highly customized document filtering features in AnQiCMS by following these three steps.This can not only help users quickly find the content they are interested in, but also significantly improve the website's user experience and the usability of the content.
Common Questions (FAQ)
Q1:我可以同时筛选多个自定义参数吗?
A1:是的,完全可以。AnQiCMS 的 EnglisharchiveFiltersThe tag-generated filter link will automatically handle multiple parameter combinations.When the user selects a parameter (such as 'Type: Two-bedroom'), the corresponding query parameter will be added to the URL.?housingType=two_bedroom&color=redThe URL of.archiveListThe label will read all custom parameters from the URL for combination filtering, thus displaying content that meets multiple conditions at the same time.
Q2: Is custom parameter filtering SEO-friendly?
A2:AnQiCMS的自定义参数筛选功能在设计时考虑了SEO friendly。archiveFilters生成的链接通常是标准的GET请求URL(例如yourdomain.com/category/list?housingType=two_bedroom&color=red)。Search engines can crawl these URLs with parameters to index the filtered content.Moreover, by providing more precise filtering, users can find the required information faster, which indirectly improves the user experience, and a good user experience is an important bonus point for SEO.For important filtering combination pages, you can also consider optimizing through pseudo-static rules.
Q3: Can I display my custom parameters in the document detail page in addition to filtering?
A3:Of course. The custom parameters you define in the content model can be used not only for filtering but also to display on the document detail page. The template on the document detail page (usuallydetail.html), you can usearchiveDetailTag to get the value of a single custom parameter, or use.archiveParamsTag to loop through and display all custom parameters in the document. For example, to display the parameter namedcolorThe custom parameter value, you can write it like this: `{% archiveDetail with name=“color”}