如何在安企CMS的文档列表页显示筛选条件，并根据参数动态更新结果？

在安企CMS中，为文档列表页添加筛选条件并根据用户选择动态更新结果，是提升网站内容可发现性和用户体验的重要一环。这不仅能帮助访问者快速定位到他们感兴趣的内容，还能通过清晰的URL结构对SEO产生积极影响。接下来，让我们一步步了解如何在安企CMS中实现这一功能。

核心功能：内容模型与自定义字段是基础

在安企CMS中，一切内容都是基于“内容模型”构建的。文档列表页的筛选功能，其数据源正是您在内容模型中定义的各种自定义字段。因此，在着手实现前端筛选之前，我们需要确保您的内容模型中已经包含了需要筛选的自定义字段，并且这些字段的值已经填充在您的文档内容中。

例如，如果您想创建一个房产网站，可能需要根据“房屋类型”（如公寓、别墅、商铺）或“面积范围”（如50-70平米、70-90平米）进行筛选。这些“房屋类型”和“面积范围”就需要在后台的“内容管理” -> “内容模型”中，针对您的“房产模型”进行添加。

在定义自定义字段时，AnQiCMS通常会提供一个选项，让您决定该字段是否应用于前端筛选。对于单项选择、多项选择或下拉选择等字段类型，AnQiCMS会自动识别其选项值，作为可用于前端筛选的条件。当这些字段被设置为可筛选后，AnQiCMS就能根据这些定义，自动生成前端筛选所需的条件和逻辑。

第一步：在模板中显示筛选条件

有了可筛选的自定义字段，下一步就是在文档列表页的模板中，将这些筛选条件展示出来。安企CMS为此提供了一个非常方便的模板标签——archiveFilters。

archiveFilters标签能够根据您指定的内容模型，自动提取所有可筛选的自定义字段及其对应的选项值，并生成带有筛选链接的HTML代码。这极大地简化了前端开发工作。

我们来看看它的基本用法：

{# 参数筛选代码，通常放在列表页顶部或侧边栏 #}
<div>
    <h3>筛选条件：</h3>
    {% archiveFilters filters with moduleId="1" 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>

在这个例子中：

  • filters 是我们自定义的一个变量名，用于接收archiveFilters标签返回的数据集合。
  • moduleId="1" 指明我们要获取ID为1的内容模型（例如文章模型）的可筛选参数。您可以根据实际情况替换为您的内容模型ID。
  • allText="不限" 定义了“全部”或“不限制”选项的显示文本。如果不想显示，可以设置为allText=false。
  • {% for item in filters %} 循环遍历每个可筛选的自定义字段（例如“房屋类型”、“面积范围”）。
    • item.Name 会显示该字段的中文名称（如“房屋类型”）。
    • {% for val in item.Items %} 接着循环遍历当前字段的所有可选值（如“公寓”、“别墅”）。
      • val.Label 会显示该选项的文本（如“公寓”）。
      • val.Link 是最关键的部分，它会生成一个包含当前筛选参数的URL。当用户点击这个链接时，页面URL就会更新，并带有相应的查询参数。
      • val.IsCurrent 是一个布尔值，表示当前选项是否已被选中。我们可以利用它来为选中的筛选条件添加active类名，以便通过CSS进行样式高亮显示，提升用户体验。

第二步：让文档列表响应筛选

当用户点击了archiveFilters生成的筛选链接后，页面URL会动态地带上相应的查询参数（例如 ?房屋类型=公寓）。此时，我们需要确保文档列表能够识别并根据这些参数更新显示结果。

安企CMS的archiveList标签在这方面表现得非常智能和便捷。当它用于生成分页列表（type="page"）时，会自动读取当前URL中的查询参数，并将其作为筛选条件应用到文档查询中。

以下是一个文档列表配合筛选功能的示例代码：

”`twig {# 文档列表代码 #}

{% archiveList archives with moduleId=“1” type=“page” limit=“10” %}

{% for item in archives %}
<div class="document-item">
    <a href="{{item.Link}}">
        <h4 class="document-title">{{item.Title}}</h4>
        <p class="document-description">{{item.Description|truncatechars:100}}</p>
        <div class="document-meta">
            <span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>阅读量：{{item.Views}}</span>
        </div>
    </a>
    {% if item.Thumb %}
    <a href="{{item.Link}}" class="document-thumb">
        <img alt="{{item.Title}}" src="{{item.Thumb}}">
    </a>
    {% endif %}
</div>
{% empty %}
<p>抱歉，没有找到符合条件的文档。</p>
{% endfor %}

{% endarchiveList %}

{# 分页代码，与archiveList的type="page"配合使用 #}
<div class="pagination-wrapper">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a class="pagination-link" href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间多页 #}
        {% for item in pages.Pages %}
        <a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {# 下一页 #}
        {% if pages.NextPage %}
        <a class="pagination-link" href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 尾页 #}
        <a class="pagination-link {%