How to implement custom parameter filtering for document lists in AnQiCMS (such as by region, type)?

Unlock the potential of content: How AnQiCMS can implement custom parameter filtering for document lists (such as by region, type)

As an experienced website operations expert, I am well aware of the importance of an efficient content management system (CMS) for enhancing user experience and content value.AnQiCMS with its flexible and customizable features provides many conveniences in the field of content operation.Today, we will delve into how AnQiCMS cleverly implements the custom parameter filtering function for document lists, such as by region, type, etc. This is undoubtedly the key to enhancing the discoverability of website content and user interaction.

AnQiCMS's "Content Model": Basic for Flexible Filtering

In AnQiCMS, all content organization revolves around the core concept of 'Content Model'.It is like a tailor-made 'blueprint' for different types of information.For example, you can create an "article" model to manage blog content, a "product" model to display products, or even a "real estate" model to list properties.This flexible architecture allows us to define exclusive attribute fields for each content type, and it is these 'custom fields' that have become the foundation for our implementation of document list parameter filtering.

Imagine you are running a real estate information website.In addition to the traditional titles, content, etc., you may also need to add unique attributes such as "areaThe AnQiCMS content model feature allows you to easily add these custom fields.Single choice/Multiple selectionsandDrop-down selection.When you select these option types, you can preset a series of values for users to choose from, such as 'Beijing', 'Shanghai', 'Guangzhou' as options for the 'region' field, or 'apartment', 'villa', 'shop' as options for the 'type' field.These predefined values will be directly converted to options for users to filter on the frontend page.

Building Filterable Fields: Backend Configuration Details

Set the filterable custom fields on the AnQiCMS backend, the process is clear and intuitive.First, you need to enter the "Content Management" under the "Content Model" interface, select or create a model that suits your needs, such as the "Real Estate Model".

Next, in the "Content Model Custom Field" section, click "Add Field" to add a filter dimension to your property information. For example, you can configure it like this:

• Parameter Name: Area (This is the Chinese name for identification in the background)
• Field invocation:region(This is the English name used in the front-end template, recommended to use lowercase letters)
• Field type: Dropdown selection (because the region is usually single choice)
• Mandatory?: Decide according to your needs
• Default value: (Here, you need to enter the regions that can be selected by the user one per line, for example:)
  Beijing
  Shanghai
  Guangzhou
  Shenzhen

Similarly, if you need a "property typeAnQiCMS will automatically identify and generate filtering conditions for these options configured in the background.

Implementation of front-end template:archiveFiltersMagic of tags

After the backend content model and custom field configuration are completed, we need to present these filters in the website's front-end template and make them interact with the document list. AnQiCMS provides a powerful template tag for this—archiveFilters.

archiveFiltersThe label's responsibility is to automatically generate the frontend filtering interface based on the filtering fields defined in your content model. You can do this in the document list page template, for examplelist.htmlUse it to render region, type, and other filtering options.

It is usually used like this:

{% 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 %}

In this code block:

• moduleIdThe parameter is required, it tellsarchiveFiltersWe hope to filter documents under which content model (for example, the ID corresponding to your "real estate model").
• allTextThe parameter defines the display text for the "All" option, you can adjust it as needed.
• filtersIsarchiveFiltersThe label returns an object that contains all the selectable custom fields. We traverse it with aforloop.
• item.NameIt will display the Chinese name of the field, such as 'region'.
• item.ItemsThis is an array that contains all the available options for this field, such as 'Beijing', 'Shanghai'. We will traverse these options again.forLoop through these options.
• val.LabelDisplay the text of the option, such as "Beijing".
• val.LinkIt is the most critical part, AnQiCMS will automatically generate a URL containing the corresponding filter parameters.When the user clicks on this link, the page will filter according to this parameter.
• val.IsCurrentThen it helps you determine whether the current option is selected, so that you can add a highlight style on the interface.

Dynamic list display:archiveListTags and URL parameters

With the filter interface, we also need to ensure that the document list can be dynamically updated according to the user's selection. This isarchiveListwhere tags and URL query parameters work together.

