How to make users more efficiently search and browse content in website operation is the key to improving user experience and website value.Especially for document list pages, if flexible filtering functions can be provided to allow 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 with 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 for content model/document parameter filtering tags (archiveFilters)anddocument list tags (archiveList)And pass the filtering conditions through URL parameters to dynamically present the content.

1. Preparation: Build a filterable content model

The foundation of dynamic filtering is based on 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 content model management:Log in to the AnQiCMS backend, navigate to the 'Content Management' module, and then click 'Content Model'.Here is listed 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 content model editing page, find the "content model custom field" section.Here, you can add new fields. To implement filtering functionality, we recommend using the following field types:

    • Single choice (Radio):Applicable when only one option can be selected, for example, 'House type: Residential/Commercial/Office Building.'
    • Multiple Selection (Checkbox):Allow users to select multiple options, for example, 'Facilities: Parking/ School District/ Metro Housing.'
    • Dropdown Selection (Select):When there are many options, they are presented in a dropdown menu, for example, 'Price Range', 'Area Size'.

    When adding these fields, please note that you should fill in the "parameter name" (which is the unique identifier when calling 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 namehouseTypeFill in the default values such as 'Residential', 'Commercial', and 'Office Building'.

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

Second, core function: generate filtering conditions.archiveFiltersTag

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

This label is usually placed at the top or sidebar of the document list page, it will be based on the fields defined in your content model, as well as the context of the current page (such as the currentmoduleId)， automatically generate a series of filter links.

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 the callarchiveFiltersThe start of a tag.
    • filtersIs the variable name you define for the filtered result data, you can access the filtered data through this variable in subsequentforloops.
    • moduleId=1: Specify the content model ID to filter. It is assumed that your article model ID is 1. This is very important to ensure that the filtering conditions are for the correct content type.
    • allText="全部": Define the default text for all filter conditions, for example, "All types of houses," "All amenities."
  • {% for item in filters %}This loop will iterate over each filterable custom field (such as 'House Type', 'Facilities').
    • item.NameIt will display the name of the custom field, such as 'House Type'.
    • item.ItemsContains all the optional values of the current custom field (for example, "Residential", "Commercial").
  • {% for val in item.Items %}This inner loop will iterate over all the 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 filter condition.When the user clicks on this link, the page will refresh with the corresponding URL query parameters.
    • val.IsCurrentA boolean value, if the current option is selected, it will betrueYou can use it to add the selected filter conditionactiveclass name to provide visual feedback.

3. Dynamic content display:archiveListLabel配合

when the user clicksarchiveFiltersAfter generating the filter link, the page will refresh and include similar?houseType=住宅&area=50-100query parameters. At this point, the document list labelarchiveListWill exert its powerful automatic matching capability.

archiveListThe tag is in the template of the document list page, when itstypethe parameter topageAt that time, it will intelligently parse all query parameters in the current URL (including those byarchiveFiltersGenerated filter parameters and search keywordsqand automatically apply these parameters to the document query.This means you don't need to write additional logic to obtain URL parameters and manually construct query conditions, AnQiCMS handles it all for you.

Basic usage example:

`twig {# Assume this is the document list part that is in the same template file as the archiveFilters tag #}

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