如何在前台页面实现AnqiCMS文档参数筛选功能，帮助用户快速定位内容？
在内容日益丰富的网站上，如何帮助用户快速找到他们感兴趣的信息，是一项至关重要的运营挑战。用户常常需要根据特定的条件来筛选内容，而不是漫无目的地浏览。安企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则会根据过滤后的结果生成正确的分页链接，确保用户在筛选后也能正常翻页。
让筛选功能更友好
为了让您的筛选功能更加直观和易用，还有一些细节可以注意：
- 高亮当前选中项： 利用
val.IsCurrent属性，为用户当前选择