How to use the filtering feature of AnQiCMS to display a document list under specific conditions?

How to allow users to quickly find the information they need while managing a large amount of content in AnQiCMS is one of the key factors in content operation. 幸运的是，AnQiCMS provides powerful filtering features, allowing you to flexibly display document lists based on specific conditions, thereby greatly enhancing the user experience and content retrieval efficiency of the website.

Define your filtering requirements: start from the background content model

To make use of the AnQiCMS filtering feature, you first need to clarify the conditions through which users should search for content.This usually requires you to make some presets in the background content model.AnQiCMS supports a highly flexible content model, you can customize the structure of articles, products, events, and other types of content according to your business needs.

For example, if you operate a real estate website, you may want users to be able to filter housing information based on the type of property (such as residential, commercial), the area (such as the city center, suburbs), and the price range.To implement these filters, you need to go to the "Content Management" menu in the backend and enter the "Content Model" settings.Here, you can edit or create a new content model and add custom fields to it.

It is crucial to choose the appropriate field type when adding custom fields.For example, for 'house type' or 'area', you can choose 'single selection' or 'drop-down selection', and preset all possible options (such as residential, commercial; downtown, suburban areas).'These preset options are the filtering conditions that future users can click to select on the frontend page.Ensure these fields are reasonably defined, which is the basis for the normal operation of the front-end filtering function.

Smartly layout the front-end: utilizingarchiveFiltersBuild a filtering interface with tags

The backend content model settings have been completed, and the corresponding field information has been filled in for your document content. Next, we can use the built-in tags of AnQiCMS in the front-end template of the website to construct the user-visible filtering interface.

The AnQiCMS template system uses syntax similar to Django, wherearchiveFiltersTags are specifically used to generate filtering conditions.This tag will automatically extract the fields and their preset values that can be filtered according to the specified content model, and convert them into clickable links.

Suppose we want to add a filtering feature to the product list page, it is usually used like this in the template filearchiveFiltersTags:

{# 假设我们的产品模型ID是2，并希望筛选条件显示“全部”选项 #}
<div class="filter-section">
    {% archiveFilters filters with moduleId="2" 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 %}
                {# val.IsCurrent 会判断当前选项是否被选中，方便添加样式 #}
                <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a> {# 输出筛选选项的名称和点击链接 #}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

In this code block,moduleId="2"Specify the content model we want to filter (for example, "product model").allText="不限"Then set the display text for the "All" option in each filter group.archiveFiltersThe tag will return afiltersA variable, it is an array containing multiple filter groups. We iterate through the filter groups in two layersforand the filter options within each group (item) and each group's filter options (valThus, a dynamic filtering interface is generated. Each option'sLinkThe attribute automatically generates a URL with the corresponding filtering parameters,IsCurrentAttributes can help us add highlight styles to the currently selected filter conditions, enhancing the user experience.

Linked display:archiveListTags make the filter results clear at a glance.

When the user clicks on a filter condition on the filter interface, the page will jump to a URL with specific query parameters. At this point, it is necessary toarchiveListThe tag appears, it can intelligently display a list of documents that meet the conditions according to these URL query parameters.

archiveListThe tag is a core tag used to retrieve document lists in AnQiCMS. When you configure it in the template, if the URL contains the parameters generated byarchiveFilters,archiveListThe system will automatically identify and apply these filter conditions.

Here is an example of a document list that combines filtering and pagination features:

<div class="document-list">
    {% archiveList archives with moduleId="2" type="page" limit="10" %}
        {% for item in archives %}
        <div class="document-item">
            <a href="{{item.Link}}">
                <img src="{{item.Thumb}}" alt="{{item.Title}}" class="document-thumb">
                <h3 class="document-title">{{item.Title}}</h3>
                <p class="document-desc">{{item.Description}}</p>
            </a>
            <div class="document-meta">
                {# 假设“房屋类型”是您自定义的字段，可以直接通过item.字段名调用 #}
                <span>房屋类型: {{item.房屋类型}}</span> 
                <span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            </div>
        </div>
        {% empty %}
        <p>抱歉，没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航 #}
    <div class="pagination-section">
        {% pagination pages with show="5" %}
            <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
            {% if pages.PrevPage %}
            <a class="pagination-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
            {% endif %}
            {% for page in pages.Pages %}
            <a class="pagination-link {% if page.IsCurrent %}active{% endif %}" href="{{page.Link}}">{{page.Name}}</a>
            {% endfor %}
            {% if pages.NextPage %}
            <a class="pagination-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
            {% endif %}
            <a class="pagination-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
        {% endpagination %}
    </div>
</div>

In this example,archiveListSimilarly specifiedmoduleId="2",type="page"It indicates that we want the content to be displayed with pagination,limit="10"It controls displaying 10 documents per page. When the URL has filtering parameters (such as.../products?房屋类型=住宅&区域=市中心),archiveListit will automatically filter the corresponding product documents based on these parameters and cooperate withpaginationLabel to generate the correct pagination link. You can also directly{{item.您自定义的字段名}}call the custom field content in the document to enrich the list display.

Summary

AnQiCMS's filtering function is defined through a flexible content model on the backend and the frontendarchiveFilters/archiveListThe联动 label provides the website with powerful and easy-to-implement content filtering capabilities.From defining filtering dimensions, building a filtering interface to displaying filtering results, the entire process is smooth and highly customizable, effectively helping your users quickly locate the information they need, thereby enhancing the practicality and user satisfaction of the overall website.

Frequently Asked Questions (FAQ)

1. Can I use multiple filter conditions on a single page? How will AnQiCMS handle it?Yes, the AnQiCMS filtering function supports the simultaneous application of multiple filter conditions. When the user selects multiple conditions, archiveFiltersThe tag-generated link will attach all conditions as URL query parameters.archiveListThe tag will automatically parse these parameters and perform an "AND" logical filter, displaying only the documents that meet all selected conditions.For example, if both 'House Type: Residential' and 'Area: Downtown' are selected, only residential listings in the downtown area will be displayed.

How to set a filter condition to be selected by default, or to display a specific filter result when the page is loaded? archiveFiltersThe tag itself will automatically mark the corresponding filter options based on the query parameters of the current URLIsCurrent=true.If you want to display specific filter results when the page is initially loaded, you can directly add the corresponding query parameters to the page URL.