如何使用`archiveFilters`标签实现多条件筛选列表的动态显示？

在网站运营中，如何让用户快速找到他们需要的信息，是一个提升用户体验和转化率的关键。当网站内容种类繁多，且每种内容都有多种属性可供选择时，提供一套灵活的多条件筛选功能就显得尤为重要。安企CMS（AnQiCMS）提供了强大的 archiveFilters 标签，能够帮助我们轻松实现内容列表的动态筛选，让你的网站内容动起来。

为什么需要多条件筛选？

想象一下，你正在浏览一个房产网站，你可能不仅想看“住宅”，还想进一步筛选“三室两厅”或者“有停车位”的房源。如果没有多条件筛选，你可能需要不断地点击、返回，甚至大海捞针般地寻找，这无疑会大大降低你的耐心。

多条件筛选的优势在于：

• 提升用户体验： 用户可以根据自己的具体需求，快速缩小搜索范围，精准定位目标内容。
• 增强内容发现： 隐藏在深层的内容通过不同维度的组合筛选，更容易被用户发现。
• 优化SEO表现： 动态生成的筛选结果页通常拥有更具体的URL和内容组合，如果配合伪静态规则，有利于搜索引擎抓取和理解，为网站带来更多长尾流量。

archiveFilters 标签的魅力

在安企CMS中，archiveFilters 标签正是解决这一痛点的利器。它专为文档列表页面设计，能够根据内容模型中定义的自定义字段，自动生成筛选条件，并结合文档列表（archiveList）标签，实现内容的动态显示。

要使用这个标签，你需要先确保你的内容模型中已经定义了可供筛选的自定义字段。例如，如果你有一个“房产”内容模型，可以添加“房屋类型”、“户型”、“特色配置”等字段，并为这些字段设置可供选择的选项（如“住宅”、“公寓”；“一室”、“两室”；“精装修”、“带家具”等）。这些字段就是 archiveFilters 标签能够识别并生成筛选条件的基础。

archiveFilters 标签的基本用法非常直观：

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {# 循环输出筛选条件 #}
{% endarchiveFilters %}

这里，moduleId 参数指定了你想为哪个内容模型的文档生成筛选条件，例如 moduleId="1" 可能代表文章模型，moduleId="2" 可能代表产品模型。allText 参数则允许你自定义“全部”这个选项的显示文字，如果设置为 false 则不显示。

深入理解 filters 变量结构

当你在 archiveFilters 标签块内使用 filters 变量时，它实际上是一个包含多个筛选组的数组对象。每一个筛选组（item）都代表了一个在内容模型中定义的自定义字段，它拥有以下属性：

• Name：这个筛选条件的显示名称，比如“房屋类型”、“户型”。
• FieldName：这个筛选条件对应的自定义字段的内部标识名，例如 house_type。
• Items：这是最重要的部分，它是一个包含具体筛选选项的数组。每个选项（val）又包含：
  • Label：筛选选项的显示名称，如“住宅”、“公寓”。
  • Link：点击这个选项后跳转到的URL，这个URL会包含当前筛选条件和其他已选条件，实现动态更新。
  • IsCurrent：一个布尔值，表示当前选项是否处于选中状态，方便模板中添加高亮样式。

如何在模板中构建动态筛选列表

现在，让我们结合 archiveList 和 pagination 标签，看看如何在模板中完整实现一个多条件筛选的文档列表。

第一步：构建筛选条件区域

在你的列表页模板（例如 article/list.html 或 product/list.html）中，首先使用 archiveFilters 标签生成筛选条件。

<div class="filter-area">
    <h3>筛选条件</h3>
    {% archiveFilters filterGroups with moduleId="1" allText="不限" %}
        {% for item in filterGroups %}
            <div class="filter-group">
                <span class="filter-name">{{ item.Name }}：</span>
                <ul class="filter-options">
                    {% for val in item.Items %}
                        <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                            <a href="{{ val.Link }}">{{ val.Label }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

在上面的代码中，filterGroups 是我们为 archiveFilters 标签定义的变量名。通过两层 for 循环，我们首先遍历了所有的筛选组（如“房屋类型”、“户型”），然后在每个组内遍历其所有的筛选选项（如“住宅”、“公寓”）。val.Link 会自动生成包含筛选参数的URL，val.IsCurrent 则用于为当前选中的筛选选项添加 active 类，提供视觉上的反馈。

第二步：展示动态筛选后的文档列表

接下来，在同一个模板中，你需要使用 archiveList 标签来展示文档列表。关键在于，archiveList 标签在 type="page" 模式下，会智能地读取当前URL中的所有筛选参数（包括 archiveFilters 标签生成的参数），并自动将这些参数应用到文档查询中。

<div class="document-list">
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for doc in archives %}
            <div class="document-item">
                <a href="{{ doc.Link }}">
                    <h4>{{ doc.Title }}</h4>
                    <p>{{ doc.Description|truncatechars:100 }}</p>
                    <span class="views">阅读量：{{ doc.Views }}</span>
                </a>
            </div>
        {% empty %}
            <p>很抱歉，没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

这里，archives 是我们为 archiveList 标签定义的变量名。type="page" 表明这是一个分页列表，limit="10" 则设定了每页显示10条文档。当用户点击筛选条件时，页面URL会发生变化，archiveList 会根据新的URL参数自动重新查询并显示符合条件的文档。

第三步：添加分页功能

为了让用户能浏览所有的筛选结果，还需要结合 pagination 标签。这个标签也会自动适应 archiveFilters 生成的URL，确保分页链接携带正确的筛选参数。

<div class="pagination-area">
    {% pagination pages with show="5" %}
        <ul>
            {% if pages.PrevPage %}
                <li><a href="{{ pages.PrevPage.Link }}">上一页</a></li>
            {% endif %}
            {% for pageItem in pages.Pages %}
                <li {% if pageItem.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
                </li>
            {% endfor %}
            {% if pages.NextPage %}
                <li><a href="{{ pages.NextPage.Link }}">下一页</a></li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

这里，pages 是 pagination 标签定义的变量名。它会生成包含“上一页”、“下一页”以及中间页码的链接，这些链接都会自动带上当前的所有筛选条件，保证用户在不同页面间切换时，筛选状态得以保留。

实际案例：房产列表筛选

在安企CMS的实际应用中，如果你的网站有一个房产列表页面，你可能希望用户可以根据“房屋类型”、“区域”、“价格区间”等条件进行筛选。

”`twig

<h3 class="