How to build multi-condition filtering function for article list and display results in AnQiCMS?

In website operation, providing flexible multi-condition filtering functions for the article list can greatly enhance user experience and the discoverability of content.AnQiCMS (AnQiCMS) with its powerful content model and rich template tags makes building such features intuitive and efficient.Below, we will delve into how to implement the multi-condition filtering and display of article lists step by step in AnQiCMS.

Foundation Core: Flexible content model and custom fields

In AnQiCMS, the implementation of the multi-condition filtering function is primarily due to its 'flexible content model' design.This means you can create custom models for different types of content (such as articles, products) and define various custom fields under these models according to your business needs.These custom fields are the basis for building the filtering function.

For example, if you are running a real estate information website, you may need to add fields such as 'House Type' (such as apartment, villa, shop), 'House Style' (such as one bedroom living room, two bedrooms living room), 'Location' and 'Decorating Condition' to the 'Listing' content model.When you go to the 'Content Management' module in the background and enter the 'Content Model' settings, select or create a model, you can easily add these fields.For fields that need to be used as filtering criteria, it is especially recommended to use 'Single selection', 'Multiple selection', or 'Dropdown selection' types, as this allows predefined options, making it easier for users to perform precise filtering.These preset values are not only convenient for content entry, but also provide clear options for front-end filtering.

When these custom fields are created and applied to your content model, every article or product you publish will include this additional information, thereby laying the data foundation for subsequent filtering.

Build the filter interface: skillful usearchiveFiltersTag

With custom fields as data support, the next step is to build the filter interface on the front-end page. Anqi CMS providesarchiveFiltersTemplate tag, specifically used for dynamically generating filtering conditions based on these custom fields.

archiveFiltersThe usage of the tag is very flexible. You just need to specify the ID of the content model (moduleId), the system can automatically identify all the custom fields available for filtering under the model, and generate filter options based on the preset values of these fields. For example, if you want to build a filter for the article model with ID 1 on the article list page, you can use it like this:

