很高兴能和您一起探讨安企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 完美配合,生成符合筛选条件的分页链接。这样,用户在筛选后浏览多页内容时,筛选条件依然保持不变,极大提升了用户体验的连贯性。
五、 实际操作流程概览
要实现文章或产品列表的多维度筛选,您的工作流程大致可以概括为:
- 定义或修改内容模型:在安企CMS后台的“内容管理”->“内容模型”中,为您的文章或产品模型添加自定义字段,并选择合适的字段类型(如单项选择、多项选择、数字等)。
- 录入内容并填充自定义字段:在发布文章或产品时,务必完整填写这些自定义字段的值。
- 修改前端列表模板:
- 在希望显示筛选器的位置,插入
archiveFilters标签,设置moduleId参数以匹配您的内容模型ID。 - 在希望显示内容列表的位置,插入
archiveList
- 在希望显示筛选器的位置,插入