As an experienced website operations expert, I know that user experience (UX) plays a key role in the success of a website.A user-friendly and responsive interface can effectively guide users to discover content, and the content filtering function is an important part of improving user experience.In the AnQiCMS (AnQiCMS) this efficient and customizable content management system,archiveFiltersTags provide strong support for building flexible filtering functions, while its internalIsCurrentproperties are the 'magic wand' that lights up the user experience.

Today, let's delve into it deeplyarchiveFiltersHow to cleverly utilize filtering tagsIsCurrentProperties to mark the currently selected filtering conditions, making your website's content filtering feature both powerful and user-friendly.

The core feature revelation:archiveFiltersWith content filtering

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

The principle of its operation is: you define various custom fields for content models (such as "product" or "article") in the background, and may set optional values for these fields.archiveFiltersThe label can intelligently read these configurations and automatically generate filter options available for users to select on the front-end.

For example, if you are running a real estate information website, you can set custom parameters for the '房源' model such as 'house type' (such as residential, commercial) and 'house type' (such as one-bedroom, two-bedroom) and so on.archiveFiltersTags can dynamically render corresponding filter options based on these parameters.When the user clicks on an option, it will generate the corresponding URL link and load 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 the parameter groups available for filtering. Each parameter group also contains specific filtering options. It is one of these key properties of the filtering options thatIsCurrentGave life to the filtering function.

The touch of genius:IsCurrentThe magic of properties

InarchiveFiltersEach independent filtering value generated by the tag:val) has aIsCurrentBoolean attribute. This attribute is very intuitive:

  • When a filter condition is selected by the user and activated, its correspondingval.IsCurrentthe value will betrue.
  • On the contrary, if the condition is not selected,val.IsCurrentthenfalse.

Why thisIsCurrentThe attribute is so important?

My experience tells me that what users need most when interacting with the interface is clear feedback.When they click a filter option 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 precisely solves this problem:

  1. Immediate visual feedback:We can make use ofIsCurrentThe attribute adds a specific CSS class for the currently selected filter condition, for exampleactive. The selected condition will be highlighted, or the background color, font style, etc. will be changed, so that the user can identify the current filter of the application at a glance.
  2. Improve user experience:A clear selected state can effectively reduce the user's cognitive burden and improve their confidence and satisfaction with website operations.They can easily manage their own filtering conditions without getting lost in complex options.
  3. Auxiliary interaction design:When designing the filter area,IsCurrentCan guide us on how to display the filter status more elegantly. For example, set the default highlight for the 'All' option, or in the multi-select mode, keep all selected conditions highlighted.

IsCurrentDirectly map the logical state of the backend to the frontend visual representation, achieving seamless connection between technology and user experience.

Practical exercise: Applying in AnQiCMS templateIsCurrent

UnderstoodIsCurrentThe importance, let's see how to actually use it in the AnQiCMS template. Suppose we have a list page of articles, which needs to be based on the custom field "article type" (articleTypeFiltering out:

{# 页面加载时，使用 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 on the 'Article Type' option under 'News', if 'News' is the current selected condition, AnQiCMS willval.IsCurrentis set totrue. At this point,{% if val.IsCurrent %}The condition is met,is-activethe class will be added to the corresponding<li>tag. You just need to define the style in CSS.filter-option.is-activeto highlight the "News" option, providing clear visual guidance to the user.

Content strategy for content operation

IsCurrentThe application of properties is not only the realization 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 more smoothly on your website, reducing bounce rates and extending stay time.
  • A/B testing opportunity:We can try differentis-activestyles, find the design that best attracts user attention and improves click-through rate through A/B testing.
  • Personalized experience:Combine AnQiCMS's flexible content model, you can design unique selected states for different types of filters, further enhancing the professionalism and personalization of the website.

AnQiCMS'archiveFilterswith the tag 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.

Frequently Asked Questions (FAQ)

  1. archiveFiltersWhere does the data source of the label come from? archiveFiltersThe label is mainly obtained from the custom parameters of the content model defined in the AnQiCMS backend (such as articles, products) as a filtering condition. When you add custom fields such as 'color', 'size', 'publish year' 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 behave? IsCurrentThe property is for each independent filter condition item. Whether the user selects one condition or multiple conditions, as long as a specific filter option is selected, the correspondingval.IsCurrentproperty will be set totrueThis means you can easily add visual styles to all current active filters, allowing users to clearly see all the filters they have applied.

  3. IsCurrentDoes the attribute affect the filtering link (val.Link) generation? IsCurrentThe property is used only to mark and control the visual state of front-end elements, it is a boolean value indicating whether it is currently selected. The actual link of the filter condition (val.Link) is dynamically generated by AnQiCMS based on the current URL, the other selected filter conditions, and the configuration of the filter.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.