In AnQiCMS,archiveListthe tag has a very smart feature: when itstypethe parameter to"page"When it does, it automatically reads the query parameters from the current URL and applies them as a filter to the document list. This means that whenarchiveFiltersThe link generated will include something similar?region=北京&type=公寓such parameters, andarchiveListit will automatically understand and display documents matching these conditions.

For example, the part of your document list can be written like this:

{% archiveList archives with moduleId="您的内容模型ID" type="page" limit="10" %}
    {% for item in archives %}
        <!-- 渲染文档列表项 -->
        <div class="document-item">
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <p>地区: {% archiveDetail with name="region" id=item.Id %}</p>
            <p>类型: {% archiveDetail with name="type" id=item.Id %}</p>
            <p>{{item.Description}}</p>
        </div>
    {% empty %}
        <p>抱歉，没有找到匹配条件的文档。</p>
    {% endfor %}
    
    <!-- 分页导航 -->
    {% pagination pages with show="5" %}
        <!-- ... 分页链接的渲染 ... -->
    {% endpagination %}
{% endarchiveList %}

Here:

• moduleIdThe content model to be queried was specified again.
• type="page"The list's automatic recognition of URL parameters was activated, and pagination is supported.
• limitControl the number of items displayed per page.
• When the URL contains?region=北京then,archiveListit will automatically queryregiondocuments with the field value 'Beijing'.
• CombinearchiveDetailLabel, you can display specific region and type information of each document in the list items.

Examples of actual application scenarios

For example, on a job recruitment website, you can create a "Position" content model. In this model, you can add custom fields such as:

• City: Dropdown selection (Beijing, Shanghai, Guangzhou, Shenzhen...)
• Job type: Multiple selection (Full-time, Part-time, Internship...)
• Salary range: Dropdown selection (5k-10k, 10k-20k, above 20k…)

Through AnQiCMS'sarchiveFiltersLabels, you can easily generate these filters at the top of the job list page. Users just need to click on "City: Shanghai", "Job Type: Full-time", and the page will refresh immediately, and byarchiveListThe label displays all full-time job positions located in Shanghai. This greatly enhances the efficiency of users searching for information and also makes the website content more personalized and practical.

Summary

AnQiCMS through its flexible content model and powerful template tag system, provides website operators with a powerful tool for implementing custom parameter filtering of document lists.From the backend field definition to the frontend filter rendering and dynamic content display, the entire process is designed to be closely linked, transforming technical details into practical functions that are easy to understand and operate.This not only optimizes the user's journey of content discovery on the website, but also provides solid technical support for refined content operation strategies.As an operation expert, I firmly believe that mastering and utilizing the characteristics of AnQiCMS will definitely help you gain an advantage in the digital marketing battlefield.

Frequently Asked Questions (FAQ)

Q1: I set up a custom filter field, but why is the label not rendering the corresponding filter on the front end page?archiveFiltersThe tag is not rendering the corresponding filter? A1:Please first check if your custom field is correctly configured in the content model as 'Single Choice', 'Multiple Choice', or 'Dropdown', and has set a 'Default Value' (i.e., option list). Secondly, ensure that you arearchiveFiltersThe label is correctly specifiedmoduleIdAnd there are indeed documents under this model that contain these custom fields. Additionally, make sure that your document list usestype="page".

Q2: Can I combine multiple custom filter parameters to filter documents, such as filtering by both 'region' and 'type'? A2:Of course. AnQiCMS'archiveListThe tag is designed to automatically read all custom query parameters from the URL. When the user clicks on different filter options,archiveFiltersit will automatically generate a URL containing multiple parameters (for example,yourdomain.com/list?region=北京&type=公寓)archiveListBased on all the parameters carried in the URL, the system will combine and filter to present the most accurate document list for you.

Q3: Can I filter by a field that is not of 'Select' type, but is text or numeric? A3: archiveFiltersLabels are mainly used to render filters based on 'selection' type fields (radio, checkbox, dropdown). However,archiveListIntype="page"In mode, it can also accept other custom fields in the URL as query parameters. This means that if you have a namedpriceThe numeric field, the user can directly construct the URL, for exampleyourdomain.com/list?price=10000) to filter, but you need to design the frontend UI (such as input boxes, sliders) for users to enter these text or numeric values, and then convert them into URL parameters using JavaScript.