As an experienced website operations expert, I know full well the crucial role of user experience (UX) in the success of a website.An intuitive, responsive interface can effectively guide users to discover content, and the content filtering feature is an important part of enhancing user experience.archiveFiltersLabels provide powerful support for building flexible filtering functions, while the internalIsCurrentattributes are the 'magic wand' that lights up the user experience.

Today, let's delve deeper intoarchiveFiltersHow to cleverly use filtering tagsIsCurrentProperties to mark the currently selected filtering conditions, making your website's content filtering function both powerful and user-friendly.

Reveal the core features:archiveFilterswith content filtering

In AnQiCMS,archiveFiltersTags are a very practical tool, allowing us to dynamically generate a list of filtering conditions based on various custom parameters of website content.Imagine that your website has published a large number of products or articles, and users may need to search based on multiple dimensions such as 'color', 'size', 'publish date', or 'product type'.Building these filters manually is not only time-consuming but also difficult to maintain.archiveFiltersIt is born to solve this pain point.

The principle of its operation is: You define various custom fields for the content model (such as "product" or "article") in the background, and may set optional values for these fields.archiveFiltersLabels can intelligently read these configurations and automatically generate filter options available for user selection on the front end.

For example, if you are operating a real estate information website, you can set custom parameters such as 'house type' (such as residential, commercial) and 'layout' (such as one-bedroom, two-bedroom) for the 'house listing' model.archiveFiltersTags can dynamically render corresponding filter options based on these parameters.When the user clicks on an option, it generates the corresponding URL link and loads the content list that meets the conditions.

archiveFiltersThe usage of tags is usually like this:{% archiveFilters filters with moduleId="1" allText="全部" %}...{% endarchiveFilters %}

Here,filtersis an array object that contains all available filter parameter groups. Each parameter group internally contains specific filter options. It is one of these key properties of the filter options thatIsCurrent赋予筛选功能生命。

点睛之笔：IsCurrent属性的魔法

InarchiveFilters标签生成的筛选项中，每个独立的筛选值（val）都带有一个IsCurrentBoolean attribute. This attribute is very intuitive:

  • When a filter condition is selected by the user and is active, its correspondingval.IsCurrentThe value will betrue.
  • On the contrary, if the condition is not selected,val.IsCurrentIt will befalse.

Why is thisIsCurrentattribute so important?

My experience tells me that the most important thing users need when interacting with the interface is clear feedback.When they click a filter condition and there is no visual change, they may feel confused, unsure whether the operation was successful, or what the current filter state is.IsCurrentThe attribute is exactly solving this problem:

  1. Immediate visual feedback:We can utilizeIsCurrentThe attribute, adds a specific CSS class to the current selected filter condition, for exampleactive. Thus, the selected conditions will be highlighted, or the background color, font style, etc. will be changed, so that users can easily identify the current applied filter.
  2. Enhance user experience:A clear selection state can effectively reduce the cognitive burden on users, improving their confidence and satisfaction in website operations.They can easily manage their filtering conditions without getting lost in complex options.
  3. Auxiliary interactive design:When designing the filter area,IsCurrentCan guide us on how to display the filtering state more elegantly. For example, setting the default highlight for the "All" option, or in the multi-select mode, keeping all selected conditions highlighted.

IsCurrentMap the logic state of the background directly to the visual representation on the front end, achieving a seamless connection between technology and user experience.

Practical Exercise: Apply in AnQiCMS templateIsCurrent

UnderstoodIsCurrentThe importance of it, let's take a look at how to actually use it in AnQiCMS templates. Suppose we have a list page of articles, which needs to be based on a custom field "article type"articleType）Filter:

{# 页面加载时，使用 archiveFilters 标签获取筛选器数据 #}
{% archiveFilters filters with moduleId="1" allText="不限" %}
    <div class="filter-group">
        {# 循环遍历每一个筛选参数组，例如“文章类型”、“发布年份”等 #}
        {% for item in filters %}
            <ul class="filter-items">
                <li><span class="filter-name">{{ item.Name }}:</span></li>
                {# 循环遍历当前参数组下的所有可选筛选值 #}
                {% for val in item.Items %}
                    {# 利用 IsCurrent 属性判断当前筛选值是否被选中 #}
                    <li class="filter-option {% if val.IsCurrent %}is-active{% endif %}">
                        {# val.Link 提供了点击此筛选项后跳转的 URL #}
                        <a href="{{ val.Link }}">{{ val.Label }}</a>
                    </li>
                {% endfor %}
            </ul>
        {% endfor %}
    </div>
{% endarchiveFilters %}

{# 在此下方，您可以放置 archiveList 标签来显示根据筛选条件过滤后的文章列表 #}
{# 例如：
{% archiveList archives with moduleId="1" type="page" limit="10" %}
    {% for article in archives %}
        <div class="article-item">
            <h3><a href="{{ article.Link }}">{{ article.Title }}</a></h3>
            <p>{{ article.Description }}</p>
        </div>
    {% endfor %}
    {% pagination pages with show="5" %}
        {# 分页链接，同样会根据当前的筛选条件生成 #}
        {# ... #}
    {% endpagination %}
{% endarchiveList %}
#}

In the above code, when the user clicks the 'Article Type' option under 'News', if 'News' is the currently selected condition, AnQiCMS willval.IsCurrentsettrueAt this point,{% if val.IsCurrent %}Condition is met,is-activethe class will be added to the corresponding<li>label. You just need to define the.filter-option.is-activestyles in CSS, and the "News" option will be highlighted, providing clear visual guidance to the user.

Content Operation Strategy Thinking

IsCurrentThe application of attributes is not only the implementation of front-end technology, but also the embodiment of content operation strategy.

  • Optimize user path:Through clear filtering feedback, users can browse and discover content on your website more smoothly, reducing the bounce rate and extending the stay time.
  • A/B Test Opportunities:We can try differentis-activestyles, and find the design that best attracts user attention and improves click-through rate through A/B testing.
  • Personalized experience:Combine with the flexible content model of AnQiCMS, you can design unique selected states for different types of filters, further enhancing the professionalism and personalization of the website.

AnQiCMSarchiveFiltersTags andIsCurrentThe combination of properties undoubtedly provides a powerful and flexible tool for website operators, helping us build a more intelligent and user-friendly content filtering function.

Common Questions (FAQ)

  1. archiveFiltersWhere does the data source of the label come from? archiveFiltersTags are mainly obtained from the custom parameters of the content model defined in the AnQiCMS backend (such as articles, products) as filtering conditions. When you add custom fields such as 'Color', 'Size', 'Year of release' to the content model, and set optional values for these fields,archiveFiltersIt can automatically render it as a frontend filter.

  2. If the user selects multiple filter conditions at the same time,IsCurrenthow will the property be displayed? IsCurrentThe attribute is for each independent filter item. Whether the user selects one condition or multiple conditions, as long as a specific filter option is selected, its correspondingval.IsCurrentattribute will be set.trueThis means you can easily add visual styles to all currently active filter conditions, allowing users to clearly see all the filters they have applied.

  3. IsCurrentProperty whether affect the generation of filter link?val.LinkThe generation of?)} IsCurrentProperties are used only for marking and controlling the visual state of front-end elements; it is a boolean value indicating whether the element is currently selected. The actual link of the filter condition (val.Link）is dynamically generated by AnQiCMS based on the current URL, the selected other filtering conditions, and the filter settings.IsCurrentIt does not directly participate in the link generation logic. It only determines its own state based on whether the generated link matches the current page URL.