如何通过`archiveFilters`标签构建产品筛选或房产筛选等复杂搜索界面？

在当今内容爆炸的时代，用户访问网站时，常常希望能够快速找到他们感兴趣的内容。无论是浏览电商平台上的海量商品，还是寻找房产网站上符合心意的住房，一个强大且易用的筛选搜索界面都是提升用户体验的关键。

安企CMS（AnQiCMS）深知这一点，并为此提供了强大的archiveFilters标签。这个标签能帮助您轻松构建复杂的产品或房产筛选界面，让您的网站内容更具发现性和互动性，无需编写复杂的后端逻辑。

理解筛选界面的核心要素

要构建一个高效的筛选界面，我们需要几个核心组件协同工作：

  1. 内容模型与自定义字段： 这是筛选功能的基础。您需要在安企CMS后台的内容模型中定义好各种筛选属性。例如，对于一个房产网站，您可以定义“房屋类型”（住宅、商铺、公寓）、“面积范围”、“卧室数量”、“装修情况”等字段。对于产品网站，可以是“颜色”、“尺寸”、“品牌”、“内存大小”等。关键在于，这些字段需要被设置为“单项选择”或“多项选择”等适合筛选的类型，并在其中预设好可供选择的值。这些预设值将直接转化为前端的筛选选项。

  2. archiveFilters标签的魔力： 这个标签是筛选界面生成器。它根据您指定的内容模型和其自定义字段，自动生成一系列可供筛选的选项。更棒的是，它会为每个选项生成一个带有正确URL参数的链接。当用户点击这些链接时，页面会重新加载，但URL中会携带用户选择的筛选条件。

  3. archiveList标签的响应： archiveFilters生成的URL参数，会被同页面上的archiveList标签自动识别并应用。这意味着，您不需要为archiveList标签额外编写复杂的参数来处理筛选逻辑，它会自动读取URL中的筛选条件，并根据这些条件从数据库中检索出符合条件的文档进行展示。

这三者紧密配合，形成了一个无需额外开发就能实现动态筛选的强大机制。

实践：一步步构建筛选界面

现在，我们来一步步看看如何在安企CMS中构建一个房产筛选界面。

第一步：准备工作——定义内容模型与筛选字段

首先，您需要在安企CMS后台定义或编辑您的内容模型。假设我们有一个名为“房产”的内容模型。进入“内容管理”->“内容模型”，点击“房产”模型进行编辑，然后添加一些自定义字段，例如：

  • 房屋类型 (FieldName: houseType)：
    • 字段类型：单项选择
    • 默认值：住宅、商铺、公寓、别墅 (每行一个选项)
  • 卧室数量 (FieldName: bedrooms)：
    • 字段类型：单项选择
    • 默认值：一室、二室、三室、四室以上
  • 装修情况 (FieldName: decoration)：
    • 字段类型：单项选择
    • 默认值：精装修、毛坯、简装修

请确保这些字段已经保存，并且您已经在“房产”内容模型下发布了一些包含这些自定义字段的文档。

第二步：在列表页模板中插入archiveFilters标签

接下来，打开您用于展示房产列表的模板文件，通常是您的“房产”内容模型对应的{模型table}/list.html或{模型table}/index.html。

在这个模板中，找到您希望放置筛选条件的位置。我们可以使用archiveFilters标签来生成筛选器。这个标签会输出一个包含所有筛选选项的数据结构，我们需要遍历它来构建实际的HTML界面。

{# 假设您的房产模型ID是2，请根据实际情况修改 #}
<div>
    <div class="filter-group">
        <h3>房产筛选</h3>
        {% archiveFilters filters with moduleId="2" allText="不限" %}
            {% for item in filters %}
                <ul class="filter-category">
                    <li class="filter-label">{{item.Name}}: </li>
                    {% for val in item.Items %}
                        <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                            <a href="{{val.Link}}">{{val.Label}}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% endfor %}
        {% endarchiveFilters %}
    </div>

    {# 房产列表将在此处显示 #}
    <div class="property-list">
        {% archiveList archives with moduleId="2" type="page" limit="10" %}
            {% for item in archives %}
            <div class="property-card">
                <a href="{{item.Link}}">
                    {% if item.Thumb %}
                    <img src="{{item.Thumb}}" alt="{{item.Title}}" class="property-thumbnail">
                    {% endif %}
                    <h4>{{item.Title}}</h4>
                    <p>
                        {% archiveDetail houseType with name="houseType" id=item.Id %}
                        <span>类型: {{ houseType }}</span>
                        {% archiveDetail bedrooms with name="bedrooms" id=item.Id %}
                        <span> | 卧室: {{ bedrooms }}</span>
                        {% archiveDetail decoration with name="decoration" id=item.Id %}
                        <span> | 装修: {{ decoration }}</span>
                    </p>
                    <p class="description">{{item.Description}}</p>
                    <span class="views">{{item.Views}} 浏览</span>
                </a>
            </div>
            {% empty %}
            <p>暂无符合条件的房产信息。</p>
            {% endfor %}
        {% endarchiveList %}

        {# 分页导航 #}
        <div class="pagination-container">
            {% pagination pages with show="5" %}
                <ul>
                    <li class="{% if pages.FirstPage.IsCurrent %}active{% endif %}"><a href="{{pages.FirstPage.Link}}">首页</a></li>
                    {% if pages.PrevPage %}
                    <li><a href="{{pages.PrevPage.Link}}">上一页</a></li>
                    {% endif %}
                    {% for item in pages.Pages %}
                    <li class="{% if item.IsCurrent %}active{% endif %}"><a href="{{item.Link}}">{{item.Name}}</a></li>
                    {% endfor %}
                    {% if pages.NextPage %}
                    <li><a href="{{pages.NextPage.Link}}">下一页</a></li>
                    {% endif %}
                    <li class="{% if pages.LastPage.IsCurrent %}active{% endif %}"><a href="{{pages.LastPage.Link}}">尾页</a></li>
                </ul>
            {% endpagination %}
        </div>
    </div>
</div>

在这个示例中：

  • moduleId="2"：替换为您的内容模型实际的ID。您可以在后台“内容管理”->“内容模型”中查看模型的ID。
  • allText="不限"：这是筛选条件中“全部”选项的显示文本。
  • filters：这是archiveFilters标签输出的主变量，它包含了所有可筛选的字段和选项。
  • item.Name：显示自定义字段的名称，例如“房屋类型”、“卧室数量”。
  • item.FieldName：是自定义字段在数据库中的实际字段名，例如houseType。
  • item.Items：是当前自定义字段下所有可用的筛选选项。
  • val.Label：显示筛选选项的文本，例如“住宅”、“商铺”。
  • val.Link：是点击该选项后会跳转到的URL，这个URL包含了对应的筛选参数。
  • val.IsCurrent：一个布尔值，用于判断当前选项是否被选中，方便您通过CSS添加“active”样式。

第三步：展示筛选结果——结合archiveList

在上面的代码示例中，我们已经将archiveList标签与筛选器放在了同一个页面。当用户点击筛选条件时，页面会重新加载，archiveList标签会自动读取URL中的筛选参数，并根据这些参数从“房产”模型中查询出符合条件的文档进行展示。

例如，如果用户点击了“房屋类型：住宅”，URL可能会变成/fangchan/list.html?houseType=住宅。此时，archiveList会自动理解这个参数，并只显示房屋类型为“住宅”的房产。