AnQi CMS is an efficient and customizable enterprise-level content management system, playing a crucial role in the field of content operation.It not only provides powerful content publishing and management capabilities, but also assigns high levels of customization and interactivity to the website through a series of flexible template tags.Today, let's delve into one of the very practical tags-archiveFiltersHow it helps users to accurately locate in massive content, thereby significantly improving the user experience and content discovery efficiency of the website.

I.archiveFiltersTags: The Foundation of Intelligent Filtering

Imagine if your website had a rich variety of content, whether it be various products on e-commerce platforms or a vast amount of real estate listings on property websites. How would users quickly find the specific content they are interested in? At this point,archiveFiltersThe tag comes in handy.

archiveFiltersThe tag is used specifically in AnQi CMS to generate filtering conditions based on document parameters.In simple terms, it will automatically generate a set of filter options for the front end display based on the filterable fields you customize in the background for content models (such as 'article model' or 'product model').When the user clicks on these options on the website front-end, the system can combine according to the selected conditions,archiveListTags andpaginationLabel, dynamically loads and displays a list of content that meets the conditions, and provides the corresponding pagination function.

This tag's advantage lies in the fact that it abstracts complex filtering logic, allowing template developers to implement powerful content filtering functions in a very concise way on the front end, greatly enhancing the ease of use of the website. However, it is worth noting that,archiveFiltersTags are not万能，they are usually only suitable for document home pages or document classification pages，and need to be used with document pagination lists（archiveListcooperatetype="page"）to fully play their role.

Second,filtersThe structure of variables revealed: a deep analysis at the data level

UnderstandarchiveFiltersAfter the role of tags, what we need to do next is to uncover what it returnsfiltersThe mysterious veil of variables. ThisfiltersThe variable carries all the available filter condition data, understanding its structure is the key to successfully presenting the filter on the front end.

When you use it in the template{% archiveFilters filters with ... %}this syntax,filtersVariables will be injected into the template context. From the perspective of data structures,filtersA variable is aarray objectThis means it includes multiple independent filtering dimensions, such as "house type", "price range", "product color", etc. In the template, we need to pass throughforCirculate to iterate these dimensions one by one.

Each one iterateditem(Representing a dimension) contains the following core properties:

  1. NameThis is the human-readable name of the filter dimension, which is what the user will see on the interface.For example, on a real estate website, it could be 'house type', and on an e-commerce website, it could be 'brand'.
  2. FieldNameThis property corresponds to the actual database field name used for filtering in the backend content model. For example, ifNameIs a 'House Type', thenFieldNameIt could behouse_type. This is the internal identifier that the system relies on when executing the filtering query.
  3. ItemsThis is a very critical attribute, which is also anested array object.ItemsThe array contains all the selectable values under the current filtering dimension. For example, ifNameIs a 'House Type', thenItemsIt may include options such as 'residential', 'apartment', 'villa', etc.

To delve further, we need to understandItemsEach element in the arrayval(representing an optional filter value) the properties included:

  1. LabelThis is the display text of the filtered value, which is the specific option displayed on the user interface. For example, 'Residential', 'Apartment'.
  2. LinkThis is the complete URL associated with the current filter value. When the user clicks on this link, the page will jump to the result page containing the filter condition. ThisLinkIt is automatically generated by Anqi CMS, which already includes the correct query parameters, which is crucial for implementing the filtering function.
  3. IsCurrent: This is a boolean value (trueorfalse), to indicate whether the current filter value is selected. This property is extremely useful in front-end development, as you can dynamically add CSS styles to the filter options based on its state (such asactiveClass), thus clearly displaying the user's current selection and enhancing visual feedback.

How to elegantly traverse and present filtered data in a template.

MasteredfiltersAfter the structure of the variable, it becomes a piece of cake to implement filtering functionality in the template. Below, we will demonstrate how to elegantly traverse and present these filtered data through specific code examples.

First, we need to usearchiveFilterstags to retrievefiltersVariable, and perform the outer loop to display each filtering dimension:

