在日常的网站运营中,我们经常会遇到这样的需求:希望用户能够根据文章或产品的不同属性,快速地筛选出他们感兴趣的内容。例如,在一个房产网站上,用户可能想筛选“两室一厅”的“学区房”;在一个商品展示网站上,用户可能希望找到“红色”的“新款”T恤。安企CMS(AnQiCMS)提供了强大而灵活的自定义参数功能,能够帮助我们轻松实现这种精细化的内容筛选。
这项功能的实现主要依赖于安企CMS的“内容模型”和“模板标签”两大核心特性。通过这两者,我们可以从后端定义数据的结构,到前端动态生成筛选条件并展示结果,实现一整套流畅的用户体验。
第一步:定义自定义内容模型字段
要实现自定义参数筛选,首先需要在安企CMS后台为您的文章或产品模型添加自定义字段。这些字段就是您希望用户能够筛选的“参数”。
- 进入内容模型管理: 登录安企CMS后台,导航到“内容管理”菜单,然后点击“内容模型”。这里列出了您网站中所有的内容模型,例如“文章模型”和“产品模型”。您可以选择一个现有的模型进行修改,或者创建一个全新的模型。
- 添加自定义字段: 进入选定的内容模型后,您会看到一个“内容模型自定义字段”区域。点击添加字段,可以为该模型定义新的属性。例如,如果您在做一个房产网站,可以添加“户型”、“区域”、“装修情况”等字段。
- 参数名: 这是字段的中文显示名称,方便您在后台识别和管理,比如“户型”。
- 调用字段: 这是在模板中调用的字段名,建议使用英文小写字母,例如
houseType。 - 字段类型: 这是关键的一步,它决定了用户如何选择筛选条件。
- 单行文本、数字、多行文本: 适用于用户自由输入数值或文本进行筛选(虽然直接筛选文本通常在搜索框中更常见)。
- 单项选择、多项选择、下拉选择: 这是最常用也最推荐的筛选字段类型。您可以预设多个选项,例如“单间、一室一厅、两室两厅”用于“户型”字段。这些选项在默认值区域一行一个地输入即可。
- 是否必填、默认值: 根据您的业务需求进行设置。
完成字段定义后,保存内容模型。这样,在您发布或编辑文章/产品时,这些自定义字段就会出现在“其他参数”区域,等待您为每篇内容填入具体的值。
第二步:为文章或产品内容填写自定义参数
在内容模型中定义好字段后,下一步就是在您发布或编辑具体的文章或产品时,为这些新增加的自定义字段填写对应的值。
- 进入添加/编辑文档界面: 在后台的“内容管理”中选择“文档管理”,然后点击“添加新文档”或编辑现有文档。
- 填写自定义参数: 在文档编辑页面的下方,您会找到一个名为“其他参数”的折叠区域。展开它,您将看到第一步中定义的所有自定义字段。根据实际情况,为这些字段填入相应的内容,特别是那些“单项选择”、“多项选择”或“下拉选择”类型的字段。这些精确的数据是前端筛选的基础。
确保每个相关内容都填入了准确的自定义参数值,这样它们才能被后续的筛选功能正确识别和利用。
第三步:在前台模板中实现筛选功能
在前台实现筛选,我们需要利用安企CMS强大的模板标签系统。这主要涉及到两个标签的配合使用:archiveFilters 用于生成筛选条件的链接,而 archiveList 则负责根据这些筛选条件展示相应的内容。
1. 生成筛选界面:archiveFilters 标签
archiveFilters 标签的目的是动态地根据您在后台内容模型中定义的自定义字段,生成一系列可点击的筛选链接。
- 使用方式:
{% archiveFilters filters with moduleId="1" 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 %} - 关键参数:
moduleId:指定您要筛选哪个内容模型(例如,文章模型ID为1,产品模型ID为2)。allText:为每个筛选参数创建一个“全部”或“不限”的选项。
当用户点击 archiveFilters 生成的链接时,该链接会自动包含对应的筛选参数作为URL的查询参数(例如,?houseType=两室一厅&area=朝阳)。
2. 根据参数展示内容:archiveList 标签
archiveList 标签是用来获取并展示文章或产品列表的。它最强大的地方在于,当页面的URL中包含有自定义筛选参数时,archiveList 标签会智能地识别这些参数,并自动地根据这些参数来过滤内容列表。
使用方式:
{% archiveList archives with type="page" moduleId="1" limit="10" %} {% for item in archives %} <div class="article-item"> <h3><a href="{{item.Link}}">{{item.Title}}</a></h3> <p>{{item.Description}}</p> {# 还可以显示自定义参数的值,例如:item.houseType #} <p>户型: {{ item.houseType }}</p> </div> {% empty %} <p>暂无符合条件的内容。</p> {% endfor %} {# 分页功能:与筛选结果完美结合 #} {% pagination pages with show="5" %} <div class="pagination"> {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %} {% for p in pages.Pages %}<a href="{{p.Link}}" class="{% if p.IsCurrent %}active{% endif %}">{{p.Name}}</a>{% endfor %} {% if pages.NextPage %}<a href="{{pages.NextPage.Link}}">下一页</a>{% endif %} </div> {% endpagination %} {% endarchiveList %}关键参数:
type="page":启用分页功能,与pagination标签配合使用。moduleId:指定要获取哪个内容模型的列表。limit:每页显示的内容数量。- 自定义筛选参数:
archiveList会自动解析当前页面 URL 中的查询参数。例如,如果URL是http://yourdomain.com/list?houseType=两室一厅&area=朝阳,archiveList会自动根据houseType和area这两个参数来筛选结果,无需在标签中额外指定。
3. 整合实现动态筛选
将 archiveFilters 和 archiveList 标签放置在同一个列表页面模板中,即可实现一个完整的动态筛选功能。用户点击 archiveFilters 生成的筛选链接时,页面URL会更新,archiveList 会自动根据新的URL参数重新获取并显示筛选后的内容,同时 pagination 标签也会根据筛选结果生成正确的翻页链接。
通过上述步骤,您的网站访客就可以根据您精心设置的自定义参数,