在构建和运营网站时,为用户提供高效的内容筛选功能,是提升用户体验和内容可发现性的关键。安企CMS(AnQiCMS)凭借其灵活的内容模型和强大的模板标签系统,能够帮助我们轻松实现在模板中动态生成内容模型筛选条件,例如按属性进行筛选。

内容模型与自定义字段:筛选的基础

安企CMS的核心优势之一便是其高度灵活的内容模型。您可以根据业务需求,如文章、产品、活动等,创建或修改内容模型,并为每个模型定义专属的自定义字段。这些字段可以是简单的单行文本、数字,也可以是更复杂的单选、多选或下拉列表。正是这些自定义字段,构成了我们动态生成筛选条件的基础。

例如,一个“产品”内容模型可能包含“颜色”(单选)、“尺寸”(多选)和“材质”(下拉选择)等自定义属性。用户在浏览产品列表时,如果能够根据这些属性进行筛选,将极大地提升查找效率。

实现动态筛选:关键在于archiveFilters标签

要在AnQiCMS模板中实现内容模型的动态筛选,核心在于使用archiveFilters标签。这个标签专门用于生成基于内容模型参数的筛选条件列表,并自动处理链接的生成,让前端展示和后端数据筛选无缝连接。

archiveFilters标签会返回一个包含筛选条件的数组对象。每个筛选条件都对应内容模型中的一个自定义字段,并列出该字段可供筛选的所有选项,以及这些选项对应的筛选链接和当前是否被选中的状态。

这个标签支持以下几个主要参数:

  • moduleId:指定要获取哪个内容模型的筛选条件。例如,moduleId="1"表示获取ID为1的文章模型的筛选条件。
  • allText:设置“全部”选项的显示文本,如“全部”、“不限”等。如果不想显示此选项,可以设置为false
  • siteId:在多站点环境中,如果需要获取特定站点的筛选条件,可以指定其ID。通常情况下无需填写。

archiveFilters标签生成的数据结构大致如下:

filters (数组)
  ├── item (每个自定义字段的筛选器)
  │   ├── Name: 字段的中文名称 (如:“颜色”)
  │   ├── FieldName: 字段的数据库名称 (如:“color”)
  │   └── Items (字段可供筛选的选项数组)
  │       ├── val (每个选项)
  │       │   ├── Label: 选项的显示文本 (如:“红色”)
  │       │   ├── Link: 点击此选项后跳转的筛选URL (如:“/products/list?color=red”)
  │       │   └── IsCurrent: 布尔值,表示当前选项是否被选中
  └── ... (其他自定义字段)

实际操作:一步步构建筛选功能

第一步:准备内容模型与自定义字段(后台操作)

在开始模板开发之前,请确保您已经在AnQiCMS后台为您的内容模型设置了需要用于筛选的自定义字段。

  1. 登录AnQiCMS后台。
  2. 导航至“内容管理” -> “内容模型”。
  3. 选择您需要添加筛选功能的模型(例如“产品模型”),点击“修改”。
  4. 在“内容模型自定义字段”区域,添加或编辑字段。
    • 参数名:用户可见的字段名称(如“产品颜色”)。
    • 调用字段:用于模板调用的英文名称(如color)。
    • 字段类型:建议选择“单项选择”、“多项选择”或“下拉选择”,这些类型最适合作为筛选条件。
    • 默认值:在此处输入每个筛选选项,每行一个(例如:红色、蓝色、绿色)。

完成设置后,记得保存并发布一些带有这些自定义字段内容的数据,以便在前端进行测试。

第二步:在模板中调用archiveFilters生成筛选条件

接下来,我们将在内容列表页的模板中(例如产品列表页product/list.html),使用archiveFilters标签来动态生成筛选条件。

{# 假设我们有一个产品列表页,产品模型ID为2 #}
<div>
    <h3>产品筛选</h3>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% for item in filters %} {# 遍历每个可筛选的自定义字段 #}
        <div class="filter-group">
            <span class="filter-label">{{item.Name}}:</span> {# 字段名称,如“颜色” #}
            <ul class="filter-options">
                {% for val in item.Items %} {# 遍历当前字段的所有筛选选项 #}
                <li class="filter-option {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a> {# 筛选选项的显示文本和点击链接 #}
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

在这段代码中:

  • 我们首先使用archiveFilters标签获取moduleId="2"(例如产品模型)的所有筛选条件,并将其赋值给filters变量。allText="不限"则为每个筛选组添加了一个“不限”选项。
  • 外层for循环遍历filters数组,item代表每个自定义字段(如“颜色”、“尺寸”)。
  • 内层for循环遍历item.Items数组,val代表每个筛选选项(如“红色”、“蓝色”)。
  • val.Link是安企CMS自动生成的包含筛选参数的URL,点击即可完成筛选。
  • val.IsCurrent用于判断当前选项是否被选中,方便我们添加active类来高亮显示。

第三步:结合archiveList标签展示过滤后的内容

archiveList标签是用于展示文档列表的核心标签。它的强大之处在于,能够自动识别并处理URL中携带的筛选参数。这意味着,当用户点击archiveFilters生成的筛选链接后,archiveList会自动根据URL中的参数(例如color=red&size=M)查询并展示相应的内容,无需额外的编程逻辑。

”`twig {# 在同一个模板中,紧接着筛选条件代码的下方,或同一页面的其他区域 #}

{% archiveList archives with moduleId="2" type="page" limit="12" %}
    {% for product in archives %}
    <div class="