How to implement the parameter filtering function of the article list in AnQiCMS (such as filtering by custom properties)?

As the content of the website becomes richer, users often hope to find the information they are interested in more accurately, rather than searching for a needle in a haystack of disordered content.For operators, providing flexible article list filtering functions can not only significantly improve user experience but also effectively help users discover more related content, thereby increasing the time spent on the website and interaction.

AnQiCMS is well aware of this need, through its highly flexible content model and powerful template tag system, making the implementation of parameter filtering for article list functionality extremely simple and intuitive.Even custom properties can easily integrate into the filtering system, bringing infinite possibilities for website content management and display.

Behind the scenes: Define and manage your custom content properties

To implement parameter filtering of the article list, we first need to define the 'attributes' that can be filtered for the articles. In AnQiCMS, this is due to one of its core features -Flexible content model.

Imagine you are running a real estate information website, in addition to the traditional article title, content, and publication time, you may also need to add custom attributes such as 'property type' (such as residential, commercial, apartment), 'location', and 'apartment layout' (such as one-bedroom, two-bedroom, three-bedroom) for each property (that is, each article).

In the AnQiCMS backend, you can easily set these custom properties by following these steps:

1. Enter content model management:Find "Content Management" under the background navigation. AnQiCMS provides default article and product models, and you can also create new models as needed.
2. Add custom field:Select the model you need to add properties to (for example, "Article Model"), click edit to enter the model details.In here, you will see the "custom field of content model" area.Click 'Add field' to define new properties.
3. Configure Field Type:Choose the appropriate field type for your custom attribute. For example, 'House type' can be selected as 'Single choice' or 'Drop-down choice', and list options such as 'Residential', 'Commercial', 'Apartment'.While such properties as 'area' can be selected as 'numeric' type.It is worth noting that the "parameter name" and "call field" are very critical for subsequent use in the template, it is recommended to use easily understandable English or pinyin as the "call field", as it will serve as the variable name in the template.
4. Save and Apply:After adding custom fields, save the content model. After that, when you publish or edit articles under this model, you will be able to see and fill in these newly added custom attributes.

These custom properties are the foundation for our implementation of article list filtering. They make your content more structured and provide users with a finer search dimension.

Front-end presentation: Skillfully use filter tags in templates

Define custom properties in the background and fill in the data for the articles. Next, display these filtering options on the website front end and allow the article list to change dynamically according to the user's selection. AnQiCMS provides two powerful template tags to perfectly meet this need: archiveFiltersandarchiveList.

archiveFiltersLabel: Generate filter options

archiveFiltersThe label's responsibility isGenerate clickable filter conditions. It will automatically read all available custom filter fields and their corresponding values, and then generate links with filter parameters.

For example, to generate a filter menu for house types and layouts on your real estate website article list page, you can use the template in this wayarchiveFilters:

<div class="filter-area">
    {% archiveFilters filters with moduleId="你的文章模型ID" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-label">{{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 %}
    {% endarchiveFilters %}
</div>

Here:

• moduleId="你的文章模型ID"Tell AnQiCMS which content model you want to generate a filter for (for example, the article model is usually1)
• allText="不限"Defined the display text for the "All" option.
• filtersThe variable will contain a list, where eachitemrepresents a selectable custom field (such as “House Type”), itsNameis the Chinese name of the field,FieldNameis the English identifier of the field.
• Eachitem.ItemsThis is a sublist containing all possible values for the field (such as 'Residential', 'Commercial').val.LabelIs the display name,val.LinkIs the URL that will be navigated to when clicked, andval.IsCurrentIt can help you add filtering conditions to the currently selectedactiveStyle.

archiveListLabel: dynamically respond to filtering results

archiveListTags are used forDisplay article lists on the page. Its strength lies in, when withtype="page"When combined, it canIntelligently automatically identify and respond to the filtering parameters in the URLThus dynamically adjusting the displayed article content. This means that you don't have toarchiveListPass manually in the tagarchiveFiltersThe generated filter value, AnQiCMS will automatically complete the match.

Continue with the above real estate website example, the part of your article list can be written like this:

<div class="article-list">
    {% archiveList archives with moduleId="你的文章模型ID" type="page" limit="10" %}
        {% for item in archives %}
        <div class="article-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>{{item.Description}}</p>
            {%- archiveParams params with id=item.Id %}
            {%- for param in params %}
                {%- if param.FieldName == "房屋类型" %} {# 假设你的自定义字段调用字段是"房屋类型" #}
                <span>房屋类型: {{param.Value}}</span>
                {%- endif %}
                {%- if param.FieldName == "面积" %} {# 假设你的自定义字段调用字段是"面积" #}
                <span>面积: {{param.Value}} 平方米</span>
                {%- endif %}
            {%- endfor %}
            {%- endarchiveParams %}
            <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        </div>
        {% empty %}
        <p>抱歉，没有找到符合条件的房产信息。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页功能同样无缝衔接 #}
    {% pagination pages with show="5" %}
        <div class="pagination-controls">
            <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 page in pages.Pages %}<a class="{% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.Name}}</a>{% endfor %}
            {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>{% endif %}
            <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        </div>
    {% endpagination %}
</div>

Here:

• moduleIdMake sure we are getting the correct content model article.
• type="page"Enabled pagination mode, also allowsarchiveListCan listen to the filtering parameters in the URL.
• limit="10"Control the number of articles displayed per page.