AnQiCMS (AnQiCMS) provides website operators with powerful content management capabilities, one very practical feature of which is the ability to dynamically adjust the display content of document lists through filtering conditions.This not only greatly enhances the user experience, helps visitors quickly find the information they need, but also optimizes the internal link structure of the website, indirectly helping search engine optimization (SEO).

Imagine if your website is rich in content, but every time the user searches for specific information, they can only do so through cumbersome pagination or a single keyword search, which is undoubtedly frustrating.The dynamic filtering feature is like equipping your website content with an intelligent navigation system, where users can click a few times to accurately filter out the document lists they are most interested in, making the content presentation more intelligent and personalized.

Core mechanism:联动 of document list tags and filters

The AnQi CMS achieves this feature mainly by relying on its powerful template tag system, especiallyarchiveList(Document list tag) andarchiveFiltersthe clever cooperation of (document parameter filter tags).

archiveListIt is the core tool you display in the template, which itself supports various basic filtering and sorting parameters, such as:

  • moduleIdSpecify which content model document to display (such as article model or product model).
  • categoryIdLimit the search to a specific category or multiple categories.
  • flagBased on recommended properties (such as headlines, recommendations, sliders, etc.) to filter.
  • orderDefine the sorting method of documents, such as by the most recent published, views, etc.
  • qUsed for keyword search, to achieve fuzzy matching.
  • limitControls the number of documents displayed per page, used in conjunction with pagination tags.

These parameters can already meet the needs of most list display. However, when you need more detailed and multi-dimensional filtering, such as filtering by product color, house type, or article theme,archiveFiltersLabels came into being.

Build multi-dimensional filtering: start from the content model

To implement custom dynamic filtering, the first step is to prepare in the Anqi CMS backend content model.

The content model is the flexibility of Anqi CMS, which allows you to define exclusive fields for different types of content (such as articles, products, cases, etc).When you need to filter by specific conditions, you need to create a "custom field" in the corresponding content model.

For example, you operate a real estate website and hope that users can filter housing resources according to conditions such as 'house type', 'area range', 'orientation', etc. You can add these fields to the 'housing model':

  • Room type: Field type can be either 'Single selection' or 'Dropdown selection', and preset options such as 'One bedroom apartment', 'Two bedrooms apartment', etc.
  • Area range: Field type can be 'number', allowing users to enter a range.
  • Orientation: Field type can be 'single selection', with preset options such as 'south', 'north', etc.

These custom fields are exactlyarchiveFiltersthe source of the label to get the filter conditions.

Create a filter interface in the template

After defining the fields in the content model, the next step is to use them in the front-end template,archiveFiltersThe tag is used to generate a filtering interface. This tag is usually used on document list pages or the document homepage.

archiveFiltersThe label automatically parses the custom fields supported by the current content model and generates a corresponding list of filter options. It provides several key parameters:

  • moduleIdSpecify which model's filter to retrieve (witharchiveListofmoduleIdmaintain consistency).
  • allTextDefine the display text for default options like 'All' or 'Unlimited'.
  • siteIdIf you use the multi-site feature, you can specify a filter to retrieve a specific site.

WhenarchiveFiltersThe label is executed when it returns a variable containing all the filter groups (corresponding to the custom fields you define).Each filter group also includes multiple filter options (corresponding to the options you set for the field).It is most important that each filter option will automatically generate a URL link with the corresponding filter parameters.

For example, a segment usingarchiveFiltersmay look like this:

{# 假设这是房产列表页，moduleId=10代表房源模型 #}
<div>
    <h3>筛选房源</h3>
    {% archiveFilters filters with moduleId="10" allText="不限" %}
        {% for filterGroup in filters %}
            <div class="filter-group">
                <span>{{ filterGroup.Name }}:</span> {# 例如：户型、朝向 #}
                <ul>
                    {% for option in filterGroup.Items %}
                        <li class="{% if option.IsCurrent %}active{% endif %}">
                            <a href="{{ option.Link }}">{{ option.Label }}</a> {# 例如：一室一厅、朝南 #}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

This code dynamically generates a series of filter links, for example, after clicking "One bedroom one living room", the page URL may change to/fangyuan/list.html?huxing=yishiyiting.

Dynamic matching of document list and filter results

Once a user clicks on a filter link, the page URL will include the corresponding filter parameters (for examplehuxing=yishiyiting）。At this point, the amazing thing isarchiveListThe tag can intelligently identify and automatically apply these parameters in the URL to adjust the display content of the document list.

You do not need toarchiveListManually parse URL parameters in the tag. Just make surearchiveListoftypethe parameter topage(Indicates enabling pagination functionality, usually combined with filtering and searching), it will automatically be linked witharchiveFiltersthe generated link perfectly.

For example, the code to display the listing of properties:

{# 房源列表部分 #}
<ul class="house-list">
    {% archiveList houses with moduleId="10" type="page" limit="12" %} {# type="page"是关键 #}
        {% for item in houses %}
            <li>
                <h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
                <p>{{ item.Description }}</p>
                {# 这里还可以显示自定义字段，例如 item.huxing, item.chaoxiang #}
                <p>户型: {{ item.huxing }}</p>
            </li>
        {% empty %}
            <li>暂无符合条件的房源。</li>
        {% endfor %}
    {% endarchiveList %}
</ul>

{# 分页部分 #}
<div class="pagination">
    {% pagination pages with show="5" %}
        {# 渲染分页链接，这些链接也会自动带上筛选参数 #}
        {% for pageItem in pages.Pages %}
            <a href="{{ pageItem.Link }}" class="{% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
        {% endfor %}
    {% endpagination %}
</div>

After the user clicks the filter link for "One Bedroom One Living Room,"archiveListwill automatically filter according to thehuxing=yishiyitingthe parameter will only show housing units with "One Bedroom One Living Room". At the same time,paginationThe pagination links generated by the tags will also automatically include these filtering parameters, ensuring that the filtering conditions are still valid when the user navigates through pages.

Integration of search and filtering

In addition to custom filtering, you can also combine the keyword search function with dynamic filtering.archiveListlabel'sqThe parameter is designed for this. When the URL contains at the same timeq=关键词and custom filter parameters,archiveListIntelligently combine the two to provide more accurate search results.

The importance of pseudo-static rules.

It is crucial to configure appropriate rewrite rules to make these dynamically generated filter URLs more aesthetic and SEO-friendly. Anqi CMS provides flexible rewrite rule options, allowing you to set the URL structure as needed, for example, to/fangyuan/list.html?huxing=yishiyitingbe beautifulized/fangyuan/huxing-yishiyiting/This not only improves the user experience, but also makes it easier for search engines to understand the theme and structure of the page.

Through the above mechanism, AnQi CMS makes the dynamic filtering and display of website content simple and efficient.The operator only needs to define the content model and fields in the background, and reasonably call the tags in the template, so as to provide users with a highly customizable and friendly content browsing experience, thereby enhancing the professionalism and attractiveness of the website.

Frequently Asked Questions (FAQ)

  1. Can dynamic filtering conditions be used at the same time as normal keyword search?Of course. Anqi CMS'sarchiveListThe tag is very intelligent, it will simultaneously identify and apply custom filtering parameters in the URL (byarchiveFiltersgenerated) and keyword search parameters (qParameter). This means that the user can first filter out listings with "one bedroom and one living room", and then search for listings containing "school district houses" among these results, and the system will handle these query conditions together.

  2. If I defined custom fields in the content model butarchiveFiltersthese fields are not displayed what should I do?First, please check the `archiveFilters