How to use CSS/JavaScript to beautify the `archiveFilters` tag generated filter interface to enhance user experience?

As an experienced website operations expert, I know that user experience is crucial for the success of a website, especially in complex filtering functions. AnQiCMS (AnQiCMS) providesarchiveFiltersLabels, provide great convenience for us to quickly build document parameter filtering interface.However, relying solely on default styles often fails to meet the high requirements of modern websites for aesthetics and interactivity.

Today, let's delve into how to apply CSS and JavaScript, toarchiveFiltersbeautifully design the generated filter interface, thereby significantly enhancing the user experience.

Get to knowarchiveFiltersThe default structure

Before starting to beautify, we first need to understandarchiveFiltersHow labels are used in templates and what HTML structure they will generate. According to the AnQiCMS template tag documentation,archiveFiltersUsed to build filtering conditions based on document parameters. Typical usage is as follows:

{# 示例模板代码 #}
<div>
    <div>参数筛选：</div>
    {% archiveFilters filters with moduleId="1" allText="默认" %}
        {% for item in filters %}
        <ul>
            <li>{{item.Name}}: </li> {# 筛选组名称，例如“房屋类型”、“房间大小” #}
            {% for val in item.Items %}
            <li class="{% if val.IsCurrent %}active{% endif %}"><a href="{{val.Link}}">{{val.Label}}</a></li> {# 筛选选项 #}
            {% endfor %}
        </ul>
    {% endfor %}
</div>

After this template code is rendered, it will roughly generate an HTML structure like this:

<div class="filter-wrapper">
    <div class="filter-title">参数筛选：</div>
    <!-- 第一个筛选组，例如“房屋类型” -->
    <ul class="filter-group">
        <li class="filter-group-name">房屋类型: </li>
        <li class="filter-option active"><a href="/path/to/filter?type=apartment">公寓</a></li>
        <li class="filter-option"><a href="/path/to/filter?type=villa">别墅</a></li>
    </ul>
    <!-- 第二个筛选组，例如“房间大小” -->
    <ul class="filter-group">
        <li class="filter-group-name">房间大小: </li>
        <li class="filter-option"><a href="/path/to/filter?size=one">一居室</a></li>
        <li class="filter-option active"><a href="/path/to/filter?size=two">两居室</a></li>
    </ul>
    <!-- ... 更多筛选组 ... -->
</div>

Note that a key point is: each filter group ({{item.Name}}and its options) are wrapped in a separate<ul>tag. At the same time, the currently selected filter option will have aactiveClasses. Understanding this structure is the foundation for precise CSS styling and JavaScript interaction.

Use CSS for interface beautification.

CSS is the most direct means to improve the appearance of the filtering interface.We can make the filter interface professional, easy to read, and consistent with the brand style through a series of style rules.

1. Overall layout and responsive design:To ensure that the filter group displays well on different screen sizes, we can use Flexbox or Grid layout.On the desktop, the filter group can be horizontally aligned; on the mobile end, it can be stacked.

   padding: 15px;
   background-color: #f8f8f8;
   border-radius: 8px;
   margin-bottom: 20px;
   

   }

   .filter-title {

   font-size: 18px;
   font-weight: bold;
   color: #333;
   margin-bottom: 15px;
   

   }

   .filter-group {

   display: flex; /* 让筛选组内的元素水平排列 */
   flex-wrap: wrap; /* 允许选项换行 */
   align-items: center;
   margin-bottom: 10px;
   border-bottom: 1px dashed #eee; /* 区分不同筛选组 */
   padding-bottom: 10px;
   

   } .filter-group:last-of-type {

   border-bottom: none; /* 最后一个筛选组不需要底部边框 */
   margin-bottom: 0;
   padding-bottom: 0;
   

   }

   .filter-group-name {

   font-weight: bold;
   color: #666;
   margin-right: 15px;
   white-space: nowrap; /* 防止名称换行 */
   

   }

   .filter-option {

   list-style: none; /* 移除默认列表点 */
   margin-right: 10px;
   margin-bottom: 8px; /* 确保在多行显示时有间距 */
   

   }

   .filter-option a {

   display: block;
   padding: 5px 12px;
   border: 1px solid #ccc;
   border-radius: 20px;
   color: #555;
   text-decoration: none;
   transition: all 0.2s ease-in-out; /* 平滑过渡效果 */
   font-size: 14px;
   

   }

   .filter-option a:hover {

   border-color: #007bff;
   color: #007bff;
   background-color: #e9f7ff;
   

   }

   /* Selected state style */ .filter-option.active a {

   background-color: #007bff;
   color: #fff;
   border-color: #007bff;
   font-weight: bold;
   

   }

   /* Responsive adjustment */ @media (max-width: 768px) {

   .filter-group {
       flex-direction: column; /* 移动端筛选组堆叠 */
       align-items: flex-start;
   }
   .filter-group-name {
       margin-bottom: