在内容日益丰富的网站上，如何帮助用户快速找到他们感兴趣的信息，是一项至关重要的运营挑战。用户常常需要根据特定的条件来筛选内容，而不是漫无目的地浏览。安企CMS（AnqiCMS）为此提供了强大的文档参数筛选功能，让您能够轻松在前台页面实现这一目标，极大提升用户体验和内容可发现性。

理解筛选功能背后的逻辑

在深入前台实现之前，我们先来简单了解一下安企CMS筛选功能的设计理念。它的核心在于“内容模型”与“自定义字段”。

安企CMS允许您根据业务需求创建不同的内容模型，比如“文章”、“产品”、“房产信息”等。在创建这些模型时，您可以为它们添加各种“自定义字段”。这些自定义字段就是我们实现筛选功能的基础。例如，如果您有一个“房产信息”模型，您可以添加“房屋类型”（如住宅、商铺）、“户型”（如一室一厅、两室两厅）、“面积范围”等字段。

这些自定义字段不仅能让您的内容结构更灵活，还能在后台发布文档时，为每篇文档填写详细的属性信息。重要的是，当您将字段类型设置为单选、多选或下拉选择时，系统会记录下您预设的选项值，这些选项值正是前台筛选时用户可以选择的条件。

在前台页面实现筛选：核心标签 archiveFilters

当后端的内容模型和自定义字段都设置妥当，并且文档也填充了这些参数后，我们就可以在前台页面动手了。安企CMS提供了一个非常实用的模板标签 archiveFilters，它能够智能地获取当前模型下所有可筛选的参数，并自动生成筛选链接。

想象一下，您正在运营一个房产信息网站。您希望用户能够根据“房屋类型”、“户型”、“区域”等条件来筛选房源。使用 archiveFilters 标签，您可以这样来组织您的筛选区域：

{# 假设我们正在房产信息模型的列表页，其moduleId为2 #}
<div>
    <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="{% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    {% endarchiveFilters %}
</div>

让我们来分解一下这段代码：

  • {% archiveFilters filters with moduleId="2" allText="不限" %}: 这是核心标签。

    • filters：我们给筛选结果集起的一个变量名，后续在循环中会用到。
    • moduleId="2"：告诉系统我们要获取的是ID为2的内容模型（例如“房产信息”）下的文档参数。这是非常关键的一步，确保筛选器只显示与当前内容模型相关的参数。
    • allText="不限"：这个参数定义了每个筛选组中“全部”或“不限”选项的显示文本。用户点击它可以清除当前筛选条件。

  • {% for item in filters %}: filters 变量是一个数组，其中每个 item 代表一个可筛选的参数组（例如“房屋类型”）。

    • {{item.Name}}：这会显示您在后台为自定义字段设置的中文名称，比如“房屋类型”或“户型”。

  • {% for val in item.Items %}: 每个参数组 item 内部，又有一个 Items 数组，其中每个 val 代表该参数下的一个具体筛选值（例如“住宅”、“商铺”）。

    • {{val.Label}}：显示具体的筛选值，比如“住宅”。
    • {{val.Link}}：这是AnqiCMS的智能之处！它会自动生成带有相应筛选参数的URL。用户点击这个链接，页面会带着这些参数刷新，并显示筛选后的内容。
    • {% if val.IsCurrent %}active{% endif %}：这是一个非常实用的判断，如果当前的 val 是用户已经选中的筛选条件，IsCurrent 会返回 true。您可以利用这个来给选中的筛选条件添加 active 类，以便通过CSS进行高亮显示，增强用户体验。

结合文档列表与分页功能

archiveFilters 标签本身只负责生成筛选条件，要让筛选生效并展示内容，还需要配合 archiveList 和 pagination 标签使用。

当用户点击了 archiveFilters 生成的筛选链接后，页面的URL中会自动包含类似 ?housetype=住宅&roomtype=两室两厅 这样的查询参数。此时，您的 archiveList 标签就派上用场了。只要您的 archiveList 设置了 type="page"，它就会智能地解析URL中的筛选参数，并根据这些参数从数据库中查询相应的文档。

例如，在您的列表页模板中，您可以这样使用 archiveList 和 pagination：

{# 房产文档列表 #}
<ul class="property-list">
    {% archiveList archives with moduleId="2" type="page" limit="10" %}
        {% for item in archives %}
        <li>
            <a href="{{item.Link}}">
                <h4>{{item.Title}}</h4>
                <p>{{item.Description}}</p>
                {# 这里可以显示更多文档信息，比如自定义字段 #}
                <p>户型：{% archiveDetail with name="户型" id=item.Id %}</p>
            </a>
        </li>
        {% empty %}
        <li>
            抱歉，没有找到符合条件的房源。
        </li>
        {% endfor %}
    {% endarchiveList %}
</ul>

{# 分页区域 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="{% if pages.FirstPage.IsCurrent %}current{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间页码 #}
        {% for item in pages.Pages %}
        <a class="{% if item.IsCurrent %}current{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
        {% endfor %}
        {# 下一页 #}
        {% if pages.NextPage %}
        <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 尾页 #}
        <a class="{% if pages.LastPage.IsCurrent %}current{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
    {% endpagination %}
</div>

这段代码与筛选条件无缝衔接，当筛选参数通过URL传递过来时，archiveList会自动进行数据过滤，而pagination则会根据过滤后的结果生成正确的分页链接，确保用户在筛选后也能正常翻页。

让筛选功能更友好

为了让您的筛选功能更加直观和易用，还有一些细节可以注意：

  1. 高亮当前选中项： 利用 val.IsCurrent 属性，为用户当前选择