In the daily operation of websites, we often encounter such needs: we hope that users can quickly filter out the content they are interested in according to the different attributes of articles or products.For example, on a real estate website, users may want to filter for 'two bedrooms and one living room' school district houses; on a product display website, users may hope to find 'new' red T-shirts.安企CMS（AnQiCMS）provided powerful and flexible custom parameter functions, which can help us easily achieve this fine-grained content filtering.

The implementation of this feature mainly relies on the two core features of "Content Model" and "Template Tags" of AnQi CMS.Through these two, we can define the data structure from the backend, dynamically generate filtering conditions on the frontend, and display the results, realizing a complete set of smooth user experience.

Step 1: Define custom content model fields

To implement custom parameter filtering, you first need to add custom fields for your articles or product models in the security CMS backend.These fields are the "parameters" you want the user to be able to filter.

  1. Enter the content model management:Login to the security CMS backend, navigate to the 'Content Management' menu, and then click 'Content Model'.Here is listed all the content models in your website, such as "article model" and "product model".You can choose an existing model to modify or create a brand new model.
  2. Add custom fields:Enter the selected content model, and you will see a 'Content Model Custom Fields' area.Click to add a field, you can define new properties for this model.For example, if you are creating a real estate website, you can add fields such as 'Apartment Type', 'Area', 'Decorative Condition', etc.
    • Parameter name:This is the Chinese display name of the field, which is convenient for you to identify and manage in the background, such as 'house type'.
    • Field call:This is the field name called in the template, it is recommended to use lowercase English letters, for examplehouseType.
    • Field Type:This is a critical step that determines how users select filtering conditions.
      • Single line text, numbers, multi-line text:Applicable for user to freely input numbers or text for filtering (although filtering text is usually more common in search boxes).
      • Single choice, multiple choice, dropdown selection:This is the most commonly used and recommended filter field type.You can preset multiple options, such asThese options can be entered one per line in the default value area.
    • Is it required, default value:Set according to your business needs.

Complete field definition and save the content model.So, when you publish or edit articles/products, these custom fields will appear in the "Other Parameters" area, waiting for you to fill in specific values for each piece of content.

第二步：为文章或产品内容填写自定义参数 (English)

In the content model, after defining the fields, the next step is to fill in the corresponding values for these newly added custom fields when you publish or edit specific articles or products.

  1. Enter the Add/Edit Document interface:In the "Content Management
  2. Enter custom parameters:At the bottom of the document editing page, you will find a collapsible area named "Other Parameters".Expand it, and you will see all the custom fields defined in the first step.Fill in the corresponding content according to the actual situation, especially for fields of 'single choice', 'multiple choice', or 'drop-down selection' type.This precise data is the basis for front-end filtering.

Ensure that each relevant content has filled in the accurate custom parameter values, so that they can be correctly identified and utilized by the subsequent filtering function.

Step 3: Implement the filtering function in the front-end template.

Implement filtering on the front end requires the use of the powerful template tag system of AnQi CMS. This mainly involves the coordination of two tags:archiveFiltersfor generating links to filter conditions,archiveListThen it is responsible for displaying the corresponding content based on these filtering conditions.

1. Generate the filtering interface:archiveFilterstags

archiveFiltersThe purpose of the label is to dynamically generate a series of clickable filter links based on the custom fields you define in the backend content model.

  • Usage: 
    
{% archiveFilters filters with moduleId="1" allText="全部" %}
    {% for item in filters %}
        <div class="filter-group">
            <span>{{item.Name}}:</span> {# 显示参数名称，如“户型” #}
            <ul>
                {# 遍历该参数下的所有筛选值 #}
                {% for val in item.Items %}
                    <li class="{% if val.IsCurrent %}active{% endif %}">
                        <a href="{{val.Link}}">{{val.Label}}</a> {# 生成带有筛选参数的链接 #}
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
{% endarchiveFilters %}
  • Key parameters:
    • moduleIdSpecify the content model you want to filter (for example, article model ID is 1, product model ID is 2).
    • allTextCreate an 'All' or 'Unlimited' option for each filter parameter.

When the user clicksarchiveFiltersGenerated links will automatically include the corresponding filter parameters as query parameters in the URL (for example,?houseType=两室一厅&area=朝阳).

2. Display content based on parameters:archiveListtags

archiveListLabels are used to retrieve and display article or product lists. Their most powerful feature is that when the URL of the page contains custom filter parameters,archiveListThe label will intelligently recognize these parameters and automatically filter the content list based on these parameters.

  • Usage:

    {% archiveList archives with type="page" moduleId="1" limit="10" %}
    {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            {# 还可以显示自定义参数的值，例如：item.houseType #}
            <p>户型: {{ item.houseType }}</p>
        </div>
    {% empty %}
        <p>暂无符合条件的内容。</p>
    {% endfor %}


    {# 分页功能：与筛选结果完美结合 #}
    {% pagination pages with show="5" %}
        <div class="pagination">
            {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
            {% for p in pages.Pages %}<a href="{{p.Link}}" class="{% if p.IsCurrent %}active{% endif %}">{{p.Name}}</a>{% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %}
        </div>
    {% endpagination %}
{% endarchiveList %}

  • Key parameters:

    • type="page": Enable pagination feature, withpaginationauto tag to use.
    • moduleId: Specify which content model list to retrieve.
    • limit：Number of items displayed per page.
    • Custom filter parameters: archiveListWill automatically parse the query parameters in the current page URL. For example, if the URL ishttp://yourdomain.com/list?houseType=两室一厅&area=朝阳,archiveListWill automatically determine based onhouseTypeandareaThese two parameters are used to filter the results, no additional specification is required in the label.

3. Integrated implementation of dynamic filtering

toarchiveFiltersandarchiveListLabels placed on the same list page template can realize a complete dynamic filtering function. Users clickarchiveFiltersWhen generating the filtering link, the page URL will be updated,archiveListThe content will automatically be re-fetched and displayed according to the new URL parameters, at the same time,paginationthe pagination links will also be generated correctly according to the filtering results.

Through the above steps, your website visitors can use the custom parameters you have meticulously set up,