利用 AnQiCMS 的 archiveFilters 标签，构建高效实用的动态筛选功能

在内容管理和电子商务领域，用户能够快速、精准地找到所需信息是提升网站体验和转化率的关键。想象一下，当用户在您的网站上浏览产品或文档时，如果能够根据颜色、尺寸、品牌，甚至是更具体的参数，如处理器类型、内存大小等多种条件，快速筛选出他们想要的内容，这将极大提升他们的使用体验。AnQiCMS 提供的 archiveFilters 标签正是为此而生，它允许您轻松构建功能强大、灵活多变的动态筛选界面。

动态筛选的价值：为何不可或缺？

传统的列表展示方式，通常只能按时间、热门程度或分类进行排序。然而，对于拥有大量内容或多种参数属性（例如产品、服务介绍、技术文档等）的网站，这种方式显然不足以满足用户的精细化查找需求。

动态筛选功能的核心在于，它将内容的各种属性转化为可交互的筛选条件。用户可以自由选择一个或多个条件，网站随即实时更新，只显示符合条件的文档。这不仅极大地提高了内容的可发现性，减少了用户的搜索成本，也为网站运营者提供了数据洞察，了解用户偏好，从而优化内容策略和产品展示。对于电商网站而言，这更是提升用户满意度和促进销售的利器。

奠定基础：内容模型与自定义字段

在深入了解 archiveFilters 标签之前，我们需要明白动态筛选的源头。AnQiCMS 强大之处在于其“灵活的内容模型”功能。所有可供筛选的参数，都必须在后台的“内容管理”模块下的“内容模型”中预先定义为“自定义字段”。

例如，如果您要为产品构建筛选功能，您可能需要创建一个名为“产品模型”的内容模型（AnQiCMS 默认已提供），然后在该模型下添加自定义字段，如：

  • 字段名称： 颜色，调用字段： color，字段类型： 单项选择（例如：红色、蓝色、黑色）
  • 字段名称： 尺寸，调用字段： size，字段类型： 单项选择（例如：S、M、L、XL）
  • 字段名称： 处理器，调用字段： processor，字段类型： 下拉选择（例如：Intel i7、AMD Ryzen 7）

这些自定义字段将成为您前台动态筛选的依据。确保您发布的产品或文档，都已根据这些字段填写了相应的值。

archiveFilters 标签的核心作用：构建筛选条件

在 AnQiCMS 的模板体系中，archiveFilters 标签扮演着生成动态筛选条件的“导演”角色。它会根据您指定的模型和当前页面的上下文，自动获取并组织所有可供筛选的参数及其可选值。值得注意的是，archiveFilters 标签主要用于文档首页或文档分类列表页的模板上，并通常与文档分页列表 (archiveList 标签配合 type="page") 结合使用。

该标签的基本用法如下：

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {# 筛选条件渲染代码 #}
{% endarchiveFilters %}

在这里：

  • filters 是您为筛选结果自定义的变量名，它将包含所有可用的筛选参数数据。
  • moduleId 参数至关重要，它指定了您要获取哪个内容模型下的筛选参数。例如，moduleId="1" 表示获取文章模型的参数，moduleId="2" 可能表示产品模型的参数。您可以在后台“内容模型”中查看各个模型的 ID。
  • allText 参数用于设置筛选条件中“全部”选项的显示文本，如果设置为 false 则不显示。

当 archiveFilters 标签执行后，它会将筛选数据填充到您定义的 filters 变量中。这个 filters 变量实际上是一个数组，其中每个元素代表一个可筛选的参数类别（例如“颜色”）。每个参数类别又包含了一个 Items 数组，列出了该类别下的所有具体筛选值（例如“红色”、“蓝色”），以及每个筛选值对应的链接和当前选中状态。

在模板中部署 archiveFilters

现在，我们将结合实际代码片段，展示如何在您的 AnQiCMS 模板中部署 archiveFilters 来构建动态筛选功能。

首先，请确保您在模板中引入了 archiveFilters 标签，并且与 archiveList 标签一同使用，以便在用户选择筛选条件后，能够实时展示过滤后的文档列表。

以下是一个典型的筛选功能布局：

<div class="filter-area">
    <div class="filter-header">筛选条件：</div>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for item in filters %} {# 遍历每个可筛选的参数类别，如：颜色、尺寸 #}
        <ul class="filter-group">
            <li class="filter-name">{{ item.Name }}: </li> {# 显示参数名称，如：颜色 #}
            {% for val in item.Items %} {# 遍历当前参数类别下的所有可选值 #}
            <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                <a href="{{ val.Link }}">{{ val.Label }}</a> {# 链接到对应的筛选结果页 #}
            </li>
            {% endfor %}
        </ul>
        {% endfor %}
    {% endarchiveFilters %}
</div>

<div class="document-list">
    {# 这里是文档列表，它会根据筛选条件自动更新 #}
    {% archiveList archives with moduleId="2" type="page" limit="10" %}
        {% for item in archives %}
        <div class="document-item">
            <h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
            <p>{{ item.Description }}</p>
            {# 假设产品有自定义参数 "processor" 和 "memory" #}
            {% archiveParams params with id=item.Id %}
            {% for param in params %}
                {% if param.FieldName == "processor" %}
                <span>处理器: {{ param.Value }}</span>
                {% elseif param.FieldName == "memory" %}
                <span>内存: {{ param.Value }}</span>
                {% endif %}
            {% endfor %}
            {% endarchiveParams %}
        </div>
        {% empty %}
        <p>抱歉，没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 分页导航，配合 archiveList 的 type="page" 使用 #}
    {% pagination pages with show="5" %}
        <div class="pagination-nav">
            {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
            {% for p in pages.Pages %}
            <a class="{% if p.IsCurrent %}active{% endif %}" href="{{ p.Link }}">{{ p.Name }}</a>
            {% endfor %}
            {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
        </div>
    {% endpagination %}
</div>

在这个示例中，archiveFilters 标签首先生成了所有可供筛选的参数组。每个参数组（例如“颜色”）下的具体选项（例如“红色”）都带有一个动态生成的 Link。当用户点击某个筛选选项时，AnQiCMS 会自动解析这个链接，并将其作为 URL 参数传递给服务器。