How to implement content parameter filtering and dynamically adjust the list display results in AnQiCMS?

In a content management system, allowing users to quickly find the information they need according to their own needs is the key to improving website experience and content value.AnQiCMS provides a powerful custom content model and flexible template tags, helping us easily implement content parameter filtering, thus dynamically adjusting the display results of the list, greatly enhancing the interactivity and user-friendliness of the website content.

This article will discuss in detail how to use these features in AnQiCMS, from backend configuration to frontend display, and step by step to implement content parameter filtering.

The foundation of content parameter filtering: Custom content model

To implement content parameter filtering, first ensure that your content structure is flexible and scalable.The 'Custom Content Model' of AnQiCMS is the core to achieve this goal.

When you create a new content model (such as "product

Operation steps:

  1. Enter content model management:In the AnQiCMS backend, navigate to the "Content Management" section and select "Content Model".
  2. Create or edit a model:You can modify the existing 'article model' or 'product model', or create a completely new model.
  3. Define custom fields:On the model editing page, find the "Custom field of content model" area. Here, you can add new parameters.
    • Parameter name:This is the field name displayed in the background to the administrator (such as "Type of house", "Area", "Price range").
    • Call field:This is the unique identifier used in the template to call this parameter (such ashuxing/quyu/price_rangePlease use English letters.
    • Field type:Choosing the appropriate field type is crucial. Common types for filtering include:
      • Single choice(radio): Suitable for scenarios where the user can only select one option, such as 'Apartment type: One bedroom/Two bedrooms/Three bedrooms.'
      • Multiple selections(checkbox): Suitable for scenarios where users can select multiple options, such as "Features: Renovated/Furnished/School District houses".
      • Drop-down selection(select): Similar to single selection, but presented in a dropdown menu to save space.
      • Single-line text(text) orNumber(number): It can also be used for filtering, but usually requires additional front-end logic (such as entering a price range).
    • Default:For single-choice, multiple-choice, and dropdown selection types, be sure to fill in all your filter options here, one per line.These options will be directly used as the data source for the front-end filter.

Example:Assuming we are setting up a real estate website with a "property" content model, we can define the following custom fields:

  • Layout:Field invocationapartmentTypeField type "Dropdown selection", default value: One bedroom, two bedrooms, three bedrooms, four bedrooms and above.
  • Area:Field invocationareaField type "drop-down selection", default value: Chaoyang District, Haidian District, Fengtai District.
  • Price range:Field invocationpriceRangeField type "dropdown selection", default value: below 500,000, 500,000-1 million, 1-2 million, above 2 million.

With these configurations, AnQiCMS injects filterable parameter properties into your content model, laying the foundation for subsequent dynamic filtering.

The construction of the front-end filtering interface:archiveFiltersTag

After defining the content parameters on the backend, the next step is to display these filter conditions on the website frontend so that users can make selections. AnQiCMS'sarchiveFiltersTags are born for this.

archiveFiltersThe tag can dynamically generate a filter list based on the custom fields you define in the content model, and automatically handle the construction of URL parameters after clicking.

Usage:

In your template file (usually the list page template, such as{模型table}/list.htmlUse it inarchiveFilters.

{# 参数筛选代码示例 #}
<div class="filter-area">
    <div class="filter-title">筛选条件：</div>
    {% archiveFilters filters with moduleId="1" allText="全部" %} {# moduleId 替换为你的内容模型ID #}
        {% 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>

Label parameter parsing:

  • filters: This is a custom variable name you use to storearchiveFiltersAll filter data generated by the label.
  • moduleId:Very important. You need to translate this here.1Replace with the ID of the content model you want to filter (such as "article model" or "product model"). This ID can be viewed on the "content model" management page in the background.
  • allText: Used to set the text content of the "All" option, for example, "All", "Unlimited", etc. If you do not want to display this option, it can be set tofalse.

filtersVariable structure parsing:

In{% for item in filters %}the loop,itemRepresents a filtering dimension (such as "house type", "area"). It includes the following key properties:

  • item.Name：The name of the filtering dimension (such as "house type").
  • item.FieldName：The calling field of the filtering dimension (such asapartmentType)
  • item.ItemsThis is an array that includes all selectable options under this dimension. Each optionvalhas:
    • val.Label: The display text of the option (such as "One-bedroom").
    • val.Link:Core function.This is the URL automatically generated by AnQiCMS after clicking this option, with the correct query parameters.When the user clicks on this link, the page will refresh with new filtering parameters.
    • val.IsCurrentA boolean value indicating whether the current option is selected, convenient for adding in the front-end.activeClass styles and so on.

Through this tag, you do not need to manually concatenate complex URL parameters, AnQiCMS will automatically generate the correct filter link according to the current page status and user selection, simplifying front-end development.

Section 3, Dynamically adjust the list display results:archiveListTag

The user selects a filter condition and clicks, after which the page jumps to a new URL that contains the parameters selected by the user. At this point, we needarchiveListLabels to dynamically display matching content lists based on these parameters.

archiveListThe tag is intype="page"In this mode, it will automatically read the query parameters from the current URL, including those byarchiveFiltersCustom parameters generated by tags, and content filtering is performed accordingly.

Usage:

Similarly, use the tags in your list page template.archiveListTags are used to display the content list.

{# 文档列表代码示例 #}
<div class="content-list">
    {% archiveList archives with type="page" moduleId="1" limit="10" %} {# moduleId 替换为你的内容模型ID #}
        {% for item in archives %}
        <div class="content-item">
            <a href="{{ item.Link }}">
                <h4>{{ item.Title }}</h4>
                {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                {% endif %}
                <p>{{ item.Description }}</p>
                {# 可以在这里显示自定义参数 #}
                {% archiveParams params with id=item.Id sorted=false %}
                    {% if params.apartmentType %}<span class="param-tag">户型: {{ params.apartmentType.Value }}</span>{% endif %}
                    {% if params.area %}<span class="param-tag">区域: {{ params.area.Value }}</span>{% endif %}
                {% endarchiveParams %}
                <div class="meta">
                    <span>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    <span>浏览量: {{ item.Views }}</span>
                </div>
            </a>
        </div>
        {% empty %}
        <p class="no-content">当前筛选条件下没有找到任何内容。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

Label parameter parsing:

  • archives: You can customize the variable name to store the filtered content list.
  • type="page":Key parameters. This tellsarchiveListThe tag is currently in pagination or filtering mode, it will actively read the query parameters from the URL.
  • moduleId：Please specify the content model ID again to ensure that the correct model's content is obtained.
  • limit="10"：The number of items displayed per page.

when the user clicksarchiveFiltersGenerated link (for example `…/list.html?apartment