How to implement content list filtering by custom parameters in AnQiCMS?

In AnQi CMS, flexibly displaying and filtering content is one of the core needs for website operation.As the content structure of a website becomes increasingly complex, for example, if you operate an e-commerce platform and need to filter products by color and size, or if a real estate website needs to filter housing resources by type and area, traditional classification tags may be insufficient.At this time, by using the powerful custom parameter function of Anqi CMS, it can easily realize the filtering display of content lists according to the parameters you define, greatly enhancing the user experience and the organization efficiency of website content.

Next, we will delve deeper into how to implement this feature in AnQiCMS together.

Understand the role of custom parameters in AnQiCMS.

One of the most powerful features of AnQiCMS is its flexible content model.In addition to basic fields such as article title and content, the system allows you to customize additional fields for each content model, which we call "custom parameters".For example, in a "product

These custom parameters can not only be displayed on the content detail page, but more importantly, they can be used as filtering conditions to help users quickly find the content they are interested in.A security CMS provides special template tags to allow you to easily convert these parameters into front-end operable filters.

Core tags:archiveFiltersandarchiveList

To implement custom parameter filtering of content lists on the front-end, mainly the two core template tags of Anqi CMS will be used:archiveFiltersandarchiveList.

  • archiveFiltersTagThis tag is responsible for generating the front-end filter interface.It can automatically identify the custom parameters defined in your backend content model, and convert them into clickable filter option links.When the user clicks on these links, the page URL will carry the corresponding filter parameters.
  • archiveListTag: This tag is used to retrieve and display content lists. When it is combined witharchiveFiltersWhen used together, it intelligently reads the filter parameters carried in the current page URL and automatically filters the content based on these parameters, only displaying content that meets the conditions.

Gradually implement content list filtering display

We will demonstrate how to implement content list filtering by custom parameters with a specific example.Assuming we have a 'product' content model and have added two custom fields 'material' and 'color'.

Step one: Prepare content model and custom fields

First, make sure that the AnQiCMS backend is configured with the corresponding "content model" and "custom fields".

  1. Log in to the backend: Enter the AnQiCMS backend management interface.
  2. Create or edit the content modelNavigate to "Content Management" -> "Content Model". You can edit an existing model (such as "Product Model") or create a new content model.
  3. Add custom fieldIn the editing page of the selected content model, find the "Content Model Custom Field" area, click "Add Field".
    • Example Field 1 (Material):
      • Parameter name:材质
      • Call field:material(This field name will be used for template calls and URL parameters)
      • Field type:单项选择(Assuming material is a single selection)
      • Mandatory: Set according to need
      • Default value: Enter an option per line, for example:木材/金属/塑料
    • Example Field 2 (Color):
      • Parameter name:颜色
      • Call field:color
      • Field type:多项选择(Assuming multiple colors can be selected)
      • Mandatory: Set according to need
      • Default value: Enter an option per line, for example:红色/蓝色/绿色
    • Save your content model settings.
  4. Publish or edit contentIn the 'Content Management' -> 'Publish Document' or 'Document Management', select the corresponding 'Material' and 'Color' field values for your 'Product' content.

Step two: Design the list page template

Next, we need to modify or create the product list page template. Assuming your product list page template isproduct/list.html.

Open your template file (usually located in/template/您的模板名称/product/list.html)

1. Build the filter area (archiveFilters)

At the appropriate position in the template, usearchiveFilterstags to generate the filter.moduleIdThe parameter is very important, as it tells the tag which content model's filter parameters to generate.allTextParameters can customize the text of options such as 'All' or 'Unlimited'.

{# 假设产品模型的ID是2，请根据您的实际情况修改 moduleId 参数 #}
<div class="filter-area">
    <h3>筛选条件</h3>
    {% archiveFilters filters with moduleId="2" 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>

Code analysis:

  • moduleId="2": Specify the filter being generated for the product model with ID 2.
  • allText="不限"Set when no filter conditions are selected, display the 'Unlimited' text.
  • Outer layerfor item in filtersLoop: Traverse all filterable parameter groups (e.g., 'Material', 'Color').
    • item.Name: Display the parameter name, such as 'material', 'color'.
  • Inner layerfor val in item.ItemsLoop: Traverse all optional values under each parameter group (for example, 'wood', 'metal', 'plastic').
    • val.Label: Show each option's name, such as "wood", "red".
    • val.LinkThis is the most critical part!It will generate a URL with the corresponding filter parameters.When the user clicks, the page will reload and filter the content based on the parameters in this URL.
    • val.IsCurrentA boolean value, if the current option is selected, it will betrue, can be used to addactiveStyle to highlight.

2. Show content list (archiveList)

Below the filter area, usearchiveListLabel to display content.

`twig

<h2>产品列表</h2>
{# 同样假设产品模型的ID是2。type="page" 开启分页模式，limit="10" 每页显示10条 #}
{% archiveList products with moduleId="2" type="page" limit="10" %}
    {% for item in products %}
    <div class="product-item">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            {% if item.Thumb %}
            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
            {% endif %}
            <p>描述: {{ item.Description }}</p>
            {# 调用自定义字段，注意这里直接使用我们在后台定义的“调用字段”名称 #}
            <p>材质: {{ item.material }}</p>
            <p>颜色: {{ item.color }}</p>
        </a>
    </div>
    {% empty %}
    <p>抱歉，没有找到符合条件的产品。</p>
    {% endfor %}
{% endarchiveList %}

{# 添加分页导航 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间多页 #}
        {% for pageItem in pages.