如何通过`archiveFilters`标签构建产品筛选或房产筛选等复杂搜索界面？
在当今内容爆炸的时代，用户访问网站时，常常希望能够快速找到他们感兴趣的内容。无论是浏览电商平台上的海量商品，还是寻找房产网站上符合心意的住房，一个强大且易用的筛选搜索界面都是提升用户体验的关键。
安企CMS（AnQiCMS）深知这一点，并为此提供了强大的archiveFilters标签。这个标签能帮助您轻松构建复杂的产品或房产筛选界面，让您的网站内容更具发现性和互动性，无需编写复杂的后端逻辑。
理解筛选界面的核心要素
要构建一个高效的筛选界面，我们需要几个核心组件协同工作：
内容模型与自定义字段： 这是筛选功能的基础。您需要在安企CMS后台的内容模型中定义好各种筛选属性。例如，对于一个房产网站，您可以定义“房屋类型”（住宅、商铺、公寓）、“面积范围”、“卧室数量”、“装修情况”等字段。对于产品网站，可以是“颜色”、“尺寸”、“品牌”、“内存大小”等。关键在于，这些字段需要被设置为“单项选择”或“多项选择”等适合筛选的类型，并在其中预设好可供选择的值。这些预设值将直接转化为前端的筛选选项。
archiveFilters标签的魔力： 这个标签是筛选界面生成器。它根据您指定的内容模型和其自定义字段，自动生成一系列可供筛选的选项。更棒的是，它会为每个选项生成一个带有正确URL参数的链接。当用户点击这些链接时，页面会重新加载，但URL中会携带用户选择的筛选条件。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会自动理解这个参数，并只显示房屋类型为“住宅”的房产。