{% archiveFilters filters with moduleId="1" allText="全部" %}
    <div class="filter-section">
        {% 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="{% if val.IsCurrent %}active{% endif %}">
                            <a href="{{ val.Link }}">{{ val.Label }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    </div>
{% endarchiveFilters %}

In this code block:

• filtersIt is a custom variable name used to receivearchiveFiltersReturns the filtered data.
• moduleId="1"Specify the article model ID to be filtered.
• allText="全部"Defines the text displayed for the “All” option.
• Outer layerfor item in filtersCycled through each filtering dimension (for example, "House Type", "Layout").
• Inner layerfor val in item.ItemsCycled through each specific option under each filtering dimension (for example, "Apartment", "Villa").
• val.LinkIs an automatically generated URL with corresponding filtering parameters, click to complete the filtering.
• val.IsCurrentUsed to determine whether the current option is selected, making it convenient to highlight the active filter condition through CSS.

Through such a structure, you do not need to manually write the URL for each filtering condition, AnQiCMS will intelligently generate it for you, greatly simplifying the development process. When the user clicks on a filtering option, the page will jump to a URL with the corresponding query parameters, for examplehttp://yourdomain.com/list/articles/?房屋类型=公寓&户型=两室一厅.

Display filtered results:archiveListThe powerful power of tags

When the user goes througharchiveFiltersAfter filtering the generated link, the page will reload with query parameters. At this time,archiveListThe tag will play a powerful role in displaying a list of articles that meet the filtering conditions.

archiveListIs AnQiCMS used to obtain the core tags of the article list. It can not only obtain articles based on conventional conditions such as category ID, model ID, recommendation attributes, but more importantly, whentype="page"At the time, it can automatically parse the query parameters in the URL, use these parameters as filtering conditions, and return a list of paginated articles that meet the conditions. This means that the custom field filtering parameters you pass in the URL (such as?房屋类型=公寓Would bearchiveListAutomatically recognized and applied.

This is a typicalarchiveListCode snippet used to display filtered results:

<div class="article-list">
    {% archiveList archives with type="page" moduleId="1" limit="10" %}
        {% for item in archives %}
            <div class="article-item">
                <a href="{{ item.Link }}">
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" />
                    <h3>{{ item.Title }}</h3>
                    <p>{{ item.Description }}</p>
                </a>
                <span>发布时间: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>浏览量: {{ item.Views }}</span>
                {# 还可以显示自定义字段，例如房产的“房屋类型” #}
                {% archiveParams params with id=item.Id sorted=false %}
                    {% if params.房屋类型 %}
                        <span>房屋类型: {{ params.房屋类型.Value }}</span>
                    {% endif %}
                {% endarchiveParams %}
            </div>
        {% empty %}
            <p>抱歉，没有找到符合条件的文章。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 别忘了加上分页导航 #}
    {% pagination pages with show="5" %}
        <div class="pagination-nav">
            {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
            {% for item in pages.Pages %}<a class="{% if item.IsCurrent %}current{% endif %}" href="{{ item.Link }}">{{ item.Name }}</a>{% endfor %}
            {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
        </div>
    {% endpagination %}
</div>

In this example:

• moduleId="1"Ensure that articles are only obtained from specified models.
• type="page"Enable pagination feature, and it is crucial, it makesarchiveListCan automatically read the filtering parameters in the URL.
• limit="10"Set the number of articles displayed per page.
• archiveParamsTags can be used to display specific custom field values for each article in the article list.
• paginationTags are responsible for generating beautiful pagination navigation, and these pagination links will also retain the current filtering conditions.

Actual operation example: taking a real estate website as an example

Assuming we have a real estate website, its "house" model (moduleId=2) contains the following custom fields:

• house_type(House Type): Single selection, options include 'Apartment', 'Villa', 'Shop'
• layout(Apartment Type): Single selection, options include 'One bedroom living room', 'Two bedrooms living room', 'Three bedrooms living room'
• decoration(Renovation status): Single choice, options include 'bare', 'simple decoration', 'finishing decoration'

You can organize the template code in this way to implement these filtering functions on the listing page:

"twig {# Property list page template: house/list.html #} <!DOCTYPE html>

<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<link rel="stylesheet" href="/static/css/style.css">

<header>...</header>

<main>
    <div class="container">
        <h1>房源列表</h1>

        {# 筛选区域 #}
        <div class="filter-area">
            {% archiveFilters house_filters with moduleId="2" allText="不限" %}
                {% for item in house_filters %}
                    <div class="filter-group">
                        <span class="filter-label">{{ item.Name }}:</span>
                        <div class="filter-options">
                            {% for val in item.Items %}
                                <a href="{{ val.Link }}" class="filter-item {% if val.IsCurrent %}active{% endif %}">
                                    {{ val.Label }}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            {% endarchiveFilters %}
        </div>

        {# 房源列表展示 #}
        <div class="house-listings">
            {% archiveList houses with type="page" moduleId="2" limit="8" %}
                {% for house in houses %}
                    <div class="house-card">
                        <a href="{{ house.Link }}">
                            {% if house.Thumb %}<img src="{{ house.Thumb }}" alt="{{ house.Title }}" class="house-thumb">{% endif %}
                            <h3>{{ house.Title }}</h3>
                            {% archiveParams house_params with id=house.Id sorted=false %}
                                <p>房屋类型: {{ house_params.house_type.Value }}</p>
                                <p>户型: {{ house_params.layout.Value }}</p>
                                <p>装修情况: {{ house_params.decoration.Value }}</p>
                            {% endarchiveParams %}
                        </a>
                    </div>
                {% empty %}
                    <p class="no-results">根据您的筛选条件，暂时没有找到合适的房源。</p>
                {% endfor %}
            {% endarchiveList %}
        </div>

        {# 分页导航 #}
        <div class="pagination-wrapper">
            {% pagination pager with show="5" %}
                {% if pager.TotalPages > 1 %}
                    <a href="{{ pager.FirstPage.Link }}" class="pager-link {% if pager.FirstPage.IsCurrent %}current{% endif %}">首页</a>
                    {% if pager.PrevPage %}<a href="{{ pager.PrevPage.Link }}" class="pager-link">上一页</a>{% endif %}
                    {% for p_item in pager.Pages %}
                        <a href="{{ p_item.Link }}" class="pager-link {% if p_