如何在文章列表或产品列表页面，实现内容的多维度筛选功能（如按价格、属性）？

很高兴能和您一起探讨安企CMS如何帮助我们实现内容的多维度筛选。在如今信息爆炸的时代，用户对于内容的获取越来越追求效率和个性化。一个能够让用户根据自身需求快速定位内容的网站，无疑会大大提升用户体验和转化率。

安企CMS在这方面提供了非常强大且灵活的功能，特别是通过自定义内容模型和特定的模板标签，我们可以轻松地在文章列表或产品列表页面构建出多维度筛选功能，就像电商网站上常见的“按价格筛选”、“按品牌筛选”那样。

赋能列表页面：安企CMS实现多维度筛选内容的实用指南

想象一下，当您的网站拥有大量内容或产品时，仅仅通过分类来组织它们往往显得力不从心。用户可能需要根据价格区间、特定属性（如颜色、尺寸）、文章类型、作者等多种条件来查找他们真正感兴趣的内容。安企CMS深谙此道，为我们提供了优雅的解决方案，让这一切变得简单而高效。

一、 理解多维度筛选的基石：自定义内容模型

要实现多维度筛选，首先得有一个“维度”。在安企CMS中，这些“维度”就是我们通过灵活的内容模型自定义的各种字段。系统默认提供了“文章模型”和“产品模型”，但真正的力量在于您可以根据业务需求创建或修改这些模型，并添加任意数量的自定义字段。

比如，如果您在运营一个电商网站，产品列表需要按“价格”、“颜色”、“尺寸”等进行筛选。您可以在后台的“内容管理”找到“内容模型”，选择或创建一个产品模型，然后为它添加以下自定义字段：

• 价格 (数字类型)
• 颜色 (多项选择或下拉选择，预设红、绿、蓝等选项)
• 尺寸 (单项选择，预设S、M、L、XL等选项)

如果您是自媒体运营者，文章列表可能需要按“作者”、“文章类型（如深度报道、观点、教程）”等筛选。同样，您可以在文章模型中添加这些自定义字段。

这些自定义字段不仅用于内容发布时填写，更重要的是，它们是构建前端筛选功能的“数据源”。在填写文档或产品时，确保这些自定义字段的数据是完整且规范的，这将为后续的筛选功能打下坚实基础。

二、 核心功能：运用 archiveFilters 标签构建筛选器

当我们定义好了内容模型和自定义字段，并发布了带有这些字段的内容后，接下来就要在前端页面展示这些筛选选项了。安企CMS提供了一个非常实用的模板标签：archiveFilters。

archiveFilters 标签的主要作用是根据您指定的内容模型，自动提取其可筛选的自定义字段，并生成相应的筛选链接。这些链接会智能地包含当前的筛选状态，确保用户在选择不同筛选条件时，页面能够正确响应。

在您的文章列表或产品列表模板（通常是{模型table}/list.html这类文件）中，您可以这样使用 archiveFilters：

{# 假设我们正在产品列表页，产品模型ID为2 #}
<div>
    <h4>筛选条件：</h4>
    {% archiveFilters filters with moduleId="2" allText="全部" %}
        {% for item in filters %}
        <div class="filter-group">
            <span>{{ item.Name }}: </span> {# 显示筛选维度名称，如“颜色” #}
            <ul>
                {% for val in item.Items %}
                <li class="{% if val.IsCurrent %}active{% endif %}">
                    <a href="{{ val.Link }}">{{ val.Label }}</a> {# 筛选选项，如“红色” #}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

这段代码会遍历您的产品模型中所有被标记为可筛选的自定义字段。对于每个字段，它会列出所有可能的值（例如“红色”、“蓝色”），并为每个值生成一个带有正确筛选参数的URL链接。allText="全部"参数则会为每个筛选维度添加一个“全部”选项，方便用户清除某个筛选条件。val.IsCurrent这个布尔值非常有用，它可以帮助您为当前选中的筛选条件添加active类，从而在视觉上高亮显示，提升用户体验。

三、 展示筛选结果：archiveList 标签的配合使用

archiveFilters 标签负责生成筛选选项和链接，那么当用户点击这些链接后，谁来展示筛选后的内容呢？答案是 archiveList 标签。

archiveList 标签不仅用于显示常规的文章或产品列表，它还有一个非常智能的特性：能够自动识别当前URL中包含的筛选参数（即 archiveFilters 生成链接时带上的那些 query 参数）。这意味着，您不需要额外编写复杂的逻辑去解析URL中的筛选条件，archiveList 会自动根据这些参数来查询并显示匹配的内容。

在同一份列表模板中，紧接着 archiveFilters 标签之后，您可以这样使用 archiveList：

{# 接着上一步的筛选器，显示筛选后的产品列表 #}
<div class="product-list">
    {% archiveList products with moduleId="2" type="page" limit="12" %}
        {% for item in products %}
        <div class="product-item">
            <a href="{{ item.Link }}">
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                <h5>{{ item.Title }}</h5>
                {# 如果产品模型有价格字段，可以这样显示： #}
                <p>价格: {% archiveDetail with name="Price" id=item.Id %} 元</p>
                <p>{{ item.Description|truncatechars:100 }}</p>
            </a>
        </div>
        {% empty %}
        <p>没有找到符合条件的产品。</p>
        {% endfor %}
    {% endarchiveList %}

    {# 如果需要分页，可以再添加分页标签 #}
    {% pagination pages with show="5" %}
        {# 分页链接的渲染，此处省略具体代码，可参考文档中pagination标签的用法 #}
    {% endpagination %}
</div>

在这里，moduleId="2" 再次确保了我们查询的是产品模型的数据。type="page" 参数则表示我们希望列表支持分页功能，limit="12" 控制每页显示的产品数量。当用户点击 archiveFilters 生成的筛选链接时，页面会重新加载，archiveList 就会自动根据URL中的筛选参数，仅显示符合条件的产品。

四、 优化用户体验：美化筛选界面与分页

一个功能强大的筛选器，还需要一个友好美观的界面。利用 archiveFilters 提供的 val.IsCurrent 属性，您可以轻松地为当前选中的筛选选项添加CSS样式，例如将其背景色设为蓝色或加粗字体，让用户一目了然。

同时，当筛选出的内容较多时，分页功能显得尤为重要。安企CMS的 pagination 标签可以与 archiveList 完美配合，生成符合筛选条件的分页链接。这样，用户在筛选后浏览多页内容时，筛选条件依然保持不变，极大提升了用户体验的连贯性。

五、 实际操作流程概览

要实现文章或产品列表的多维度筛选，您的工作流程大致可以概括为：

1. 定义或修改内容模型：在安企CMS后台的“内容管理”->“内容模型”中，为您的文章或产品模型添加自定义字段，并选择合适的字段类型（如单项选择、多项选择、数字等）。
2. 录入内容并填充自定义字段：在发布文章或产品时，务必完整填写这些自定义字段的值。
3. 修改前端列表模板：
   • 在希望显示筛选器的位置，插入 archiveFilters 标签，设置 moduleId 参数以匹配您的内容模型ID。
   • 在希望显示内容列表的位置，插入 archiveList