如何在文章列表页结合自定义参数（如“区域”、“户型”）进行多条件筛选？

在安企CMS中，要在文章列表页实现多条件筛选，例如根据“区域”、“户型”等自定义参数进行筛选，这需要我们巧妙地结合系统提供的“内容模型”功能，以及前端模板的“文档参数筛选标签”（archiveFilters）和“文档列表标签”（archiveList）。整个过程可以分为几个核心步骤，让我们一起来详细了解。

核心功能：自定义内容模型与参数

实现多条件筛选的基础，是为您的文章定义可筛选的自定义参数。安企CMS的“内容模型”功能正是为此而生。

第一步：在内容模型中定义筛选字段

首先，您需要进入安企CMS的后台管理界面，找到“内容管理”菜单下的“内容模型”。在这里，您可以管理系统内置的模型（如“文章模型”、“产品模型”），也可以创建新的内容模型。

点击您要编辑的模型（例如，如果您想在文章中添加“区域”、“户型”筛选，就选择“文章模型”进行编辑），或者创建一个新的内容模型。在模型编辑页面的“内容模型自定义字段”区域，您可以添加新的字段。以“区域”和“户型”为例：

• 参数名： 填写用户友好的名称，如“区域”、“户型”。这会在后台编辑文章时显示。
• 调用字段： 这是一个关键的标识符，您将在前端模板中使用它来引用这个字段。请使用英文小写字母，例如“region”和“houseType”。
• 字段类型： 对于筛选功能，我们通常会选择“单项选择”、“多项选择”或“下拉选择”这几种类型。这些类型允许您预设一系列选项，供用户在发布文章时选择，也方便前端生成筛选条件。
• 默认值： 如果您选择了上述的字段类型，这里就是设置具体选项的地方。每一行代表一个选项。例如，“区域”的默认值可以是：

  
  东城区
  西城区
  海淀区
  朝阳区
  

  “户型”的默认值可以是：

  
  一室一厅
  两室一厅
  三室两厅
  复式
  

• 是否必填： 根据您的业务需求决定。

完成字段的添加和配置后，记得保存内容模型。

第二步：为文章填写自定义参数

当您完成了内容模型的字段定义后，接下来就是在发布或编辑文章时，为这些文章选择或填写相应的自定义参数。

进入“内容管理”菜单下的“发布文档”或“文档管理”，选择一篇文章进行编辑。在文章编辑页面的底部，您会看到一个名为“其他参数”的折叠区域。展开这个区域，您会看到刚才在内容模型中定义的自定义字段，例如“区域”和“户型”。

在这里，您可以根据文章的实际情况，选择或填写相应的“区域”和“户型”值。确保您的文章数据包含了这些自定义参数，这样前端才能正确地进行筛选。

在文章列表页实现多条件筛选

现在，我们已经准备好了后台数据，接下来就是如何在前端页面上把这些筛选条件呈现给用户，并让列表能够根据用户的选择进行过滤。

第三步：前端模板中呈现筛选条件

在您的文章列表页模板中（通常是{模型table}/list.html），您可以使用安企CMS提供的archiveFilters标签来自动生成筛选条件。

archiveFilters标签会根据您在内容模型中定义的自定义字段，自动生成包含筛选选项和对应链接的HTML结构。

{# 示例：在文章列表页呈现“区域”和“户型”的筛选条件 #}
<div>
    <h3>多条件筛选：</h3>
    {% archiveFilters filters with moduleId="1" allText="不限" %} {# moduleId="1" 假设为文章模型ID，allText为“全部”选项的文本 #}
        {% for item in filters %} {# filters变量会包含所有可筛选的自定义参数 #}
        <div class="filter-group">
            <span class="filter-label">{{item.Name}}: </span> {# 显示自定义参数的名称，如“区域” #}
            <ul class="filter-options">
                {% for val in item.Items %} {# 遍历每个参数下的所有选项 #}
                <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a> {# val.Link是点击该选项后跳转的URL，val.Label是选项的显示文本 #}
                </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    {% endarchiveFilters %}
</div>

代码解释：

• {% archiveFilters filters with moduleId="1" allText="不限" %}：调用archiveFilters标签来获取筛选数据。moduleId指定了要筛选哪个内容模型的文章（这里假设文章模型的ID是1），allText是默认“不限”选项的显示文本。
• {% for item in filters %}：filters变量是一个数组，包含了所有您定义的可用于筛选的自定义字段（例如“区域”、“户型”）。item.Name就是“区域”、“户型”等字段名称，item.FieldName是其对应的调用字段（如“region”）。
• {% for val in item.Items %}：item.Items是当前自定义参数（如“区域”）下的所有可选值（如“东城区”、“西城区”）。
• {{val.Link}}：这是关键！安企CMS会自动生成点击该选项后，带上相应筛选参数的URL。例如，如果点击“东城区”，链接可能是yourwebsite.com/article/list?region=东城区。
• {{val.Label}}：显示选项的文本，如“东城区”。
• {% if val.IsCurrent %}active{% endif %}：用于判断当前筛选选项是否被选中，方便您添加CSS样式来高亮显示。

第四步：结合 archiveList 标签展示筛选结果

当用户在前端点击某个筛选条件时，页面URL会自动携带相应的参数（例如?region=东城区&houseType=两室一厅）。此时，您的文章列表标签archiveList会自动识别并使用这些URL参数来过滤显示文章。

您只需在模板中正常使用archiveList标签来展示文章列表，并结合分页标签即可。

”`twig {# 示例：显示根据筛选条件过滤后的文章列表 #}

<h2>筛选结果</h2>
{% archiveList archives with moduleId="1" type="page" limit="10" %} {# type="page"表示启用分页，limit设置每页显示数量 #}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        {# 可以在这里显示其他文章信息，包括自定义参数值 #}
        {% archiveParams params with id=item.Id sorted=true %} {# 获取当前文章的自定义参数 #}
            {% for param in params %}
                {% if param.FieldName == 'region' %} {# 例如只显示“区域”参数 #}
                    <span>区域: {{param.Value}}</span>
                {% elseif param.FieldName == 'houseType' %} {# 例如只显示“户型”参数 #}
                    <span>户型: {{param.Value}}</span>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
    </div>
    {% empty %}
    <p>抱歉，没有找到符合条件的文章。</p>
    {% endfor %}
{% endarchiveList %}

{# 分页代码 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 这里是分页链接的HTML结构，具体可根据tag-pagination.md文档进行设置 #}
        <a href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}<a