How to highlight the currently selected filter option generated by `archiveFilters`?

In modern website operations, user experience (UX) is undoubtedly one of the core competitive advantages.When a user is faced with a vast amount of content and needs to quickly locate the required information through filtering, a clear and intuitive filtering mechanism is crucial.AnQiCMS (AnQiCMS) deeply understands this, providing a powerful content model and flexible template tags, among whicharchiveFiltersLabels are the magic tools for building advanced filtering functions. However, simply providing filtering options is not enough. How can users easily identify what conditions they have selected at a glance?This is what we need to delve into deeply today - inarchiveFiltersHighlight the currently selected filter option in the generated filter conditions.

As an experienced website operations expert, I know that every detail can affect the user's conversion rate and retention.Make the filter conditions 'alive', providing clear visual feedback is a key step to improving user experience.

Understand the filtering function in AnQiCMS.

AnQi CMS relies on its efficient architecture based on the Go language and rich template tags, providing a solid foundation for building complex website functions for content operators. In terms of content display, especially for list pages that require multi-dimensional filtering, archiveFiltersLabels play a core role. They allow us to dynamically generate a series of filtering conditions available for users to choose from, such as product brands, price ranges, or the publication year and author of articles.

These filter conditions are usually presented in a list form, and the content list will be reloaded after each condition is clicked.But if the user is not clear about which conditions have taken effect, they may feel confused and even repeat their selections, thereby affecting browsing efficiency.Therefore, providing visual highlight feedback for the currently selected filter option is crucial for enhancing usability and user satisfaction.

In-depth analysisarchiveFiltersdata structure

To implement the highlighting of filtering conditions, we first need to understandarchiveFiltersthe data structure of label output. When we use{% archiveFilters filters with moduleId="1" allText="全部" %}such a label call, it will return an array object namedfilters.

ThisfiltersEach element in the array represents a filter dimension, such as "color", "size", or "price". Each dimension object typically containsName(Parameter name, such as "color") andFieldName(Corresponding parameter field name, such as "color").

It is more important that, within each filtering dimension, there are also multiple specific options stored initem.Itemsthis sub-array. For example, under the 'Color' dimension,item.ItemsOptions may include "red", "blue",

Each specific filter option (i.e.,item.Itemsofvalobject) has several key properties:

• LabelThis is the filter text that the user sees on the page, like 'Red'.
• LinkThis is the URL to which the page will jump after clicking the filter option, which includes the corresponding filter parameters.
• IsCurrent:This is the key to our highlighting implementation! IsCurrentIt is a boolean value, and its value is only true when the filter option is the selected condition on the current page.true.

Highlighting intelligent filtering conditions

HavingIsCurrentan understanding of properties, highlighting becomes effortless. We just need to traversearchiveFiltersFilter options are generated by a simple conditional judgment, to addIsCurrentWithtruea specific CSS class to an item, such asactive.

Let's look at a specific code example, which is usually placed in your list page template (for examplearticle/list.htmlorproduct/list.html) in:

{# 筛选条件区域 #}
<div class="filter-area">
    <div class="filter-title">参数筛选：</div>
    {% archiveFilters filterGroups with moduleId="1" allText="全部" %}
        {% for group in filterGroups %}
        <div class="filter-group">
            <span class="group-name">{{group.Name}}:</span>
            <ul class="filter-options">
                {% for option in group.Items %}
                <li class="filter-item {% if option.IsCurrent %}active{% endif %}">
                    <a href="{{option.Link}}" class="option-link">{{option.Label}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

{# 假设这是您的内容列表部分，此处省略具体代码 #}
<div class="content-list">
    <!-- 这里是使用 archiveList 标签或其他方式展示的内容列表 -->
    <!-- ... -->
</div>

In this code, we first go througharchiveFiltersThe tag obtained the filter condition set and named itfilterGroups. Then, we use nestedforLoop to traverse each筛选dimension (group) and its included filter options (option)

The key is this line of code:<li class="filter-item {% if option.IsCurrent %}active{% endif %}">. It will check the currentoptionofIsCurrentProperty. If it istrueit will automatically be<li>add an element toactiveClass.

Finally, you just need to define in the website's CSS file.activeThe style of the class to distinguish visually from the unchecked items. For example:

/* style.css */

.filter-options {
    list-style: none; /* 移除默认列表样式 */
    padding: 0;
    margin: 0;
    display: flex; /* 让筛选项横向排列 */
    flex-wrap: wrap;
}

.filter-item {
    margin-right: 10px;
    margin-bottom: 5px;
}

.option-link {
    display: block;
    padding: 5px 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.filter-item.active .option-link {
    background-color: #007bff; /* 选中项的背景色 */
    color: #fff; /* 选中项的文字颜色 */
    border-color: #007bff;
    font-weight: bold; /* 选中项的字体加粗 */
}

.option-link:hover {
    background-color: #f0f0f0;
}

.filter-item.active .option-link:hover {
    background-color: #0056b3; /* 选中项的hover效果 */
    border-color: #0056b3;
}

By following these steps, when the user selects 'Red', after the page is reloaded, the 'Red' filter option will have a prominent blue background and white text, clearly indicating the current filter status.

Optimize user experience and注意事项

Highlight the filter conditions, not just for aesthetic improvements, but for a huge enhancement in user experience.It can effectively reduce the cognitive burden of users, avoid repeated choices, and give them a clear understanding of the current content scope.

In practice, we still need to pay attention to some details. For example,allTextThe "All" option defined by the parameters, usually when no specific filter options are selected,IsCurrentThe property will betrueTherefore, it can also participate well in highlighting.

When designing highlight styles, in addition to color changes, consider adding borders, bold fonts, and other visual elements to ensure that different user groups (including those with visual impairments) can clearly identify the selected state. At the same time, keep the click area of the filter link large enough and provide appropriate:hoverEffect, it can further enhance the interactive experience.

Of Security CMSarchiveFilterswith the tag andIsCurrentThe combination of properties provides a direct and efficient way to build insightful and user-friendly content filtering interfaces, greatly simplifying the workload of template development, allowing us to focus more on content presentation and the formulation of operational strategies.

Frequently Asked Questions (FAQ)

Q1:archiveFiltersCan the tag be used on any page?

A1:archiveFiltersThe tag is mainly designed for content list pages or category pages, such as article lists, product lists, etc. It will be based on the context of the current page (such as model ID, category ID) or throughmoduleIdConditions explicitly specified by parameters are used to generate filtering options. When used on a general page that does not contain content list logic, it may not generate filtering conditions correctly due to a lack of context.

Q2: If I don't want to display the 'All' option of a filter group, what should I do?

A2:archiveFiltersTags provide aallTextParameter, the default value is “All”. If you do not want the “All” option to be displayed for a certain filter group, you can set it toallText=false. For example:{% archiveFilters filterGroups with moduleId="1" allText=false %}. This will not generate a link for the 'All' option in the filter group.

**Q3:IsCurrentDoes the property support high