如何在产品列表或文章列表页实现多条件筛选，并显示过滤后的结果？

在内容管理系统中，为用户提供灵活的多条件筛选功能，是提升网站可用性和用户体验的关键一环。无论是电商网站的产品列表，还是内容门户的文章分类页面，用户都希望能快速定位到自己感兴趣的内容。安企CMS（AnQiCMS）凭借其强大的内容模型和模板标签系统，让您能够轻松实现这一需求，并直观地显示过滤后的结果。

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

所有筛选功能都离不开数据。在安企CMS中，实现多条件筛选的第一步，是在内容模型中定义相应的自定义字段。这些字段将作为您筛选条件的依据。

您可以前往后台的“内容管理”找到“内容模型”选项。安企CMS默认提供了“文章模型”和“产品模型”，您也可以根据业务需求创建新的内容模型。进入相应的模型编辑页面后，在“内容模型自定义字段”区域，您可以添加新的字段。

假设您正在运营一个房产信息网站，需要根据“房屋类型”（如住宅、商铺、公寓）和“建筑面积”进行筛选。您可以这样设置自定义字段：

• 字段一：房屋类型
  • 参数名：房屋类型（方便后台识别）
  • 调用字段 (FieldName)：housing_type (这个名称至关重要，前端模板和URL参数都会用到它)
  • 字段类型：单项选择（或下拉选择）
  • 默认值：每行输入一个选项，例如：住宅、商铺、公寓、别墅
• 字段二：建筑面积
  • 参数名：建筑面积
  • 调用字段 (FieldName)：area_size
  • 字段类型：下拉选择
  • 默认值：例如：50平米以下、50-80平米、80-120平米、120平米以上

完成字段定义后，您在发布文章或产品时，就可以为这些内容填写对应的“房屋类型”和“建筑面积”信息了。

2. 构建筛选界面：使用 archiveFilters 标签

一旦我们有了这些数据基础，下一步就是在前端页面展示筛选选项。安企CMS提供了一个非常方便的archiveFilters标签，可以帮助您动态生成这些筛选条件。这个标签通常用于产品列表页或文章列表页的侧边栏或顶部区域。

archiveFilters标签会自动读取您内容模型中定义的自定义字段，并根据这些字段生成筛选链接。您需要将它放置在您的列表模板文件（如{模型table}/list.html）中。

以下是构建筛选界面的示例代码：

{# 假设这是您的列表页模板（例如：archive/list.html） #}
<div>
    <h3 style="font-size: 20px; margin-bottom: 15px;">房产筛选</h3>
    {% archiveFilters filters with moduleId="1" allText="不限" %}
        {% for item in filters %}
        <div style="margin-bottom: 20px;">
            <strong style="display: block; margin-bottom: 8px;">{{ item.Name }}:</strong>
            <ul style="list-style: none; padding: 0;">
                {% for val in item.Items %}
                <li style="display: inline-block; margin-right: 10px; padding: 5px 10px; border: 1px solid #eee; border-radius: 4px; {% if val.IsCurrent %}background-color: #007bff; color: white; border-color: #007bff;{% endif %}">
                    <a href="{{ val.Link }}" style="text-decoration: none; color: inherit;">{{ val.Label }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

这里需要注意几个关键点：

• moduleId="1"：这里的1代表文章模型。如果您的筛选是针对产品模型，那么这里可能是moduleId="2"，或者是您自定义模型的ID。您可以在后台“内容模型”页面查看每个模型的ID。
• allText="不限"：这是为每个筛选维度设置的“全部”或“不限”选项的显示文本。用户点击后，会移除该维度的筛选条件。
• filters变量：archiveFilters标签会将所有生成的筛选条件组织成一个名为filters的数组对象。
• item.Name：显示自定义字段的“参数名”（例如“房屋类型”）。
• item.Items：一个数组，包含了该筛选条件下的所有选项。
• val.Label：显示每个筛选选项的文本（例如“住宅”）。
• val.Link：这是最重要的部分。它会自动生成带有相应筛选参数的URL。当用户点击时，页面会跳转到新的URL，并携带筛选参数。
• val.IsCurrent：一个布尔值，如果当前选项已被选中，它会是true。您可以利用它来为当前选中的筛选条件添加active样式，给用户视觉反馈。

3. 显示过滤结果：结合 archiveList 标签

用户点击筛选条件后，页面需要展示匹配的结果。幸运的是，安企CMS的archiveList标签非常智能，它会自动读取当前URL中的查询参数，并根据这些参数来过滤内容。这意味着，您无需在archiveList标签中额外编写筛选逻辑，它会与archiveFilters生成的URL无缝衔接。

在同一个列表模板中，紧接着筛选区域的下方，您可以放置内容列表的显示代码：

{# 列表内容展示 #}
<div style="margin-top: 30px;">
    <h3 style="font-size: 20px; margin-bottom: 15px;">筛选结果</h3>
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for item in archives %}
        <div style="border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 5px;">
            <a href="{{ item.Link }}" style="text-decoration: none; color: #333; display: flex; align-items: center;">
                {% if item.Thumb %}
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" style="width: 100px; height: 75px; object-fit: cover; margin-right: 15px; border-radius: 3px;">
                {% endif %}
                <div>
                    <h4 style="margin: 0 0 8px 0; color: #007bff;">{{ item.Title }}</h4>
                    <p style="margin: 0 0 5px 0; color: #666;">{{ item.Description|truncatechars:100 }}</p>
                    <div style="font-size: 13px; color: #999;">
                        <span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
                        <span style="margin-left: 10px;">发布时间: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                        <span style="margin-left: 10px;">浏览量: {{ item.Views }}</span>
                    </div>
                    {# 这里可以展示自定义字段，例如“房屋类型”和“建筑面积” #}
                    {% archiveParams params with id=item.Id %}
                        {% for param in params %}
                            {% if param.FieldName == 'housing_type' %}
                                <span style="margin-left: 10px; font-size: 13px; color: #999;">房屋类型: {{ param.Value }}</span>
                            {% elif param.FieldName == 'area_size' %}
                                <span style="margin-left: 10px; font-size: 13px; color: #999;">建筑面积: {{ param.Value }}</span>
                            {% endif %}
                        {% endfor %}
                    {% endarchiveParams %}
                </div>
            </a>
        </div>
        {% empty %}
        <p style="text-align: center; color: #888;">没有找到符合条件的房产信息。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

关键参数说明：

• moduleId="1"：同样，指定要获取哪个内容模型的文档列表。
• type="page"：这个参数告诉系统，我们要显示一个分页列表，与后面的分页标签配合使用。
• limit="10"：每页显示10条内容。
• archives变量：archiveList标签会将过滤后的内容存储到archives变量中。
• item.Link：内容的详情链接。
• item.Title：内容标题。
• item.Description：内容简介。
• item.Thumb：内容的缩略图。 *