{# 假设我们正在文章分类页面，并希望筛选文章模型 (moduleId=1) 的参数 #}
<div class="filter-area">
    <div class="filter-title">内容筛选</div>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
        <div class="filter-group">
            <span class="filter-name">{{ item.Name }}:</span>
            <ul class="filter-options">
                {# 内层循环：遍历当前筛选维度下的所有可选值 #}
                {% for val in item.Items %}
                <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{ val.Link }}">{{ val.Label }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

In this code block:

  1. {% archiveFilters filters with moduleId="1" allText="不限" %}: We go througharchiveFiltersThe label assigns the filtered data returned tofiltersVariable.moduleId="1"Specify the article model with ID 1 that we want to filterallText="不限"An option representing 'All' was added for each filtering dimension, and its text is displayed as 'No limit'.
  2. {% for item in filters %}: This outer loop iterates overfiltersarray, each loopitemRepresents an independent filtering dimension (such as “Source of article”, “Author”, etc.). We have displayed it here.item.NameAs the title of the filtering dimension.
  3. {% for val in item.Items %}: The inner loop traverses the currentitemofItemsarray,valRepresents a specific filtering value under the dimension (such as "Official release","User submission").
  4. <li class="filter-option {% if val.IsCurrent %}active{% endif %}">Here we utilizeval.IsCurrentBoolean values are dynamically addedactiveclass. If the current option is selected,IsCurrentWithtrue,activeThe class will be added, making it easy to highlight with CSS styles.
  5. <a href="{{ val.Link }}">{{ val.Label }}</a>This creates a clickable filter link.val.LinkContains all necessary query parameters, clicking will refresh the page and display the filtered content.val.LabelIs the text visible to the user for filter options.

In this way, you can build a hierarchical and interactive filter interface. Users simply click on the corresponding filter options to seamlessly view content that meets specific conditions.

Four,archiveFiltersParameters and optimization suggestions of the tag

To use more flexiblyarchiveFiltersUnderstanding the supported parameters of the tag is essential:

  • moduleIdThis parameter is used to specify the filter parameters of the content model you want to obtain. For example,moduleId="1"indicating the filter conditions for the article model,moduleId="2"May represent a product model. Properly setting this parameter is crucial to ensure that the filter matches your content model.
  • allTextThis parameter controls the display text of the "All" option in each filtering dimension. If you set it toallText="不限"Then each filtering dimension will have an 'Unlimited' option. If you do not want to display this 'All' option, you can set it toallText=false.
  • siteIdIn a multi-site management scenario, if you want to call data from other sites, you cansiteIdspecify the target site ID with the parameter. In single-site mode, it is usually not necessary to fill in.

Operation and front-end optimization suggestions:

  1. Reasonable configuration of filtering dimensions:When configuring custom fields in the background content model, you should carefully consider which fields are suitable as filtering criteria.Too many filtering dimensions may confuse users, and too few may not meet users' precise needs.It is recommended to start with the core attributes that users are most concerned about.
  2. Intuitive UI/UX design: The layout of the filter should be clear and easy to understand, even for new users.Consider using collapse panels, dropdown menus, or radio buttons in forms, and ensure good responsive performance on mobile devices.IsCurrentProperties can help you easily highlight the selected state.
  3. SEO-friendliness: The pseudo-static feature of AnQi CMS is crucial for SEO.archiveFiltersGeneratedLinkGenerally contains query parameters. Ensure that your pseudo-static rules can handle these query parameters, and for filtered result pages that need to be indexed by search engines, ensure that the URL structure is friendly and readable.If some filtered result pages are not to be indexed, you can userel="nofollow"ormeta noindexTag control.
  4. Enhanced interaction with JavaScript.: AlthougharchiveFiltersThe tag directly generates a static filter option with links, but in modern websites, you can enhance the user experience through JavaScript.For example, it can implement features such as refresh-free filtering, multi-select combination filtering, filter condition clearing, and preview of filtering results, making the filtering process more smooth and efficient.

Conclusion

Of Security CMSarchiveFiltersTags are a rare tool in content operations, skillfully integrating content classification, custom attributes, and user experience. By deeply understandingfiltersThe structure of variables and flexible use of its parameters, you can build a powerful and intelligent content filtering system for your website, which not only helps users quickly find the information they need but also significantly improves the overall functionality, usability, and content value of the website.Hope this article can inspire and help you in your content operation practice on AnQi CMS!

Frequently Asked Questions (FAQ)

1. Ask:archiveFiltersDoes the tag return data support multi-level filtering? For example, do I want to select 'House Type' first, and then select 'House Type' again to choose 'House Style'?

Answer: archiveFiltersThe tag returns directly.filtersThe variable structure is relatively flat, eachitemRepresents an independent filtering dimension (such as “house type” or “layout”), which by default has no direct parent-child联动 relationship.If you need to implement a multi-level联动 filtering effect, you usually need to combine backend custom logic when generating filters to pre-process the dependencies, or write logic in front-end JavaScript to listen for the selection changes of the first filter, then dynamically update or filter the available options of the second filter.The Anqi CMS provides enough flexibility for you to implement such advanced interactions through custom code.

2. Q:filtersinLinkWhat kind of URL is generated by the attribute? How can we ensure SEO-friendliness?

Answer: filtersinLinkThe URL generated by the attribute usually includes query parameters, such as `yourdomain.com`