How can users find and browse content more efficiently on the website, which is the key to improving user experience and website value.Especially for document list pages, if flexible filtering functions can be provided, allowing users to dynamically adjust the display of content according to their needs, it will undoubtedly greatly enhance the interactivity and usability of the website.AnQiCMS based on its flexible content model and powerful template tag features, can easily meet this requirement.

To implement the dynamic filtering of the document list page, we mainly use AnQiCMS'sCustom fields of the content model/Document parameter filter tag (archiveFilters)andDocument list tag (archiveList), and pass the filter conditions through URL parameters to dynamically display the content.

One, Preparation: Build a filterable content model

The basic foundation of all dynamic filtering is rooted in the structure of the data itself.In AnQiCMS, this means that we need to define the custom fields that can be used for filtering in the 'Content Model'.

  1. Enter the content model management:Log in to the AnQiCMS backend, navigate to the "Content ManagementHere is a list of all the content models on your website, such as "article model" or "product model".You can choose an existing model to edit, or create a new model.

  2. Create or edit custom fields:On the editing page of the content model, find the section of 'Custom fields of content model'.Here, you can add new fields.

    • Single choice (Radio):Applicable in situations where only one option can be selected, such as “Type of property: Residential/Commercial/Office building”.
    • Multiple Selection (Checkbox):Allow users to select multiple options, such as 'Facilities: Parking spaces/Residential areas near schools/Subway apartments'.
    • Dropdown selection (Select):When there are many options, they are presented in a dropdown menu form, such as "Price Range

    When adding these fields, please fill in the "parameter name" (which is the unique identifier when calling in the template) and the "parameter value" (the actual content of the option, one per line). For example, you can create a field named "House Type" with the parameter namehouseType，and fill in the default value with 'Residential', 'Commercial', and 'Office Building'.

  3. To fill in data for the document:After completing the custom field settings, you will see these new fields when you publish or edit documents under the corresponding content model.Please make sure to fill in the values of these custom fields accurately in your document, so that they can be filtered.

II. Core Functions: Generate filtering conditions.archiveFilterstags

After the data is ready, we can generate the filter conditions on the user interface of the template. AnQiCMS providesarchiveFiltersTags, used specifically for automatically generating these dynamic filter links.

This label is usually placed at the top or sidebar of the document list page, and it will be based on the fields defined in your content model and the context of the current page (such as the current moduleId），English生成一系列筛选链接。

Basic usage example:

{# 在文档列表页的模板文件 (例如 {模型table}/list.html) 中 #}

<div>
    <h3>筛选条件</h3>
    {% archiveFilters filters with moduleId=1 allText="全部" %}
        {% for item in filters %}
        <ul class="filter-group">
            <li class="filter-name">{{item.Name}}: </li> {# item.Name 会显示您在后台定义的“参数名” #}
            {% for val in item.Items %}
            <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                <a href="{{val.Link}}">{{val.Label}}</a>
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

Code analysis:

  • {% archiveFilters filters with moduleId=1 allText="全部" %}：This is a callarchiveFilters标签的开始。
    • filtersis the variable name you define for the filtered result data, you can use it in subsequentforAccessing filtered data through this variable in the loop.
    • moduleId=1指定要筛选的内容模型 ID。这里假设您的文章模型 ID 是 1。这是非常重要的，确保筛选条件是针对正确的内容类型。
    • allText="全部"：Define the default text under all filter conditions, for example, "All House Types
  • {% for item in filters %}：This loop will iterate over each selectable custom field (such as “House Type”, “Facilities”).
    • item.Name：Displays the name of the custom field, such as “House Type”.
    • item.Items：Contains all optional values of the current custom field (for example, “Residential”, “Commercial”)).
  • {% for val in item.Items %}：This inner loop will iterate over all optional values of each field.
    • val.Label：Display the current filter option text, for example “Residential”.
    • val.LinkThis is the most critical part!AnQiCMS will automatically generate a URL containing the selected filter conditions.When the user clicks this link, the page will refresh and include the corresponding URL query parameters.
    • val.IsCurrent：A boolean value, it is true if the current option is selected.true，You can use it to add a filter condition for the currently selected.activeClass name, to provide visual feedback.

3. Dynamic display of content:archiveListCooperation of tags

When the user clicksarchiveFiltersAfter generating the filter link, the page will refresh and similar information will be added to the URL.?houseType=住宅&area=50-100Such query parameters. At this time, the document list tabarchiveListWill give full play to its powerful automatic matching ability.

archiveListThe label is in the template of the document list page, when itstypeparameter settingspageWhen it is triggered, it will intelligently parse all query parameters in the current URL (including those generated byarchiveFiltersthe filtering parameters generated, as well as the search keywordsqand automatically apply these parameters to the document query.This means you do not need to write additional logic to obtain URL parameters and manually construct query conditions, AnQiCMS handles it all for you.

Basic usage example:

English

{% archiveList archives with moduleId=1 type="page" limit="10" %}
    {% for doc in archives %}
    <div class="document-item">
        <h4><a href="{{doc.Link}}">{{doc.Title}}</a></h4>
        <p>{{doc.Description}}</p>