An enterprise-level content management system, AnQi CMS, plays a crucial role in the field of content operation with its high efficiency and customization capabilities.It not only provides powerful content publishing and management capabilities, but also endows the website with a high degree of customization and interactivity through a series of flexible template tags.archiveFiltersHow does it help users accurately locate in massive amounts of content, thereby significantly improving the website's user experience and content discovery efficiency.

I.archiveFiltersTags: the cornerstone of building intelligent filtering

Imagine if your website's content is rich and diverse, whether it's various products on an e-commerce platform or a large number of housing listings on a real estate website, how can users quickly find the specific content they are interested in? At this point,archiveFiltersThe label comes in handy.

archiveFiltersLabels are specifically used in the 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 the content model (such as "article model" or "product model").archiveListTags andpaginationThe label dynamically loads and displays a list of content that meets the conditions and provides corresponding pagination functions.

The advantage of this tag is 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,archiveFiltersLabels are not万能，they are usually only applicable to the home page or document classification page of documents，and need to be used with the document pagination list（archiveListwithtype="page"）to fully realize their function.

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

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

When you use a template{% archiveFilters filters with ... %}这样的语法时，filtersThe variable will be injected into the template context. From the perspective of data structure,filtersA variable is aArray objectThis means it includes multiple independent filtering dimensions, such as “House Type”, “Price Range”, “Product Color”, and so on. In the template, we need to pass throughforLoop through these filtered dimensions one by one.

Each one that is traverseditem(representing a filtered dimension) includes the following core attributes:

  1. NameThis is the human-readable name of the filtering dimension, which is the label that users will see on the interface.like in real estate websites, it could be "property type", in e-commerce websites, it could be "brand".
  2. FieldNameThis property corresponds to the actual database field name used for filtering in the backend content model. For example, ifNameit is 'House Type', thenFieldNamemay behouse_typeThis is the internal identifier used by the system when executing a filtering query.
  3. ItemsThis is a very critical attribute, which is itself anothernested array object.ItemsThe array contains all the selectable values under the current filtered dimension. For example, ifNameit is 'House Type', thenItemsit may include options such as 'Residential', 'Apartment', 'Villa', etc.

To further delve into it, we also need to understandItemseach element in the arrayval(representing an optional filter value) contains the following attributes:

  1. LabelThis is the display text of the filtered value, which is the specific option seen by the user on the 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 results page containing the filter condition.LinkThis is automatically generated by AnQi CMS, which already includes the correct query parameters, crucial for implementing the filtering function.
  3. IsCurrent: It is a boolean value (trueorfalse），Used to indicate whether the current filter value has been selected. This property is extremely useful in front-end development, as you can dynamically add CSS styles to filter options based on its state (such asactiveClass), thus clearly displaying the user's current selection to enhance visual feedback.

How to elegantly iterate over and present filtered data in templates

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

Firstly, we need to usearchiveFiltersTag to gainfiltersVariable, and perform the outer loop to display each filtered 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 through:archiveFiltersThe label assigns the filtered data returned to:filtersa variable.moduleId="1"We specified that we want to filter the article model with ID 1,allText="不限"Then an option representing 'All' is added for each filtering dimension, with the text displayed as 'Unlimited'.
  2. {% for item in filters %}This outer loop traverses:filtersArray, each time throughitemrepresents an independent filtering dimension (such as "article source", "author", etc.). We display it here.item.Nameas the title of the filtering dimension.
  3. {% for val in item.Items %}: the inner loop traverses the currentitemofItemsArray,valrepresented a specific filtering value under this dimension (such as "official release", "user submitted").
  4. <li class="filter-option {% if val.IsCurrent %}active{% endif %}">：here utilizesval.IsCurrent布尔值 dynamically addsactiveclasses. If the current option is selected,IsCurrentresponse fortrue,activeThis class will be added for easy highlighting with CSS styles.
  5. <a href="{{ val.Link }}">{{ val.Label }}</a>This creates a clickable filter link.val.LinkContains all necessary query parameters, clicking it will refresh the page and display the filtered content.val.LabelIt is the text of the filter options visible to the user.

By this means, you can build a clear and interactive filtering interface. Users can simply click on the corresponding filtering options to seamlessly view content that meets specific conditions.

四、archiveFilters标签的参数与优化建议

为了更灵活地运用archiveFilters标签，了解其支持的参数是必不可少的：

  • moduleIdThis parameter is used to specify the filter parameters of the content model you want to obtain. For example,moduleId="1"represents the filter conditions for the article model,moduleId="2"This may represent the product model. Correctly setting this parameter is the key to ensuring 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 the multi-site management scenario, if you want to call data from other sites, you can do so bysiteIdspecifying 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 dimensionsWhen configuring custom fields in the background content model, carefully consider which fields are suitable as filter conditions.Too many filtering dimensions may confuse users, and too few may not meet the users' precise needs.Suggest starting with the core attributes that users are most concerned about.
  2. Intuitive UI/UX designThe layout of the filter should be clear and understandable, 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：English CMS's pseudo-static feature is crucial for SEO.archiveFiltersgeneratedLinkIt usually includes query parameters.Make sure that your rewrite rules can handle these query parameters, and for the filtered result pages that need to be indexed by search engines, ensure that the URL structure is friendly and readable.rel="nofollow"ormeta noindexTags are used for control.
  4. Combined with JavaScript to enhance interactionAlthougharchiveFiltersLabels directly generate static filtering options with links, but in modern websites, you can further enhance the user experience with JavaScript.For example, it can realize functions 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.

Concluding remarks

Anqi CMS'sarchiveFiltersLabels are a rare tool in content operation, which cleverly integrates content classification, custom attributes, and user experience. Through in-depth understandingfiltersThe structure of variables and the flexible use of their parameters allow you to build a powerful and intelligent content filtering system for your website, which not only helps users find the information they need quickly but also significantly enhances the overall functionality, usability, and content value of the website.This article hopes to inspire and help you in the content operation practice of AnQi CMS!

Common Questions and Answers (FAQ)

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

Answer: archiveFiltersThe label returns directly.filtersThe variable structure is relatively flat, eachitemRepresents an independent filtering dimension (such as "House Type" or "Layout"), and they do not have a direct parent-child linkage relationship by default.If you need to implement a multi-level联动 filtering effect, you usually need to combine backend custom logic to preprocess the dependencies when generating the filter, or write logic in JavaScript on the frontend to listen for changes in the first filter's selection, and then dynamically update or filter the available values of the second filter.The Auto CMS provides enough flexibility for you to implement such advanced interactions through custom code.

2. Question:filtersinLinkWhat is the URL generated by the attribute? How to ensure SEO-friendliness?

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