In modern website operations, user experience (UX) is undoubtedly one of the core competencies.When users need to quickly locate the required information through filtering among massive content, a clear and intuitive filtering mechanism is crucial.archiveFiltersTags are the magic tools to build advanced filtering functions.However, merely providing filtering options is not enough. How can users immediately identify what conditions they have currently selected?archiveFiltersThe generated filter conditions highlight the currently selected filter options.

As an experienced website operations expert, I know that every detail can affect the conversion rate and retention of users.To make the filter condition 'alive', providing clear visual feedback is a key step in improving user experience.

Understand the filtering function in AnQiCMS.

English CMS, with its efficient architecture based on the Go language and rich template tags, provides a solid foundation for content operators to build complex website functions. In terms of content display, especially for list pages that require multi-dimensional filtering,archiveFiltersThe label plays a core role.It allows us to dynamically generate a series of filtering conditions available for user selection based on the custom parameters of the content model, such as the brand of products, price range, or the publication year, author, etc. of articles.

These filtering conditions are usually presented in a list form, and clicking on each condition will reload the content list.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 highlighting feedback for the currently selected filter option is crucial for enhancing usability and user satisfaction.

Deep AnalysisarchiveFiltersData Structure

To highlight the filtering conditions, we first need to understandarchiveFiltersData Structure of Tag Output. When we use{% archiveFilters filters with moduleId="1" allText="全部" %}Such a label call will return an object namedfilters.

ThisfiltersEach element in the array represents a filtering dimension, such as “Color”, “Size”, or “Price”. Each dimension object usually containsName(Parameter name, such as "color") andFieldName(The corresponding parameter field name, such as "color").

It is more important that, within each filtering dimension, there are multiple specific filter options, which are stored initem.Itemsthis sub-array. For example, under the 'Color' dimension,item.ItemsMay include options such as "red

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

  • Label：This is the filter text that the user sees on the page, such as 'Red'.
  • Link：This is the URL that the page will jump to after clicking the filter option, which includes the corresponding filter parameters.
  • IsCurrent:This is the key to implementing highlight display! IsCurrentIt is a boolean value, and its value is true only when the filter option is the selected condition on the current page.true.

Implement intelligent highlighting of filtering conditions

WithIsCurrentthe understanding of properties, highlighting becomes effortless. We just need to traversearchiveFiltersGenerated filter options by a simple condition judgment, forIsCurrentresponse fortruean item, add a specific CSS class, 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).

{# 筛选条件区域 #}
<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 firstarchiveFiltersThe tag has retrieved the set of filtering conditions and named itfilterGroups。then, we use nestedforloop to traverse each filtered 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 checks the currentoptionofIsCurrentProperty. If set totruevalue":"It will be set automatically for<li>Add a newactiveclass.

Finally, you just need to define it in the website's CSS file.activeThe style of the class, making it visually distinct from the unselected 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;
}

Through the above steps, when the user selects "Red

Optimize User Experience and Precautions

Highlighting for filtering conditions not only improves the appearance but also greatly enhances the user experience.It can effectively reduce the cognitive burden of users, avoid repeated selection, and give them a clear understanding of the current content range.

In practice, we also need to pay attention to some details. For example,allTextThe "All" option in parameter definition is usually selected when no specific filter options are selected.IsCurrentProperty will betrueTherefore, it can also participate in highlighting very well.

In designing highlight styles, in addition to color changes, you can also consider adding elements such as borders, bold fonts, etc., 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 improve the interactive experience.

Anqi CMS'sarchiveFiltersTags andIsCurrentThe combination of properties, providing a direct and efficient way for us to build insightful and user-friendly content filtering interfaces, greatly simplifies the workload of template development, allowing us to focus more on content presentation and the formulation of operational strategies.

Common Questions (FAQ)

Q1:archiveFiltersIs the label usable on any page?

A1:archiveFiltersThe label 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 the information you provide throughmoduleIdThe parameters explicitly specified to generate filter options. May not generate filter conditions correctly on ordinary pages not containing content list logic due to lack of context.

Q2: How do I operate if I do not want to display the 'All' option of a filter group?

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

**Q3:IsCurrentDoes the attribute support high?