如何在AnQiCMS中实现内容列表按自定义参数进行筛选显示？

在安企CMS中，灵活地展示和筛选内容是网站运营的核心需求之一。当网站的内容结构日益复杂，例如您运营一个电商平台需要按颜色、尺寸筛选产品，或者一个房产网站需要按户型、面积筛选房源时，传统的分类标签可能就不够用了。这时，利用安企CMS强大的自定义参数功能，可以轻松实现内容列表按您定义的参数进行筛选显示，极大地提升用户体验和网站内容的组织效率。

接下来，我们将一起深入了解如何在AnQiCMS中实现这一功能。

理解自定义参数在AnQiCMS中的作用

AnQiCMS最强大的功能之一就是它灵活的内容模型。除了文章标题、内容等基础字段外，系统允许您为每个内容模型自定义额外字段，这些字段就是我们所说的“自定义参数”。例如，在一个“产品”内容模型中，您可以添加“材质”、“颜色”、“尺寸”等字段；在一个“房源”内容模型中，您可以添加“户型”、“面积”、“朝向”等字段。

这些自定义参数不仅能在内容详情页展示，更重要的是，它们可以作为筛选条件，帮助用户快速找到感兴趣的内容。安企CMS为此提供了专门的模板标签，让您能够轻松地将这些参数转化为前端可操作的筛选器。

核心标签：archiveFilters 和 archiveList

要在前端实现内容列表的自定义参数筛选，主要会用到安企CMS的两个核心模板标签：archiveFilters 和 archiveList。

  • archiveFilters 标签：这个标签的职责是生成前端的筛选界面。它能够自动识别您在后台内容模型中定义的、可用于筛选的自定义参数，并将其转化为可点击的筛选选项链接。当用户点击这些链接时，页面URL会携带相应的筛选参数。
  • archiveList 标签：这是用于调取和展示内容列表的标签。当它与archiveFilters配合使用时，它会智能地读取当前页面URL中携带的筛选参数，并根据这些参数自动过滤内容，只展示符合条件的内容。

逐步实现内容列表筛选显示

我们将通过一个具体的例子来演示如何实现按自定义参数筛选内容列表。假设我们有一个“产品”内容模型，并为其添加了“材质”和“颜色”两个自定义字段。

步骤一：准备内容模型与自定义字段

首先，请确保您的AnQiCMS后台已经配置好相应的“内容模型”和“自定义字段”。

  1. 登录后台：进入AnQiCMS后台管理界面。
  2. 创建或编辑内容模型：导航到“内容管理” -> “内容模型”。您可以选择已有的模型（例如“产品模型”）进行编辑，或者创建一个新的内容模型。
  3. 添加自定义字段：在所选内容模型的编辑页面，找到“内容模型自定义字段”区域，点击“添加字段”。
    • 示例字段1（材质）：
      • 参数名：材质
      • 调用字段：material (这个字段名将用于模板调用和URL参数)
      • 字段类型：单项选择 (假设材质是单选)
      • 是否必填：根据需要设置
      • 默认值：每一行输入一个选项，例如：木材、金属、塑料
    • 示例字段2（颜色）：
      • 参数名：颜色
      • 调用字段：color
      • 字段类型：多项选择 (假设颜色可以多选)
      • 是否必填：根据需要设置
      • 默认值：每一行输入一个选项，例如：红色、蓝色、绿色
    • 保存您的内容模型设置。
  4. 发布或编辑内容：在“内容管理” -> “发布文档”或“文档管理”中，为您的“产品”内容选择相应的“材质”和“颜色”字段值。

步骤二：设计列表页模板

接下来，我们需要修改或创建产品列表页的模板文件。假设您的产品列表页模板是 product/list.html。

打开您的模板文件（通常位于 /template/您的模板名称/product/list.html）。

1. 构建筛选区域 (archiveFilters)

在模板的适当位置，使用archiveFilters标签来生成筛选器。moduleId参数非常重要，它告诉标签要生成哪个内容模型的筛选参数。allText参数可以自定义“全部”或“不限”等选项的文字。

{# 假设产品模型的ID是2，请根据您的实际情况修改 moduleId 参数 #}
<div class="filter-area">
    <h3>筛选条件</h3>
    {% archiveFilters filters with moduleId="2" allText="不限" %}
        {% 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>

代码解析：

  • moduleId="2"：指定我们正在为ID为2的产品模型生成筛选器。
  • allText="不限"：设置当没有选择任何筛选条件时，显示“不限”文本。
  • 外层for item in filters循环：遍历所有的可筛选参数组（例如“材质”、“颜色”）。
    • item.Name：显示参数的名称，如“材质”、“颜色”。
  • 内层for val in item.Items循环：遍历每个参数组下的所有可选值（例如“木材”、“金属”、“塑料”）。
    • val.Label：显示每个选项的名称，如“木材”、“红色”。
    • val.Link：这是最关键的部分！它会生成带有相应筛选参数的URL。当用户点击时，页面会重新加载，并根据这个URL中的参数进行内容过滤。
    • val.IsCurrent：一个布尔值，如果当前选项已被选中，则为true，可用于添加active样式以突出显示。

2. 展示内容列表 (archiveList)

在筛选区域下方，使用archiveList标签来展示内容。

”`twig 

<h2>产品列表</h2>
{# 同样假设产品模型的ID是2。type="page" 开启分页模式，limit="10" 每页显示10条 #}
{% archiveList products with moduleId="2" type="page" limit="10" %}
    {% for item in products %}
    <div class="product-item">
        <a href="{{ item.Link }}">
            <h3>{{ item.Title }}</h3>
            {% if item.Thumb %}
            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
            {% endif %}
            <p>描述: {{ item.Description }}</p>
            {# 调用自定义字段，注意这里直接使用我们在后台定义的“调用字段”名称 #}
            <p>材质: {{ item.material }}</p>
            <p>颜色: {{ item.color }}</p>
        </a>
    </div>
    {% empty %}
    <p>抱歉，没有找到符合条件的产品。</p>
    {% endfor %}
{% endarchiveList %}

{# 添加分页导航 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间多页 #}
        {% for pageItem in pages.