在内容管理系统中,让用户能够根据自己的需求快速找到所需信息,是提升网站体验和内容价值的关键。AnQiCMS 提供了强大的自定义内容模型和灵活的模板标签,帮助我们轻松实现内容的参数筛选,从而动态调整列表的显示结果,极大地增强了网站内容的交互性和用户友好性。
本文将详细探讨如何在 AnQiCMS 中利用这些功能,从后端配置到前端展示,一步步实现内容参数筛选。
一、 内容参数筛选的基础:自定义内容模型
要实现内容的参数筛选,首先需要确保你的内容结构是灵活且可扩展的。AnQiCMS 的“自定义内容模型”是实现这一目标的核心。
当你创建一个新的内容模型(例如“产品”、“案例”或“房产信息”)时,你可以为这个模型定义一系列独特的字段,这些字段就是我们进行筛选的“参数”。
操作步骤:
- 进入内容模型管理: 在 AnQiCMS 后台,导航到“内容管理”部分,然后选择“内容模型”。
- 创建或编辑模型: 你可以基于现有的“文章模型”或“产品模型”进行修改,也可以创建一个全新的模型。
- 定义自定义字段: 在模型编辑页面,找到“内容模型自定义字段”区域。在这里,你可以添加新的参数。
- 参数名: 这是后台显示给管理员的字段名称(如“户型”、“区域”、“价格区间”)。
- 调用字段: 这是模板中用于调用该参数的唯一标识(如
huxing、quyu、price_range),请使用英文字母。 - 字段类型: 选择合适的字段类型至关重要。对于筛选功能,常用的类型包括:
- 单项选择 (radio):适合用户只能选择一个选项的场景,如“户型:一居室/二居室/三居室”。
- 多项选择 (checkbox):适合用户可以选择多个选项的场景,如“特色:精装修/拎包入住/学区房”。
- 下拉选择 (select):与单项选择类似,但以下拉菜单形式呈现,节省页面空间。
- 单行文本 (text) 或 数字 (number):也可以用于筛选,但通常需要额外的前端逻辑(例如输入价格范围)。
- 默认值: 对于单项选择、多项选择和下拉选择类型,务必在这里填写你的所有筛选选项,每行一个选项。这些选项将直接作为前端筛选器的数据来源。
示例: 假设我们正在为一个房产网站设置“房源”内容模型,我们可以定义以下自定义字段:
- 户型: 调用字段
apartmentType,字段类型“下拉选择”,默认值:一居室、二居室、三居室、四居室及以上。 - 区域: 调用字段
area,字段类型“下拉选择”,默认值:朝阳区、海淀区、丰台区。 - 价格区间: 调用字段
priceRange,字段类型“下拉选择”,默认值:50万以下、50-100万、100-200万、200万以上。
通过这些配置,AnQiCMS 就为你的内容模型注入了可筛选的参数属性,为后续的动态筛选奠定了基础。
二、 前端筛选界面的构建:archiveFilters 标签
在后端定义好内容参数后,接下来需要在网站前端页面上展示这些筛选条件,让用户可以进行选择。AnQiCMS 的 archiveFilters 标签正是为此而生。
archiveFilters 标签能够根据你在内容模型中定义的自定义字段,动态生成筛选器列表,并自动处理点击后 URL 参数的构建。
使用方法:
在你的模板文件(通常是列表页模板,如 {模型table}/list.html)中,使用 archiveFilters 标签。
{# 参数筛选代码示例 #}
<div class="filter-area">
<div class="filter-title">筛选条件:</div>
{% archiveFilters filters with moduleId="1" allText="全部" %} {# moduleId 替换为你的内容模型ID #}
{% for item in filters %}
<div class="filter-group">
<span class="filter-name">{{ 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>
标签参数解析:
filters:这是一个你自定义的变量名,用于存储archiveFilters标签生成的所有筛选器数据。moduleId:非常重要。你需要将这里的1替换为你想要筛选的内容模型(例如“文章模型”或“产品模型”)的 ID。这个 ID 可以在后台“内容模型”管理页面查看到。allText:用于设置“全部”选项的文本内容,例如“全部”、“不限”等。如果你不想显示这个选项,可以设置为false。
filters 变量结构解析:
在 {% for item in filters %} 循环中,item 代表一个筛选维度(例如“户型”、“区域”)。它包含以下关键属性:
item.Name:筛选维度的名称(如“户型”)。item.FieldName:筛选维度的调用字段(如apartmentType)。item.Items:这是一个数组,包含了该维度下所有可筛选的选项。每个选项val具有:val.Label:选项的显示文本(如“一居室”)。val.Link:核心功能。这是点击该选项后,AnQiCMS 自动生成的带有正确查询参数的 URL。当用户点击这个链接时,页面会刷新,并带着新的筛选参数。val.IsCurrent:一个布尔值,表示当前选项是否被选中,方便你在前端添加active类等样式。
通过这个标签,你无需手动拼接复杂的 URL 参数,AnQiCMS 会根据当前页面状态和用户选择自动生成正确的筛选链接,简化了前端开发。
三、 动态调整列表显示结果:archiveList 标签
用户选择了筛选条件并点击后,页面会跳转到新的 URL,这个 URL 中包含了用户选择的参数。此时,我们需要 archiveList 标签来根据这些参数动态地显示匹配的内容列表。
archiveList 标签在 type="page" 模式下,会自动读取当前 URL 中的查询参数,包括由 archiveFilters 标签生成的自定义参数,并据此进行内容筛选。
使用方法:
同样在你的列表页模板中,使用 archiveList 标签来展示内容列表。
{# 文档列表代码示例 #}
<div class="content-list">
{% archiveList archives with type="page" moduleId="1" limit="10" %} {# moduleId 替换为你的内容模型ID #}
{% for item in archives %}
<div class="content-item">
<a href="{{ item.Link }}">
<h4>{{ item.Title }}</h4>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% endif %}
<p>{{ item.Description }}</p>
{# 可以在这里显示自定义参数 #}
{% archiveParams params with id=item.Id sorted=false %}
{% if params.apartmentType %}<span class="param-tag">户型: {{ params.apartmentType.Value }}</span>{% endif %}
{% if params.area %}<span class="param-tag">区域: {{ params.area.Value }}</span>{% endif %}
{% endarchiveParams %}
<div class="meta">
<span>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量: {{ item.Views }}</span>
</div>
</a>
</div>
{% empty %}
<p class="no-content">当前筛选条件下没有找到任何内容。</p>
{% endfor %}
{% endarchiveList %}
</div>
标签参数解析:
archives:你自定义的变量名,用于存储筛选后的内容列表。type="page":关键参数。这告诉archiveList标签当前处于分页或筛选模式,它会主动读取 URL 中的查询参数。moduleId:再次指定内容模型的 ID,确保获取的是正确模型下的内容。limit="10":每页显示的内容数量。
当用户点击 archiveFilters 生成的链接(例如 `…/list.html?apartment