English CMS (EnglishCMS) provides powerful content management capabilities for website operators, one very practical feature of which is the ability to dynamically adjust the display content of the document list through filtering conditions.This can not only greatly enhance the user experience and help visitors quickly find the information they need, but also optimize the internal link structure of the website, indirectly helping with search engine optimization (SEO).

Imagine if your website has rich content, but users can only search for specific information through tedious pagination or a single keyword search, which would undoubtedly be frustrating.The dynamic filtering feature, just like equipping your website content with an intelligent navigation system, allows users to quickly and accurately filter out the document list they are most interested in with just a few clicks, making the content presentation more intelligent and personalized.

Core Mechanism:联动 of document list tags and filters

English CMS implements this feature, mainly relying on its powerful template tag system, especiallyarchiveList(Document list tag) andarchiveFiltersthe clever cooperation of (document parameter filtering tag).

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

  • moduleId：Specify which content model's documents to display (such as article model or product model).
  • categoryId：Limit the search of documents to a specific category or multiple categories.
  • flag：Based on recommended properties (such as headlines, recommendations, sliders, etc.) to filter.
  • order：Define the sorting method of documents, such as by the latest release, views, etc.
  • q：Used for keyword search, to achieve fuzzy matching.
  • limit：Controls the number of documents displayed per page, used in conjunction with pagination tags.

These parameters can meet the needs of most list display requirements. However, when you need more detailed and multi-dimensional filtering, for example, 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 content model of the Anqi CMS backend.

The flexible feature of the content model in AnQi CMS allows you to define dedicated 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, if you operate a real estate website, you want users to be able to filter properties by conditions such as 'type', 'area range', 'orientation', etc. You can add these fields in the 'property model':

  • House layout：Field type can be selected as 'Single Choice' or 'Dropdown Selection', with preset options like 'One Bedroom One Living Room', 'Two Bedrooms Two Living Rooms', etc.
  • Area Range：Field type is optional 'numeric', allowing the user to input a range.
  • Orientation：Field type is optional 'single selection', with preset options such as 'south-facing', 'north-facing', etc.

These custom fields are exactlyarchiveFiltersthe source of the label filtering conditions.

Create a filtering interface in the template

After defining the fields in the content model, the next step is to use them in the front-end template,archiveFiltersThis tag is usually used for document list pages or document home pages.

archiveFiltersThe label will automatically parse the custom fields supported by the current content model and generate the corresponding filter option list. It provides several key parameters:

  • moduleId：指定要获取哪个模型下的筛选器（与 English），archiveListofmoduleId保持一致）English）。
  • allText：定义“全部”或“不限”这类默认选项的显示文本。
  • siteId：If you use the multi-site feature, you can specify a filter to get a specific site.

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

for example, a segment usingarchiveFilterstemplate code might 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 will dynamically generate a series of filter links, for example, after clicking on '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 the user clicks on a filter link, the page URL will include the corresponding filter parameters (for examplehuxing=yishiyiting)。The amazing thing isarchiveListThe tag, it can intelligently recognize and automatically apply these parameters in the URL to adjust the display content of the document list.

You do not need to inarchiveListManually parse URL parameters in the tag. Just make surearchiveListoftypeparameter settingspage（Indicates enabling pagination feature, usually combined with filtering and searching），it will automatically be linked witharchiveFiltersThe generated links are perfectly linked.

For example, the code to display a list 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>

When the user clicks the filter link for “One Bedroom One Living Room”,archiveListit will automatically filter according to the parameters in the URL.huxing=yishiyitingOnly listings with the户型 of “One Bedroom One Living Room” will be displayed. At the same time,paginationThe pagination links generated by the tag will also automatically include these filtering parameters, ensuring that the filtering conditions remain 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.archiveListTagsqThe parameter is designed for this. When both the URL and the custom filtering parameter existq=关键词and the custom filtering parameter exist,archiveListWill intelligently combine the two, providing more accurate search results.

The importance of pseudo-static rules

In order to make these dynamically generated filter URLs more aesthetic and SEO-friendly, it is crucial to configure appropriate pseudo-static rules. Anqi CMS provides flexible pseudo-static configuration options, allowing you to set the URL structure as needed, for example, to/fangyuan/list.html?huxing=yishiyitingFormatted as/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, the security 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.

Common Questions (FAQ)

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

  2. If I defined a custom field in the content model, butarchiveFiltershow can I display these fields?Firstly, please check the `archiveFilters