如何在AnQiCMS中实现内容参数筛选,动态调整列表显示结果?

在内容管理系统中,让用户能够根据自己的需求快速找到所需信息,是提升网站体验和内容价值的关键。AnQiCMS 提供了强大的自定义内容模型和灵活的模板标签,帮助我们轻松实现内容的参数筛选,从而动态调整列表的显示结果,极大地增强了网站内容的交互性和用户友好性。

本文将详细探讨如何在 AnQiCMS 中利用这些功能,从后端配置到前端展示,一步步实现内容参数筛选。


一、 内容参数筛选的基础:自定义内容模型

要实现内容的参数筛选,首先需要确保你的内容结构是灵活且可扩展的。AnQiCMS 的“自定义内容模型”是实现这一目标的核心。

当你创建一个新的内容模型(例如“产品”、“案例”或“房产信息”)时,你可以为这个模型定义一系列独特的字段,这些字段就是我们进行筛选的“参数”。

操作步骤:

  1. 进入内容模型管理: 在 AnQiCMS 后台,导航到“内容管理”部分,然后选择“内容模型”。
  2. 创建或编辑模型: 你可以基于现有的“文章模型”或“产品模型”进行修改,也可以创建一个全新的模型。
  3. 定义自定义字段: 在模型编辑页面,找到“内容模型自定义字段”区域。在这里,你可以添加新的参数。
    • 参数名: 这是后台显示给管理员的字段名称(如“户型”、“区域”、“价格区间”)。
    • 调用字段: 这是模板中用于调用该参数的唯一标识(如 huxingquyuprice_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