在网站运营中,如何让用户快速找到他们需要的信息,是一个提升用户体验和转化率的关键。当网站内容种类繁多,且每种内容都有多种属性可供选择时,提供一套灵活的多条件筛选功能就显得尤为重要。安企CMS(AnQiCMS)提供了强大的 archiveFilters 标签,能够帮助我们轻松实现内容列表的动态筛选,让你的网站内容动起来。

为什么需要多条件筛选?

想象一下,你正在浏览一个房产网站,你可能不仅想看“住宅”,还想进一步筛选“三室两厅”或者“有停车位”的房源。如果没有多条件筛选,你可能需要不断地点击、返回,甚至大海捞针般地寻找,这无疑会大大降低你的耐心。

多条件筛选的优势在于:

  • 提升用户体验: 用户可以根据自己的具体需求,快速缩小搜索范围,精准定位目标内容。
  • 增强内容发现: 隐藏在深层的内容通过不同维度的组合筛选,更容易被用户发现。
  • 优化SEO表现: 动态生成的筛选结果页通常拥有更具体的URL和内容组合,如果配合伪静态规则,有利于搜索引擎抓取和理解,为网站带来更多长尾流量。

archiveFilters 标签的魅力

在安企CMS中,archiveFilters 标签正是解决这一痛点的利器。它专为文档列表页面设计,能够根据内容模型中定义的自定义字段,自动生成筛选条件,并结合文档列表(archiveList)标签,实现内容的动态显示。

要使用这个标签,你需要先确保你的内容模型中已经定义了可供筛选的自定义字段。例如,如果你有一个“房产”内容模型,可以添加“房屋类型”、“户型”、“特色配置”等字段,并为这些字段设置可供选择的选项(如“住宅”、“公寓”;“一室”、“两室”;“精装修”、“带家具”等)。这些字段就是 archiveFilters 标签能够识别并生成筛选条件的基础。

archiveFilters 标签的基本用法非常直观:

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {# 循环输出筛选条件 #}
{% endarchiveFilters %}

这里,moduleId 参数指定了你想为哪个内容模型的文档生成筛选条件,例如 moduleId="1" 可能代表文章模型,moduleId="2" 可能代表产品模型。allText 参数则允许你自定义“全部”这个选项的显示文字,如果设置为 false 则不显示。

深入理解 filters 变量结构

当你在 archiveFilters 标签块内使用 filters 变量时,它实际上是一个包含多个筛选组的数组对象。每一个筛选组(item)都代表了一个在内容模型中定义的自定义字段,它拥有以下属性:

  • Name:这个筛选条件的显示名称,比如“房屋类型”、“户型”。
  • FieldName:这个筛选条件对应的自定义字段的内部标识名,例如 house_type
  • Items:这是最重要的部分,它是一个包含具体筛选选项的数组。每个选项(val)又包含:
    • Label:筛选选项的显示名称,如“住宅”、“公寓”。
    • Link:点击这个选项后跳转到的URL,这个URL会包含当前筛选条件和其他已选条件,实现动态更新。
    • IsCurrent:一个布尔值,表示当前选项是否处于选中状态,方便模板中添加高亮样式。

如何在模板中构建动态筛选列表

现在,让我们结合 archiveListpagination 标签,看看如何在模板中完整实现一个多条件筛选的文档列表。

第一步:构建筛选条件区域

在你的列表页模板(例如 article/list.htmlproduct/list.html)中,首先使用 archiveFilters 标签生成筛选条件。

<div class="filter-area">
    <h3>筛选条件</h3>
    {% archiveFilters filterGroups with moduleId="1" allText="不限" %}
        {% for item in filterGroups %}
            <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>

在上面的代码中,filterGroups 是我们为 archiveFilters 标签定义的变量名。通过两层 for 循环,我们首先遍历了所有的筛选组(如“房屋类型”、“户型”),然后在每个组内遍历其所有的筛选选项(如“住宅”、“公寓”)。val.Link 会自动生成包含筛选参数的URL,val.IsCurrent 则用于为当前选中的筛选选项添加 active 类,提供视觉上的反馈。

第二步:展示动态筛选后的文档列表

接下来,在同一个模板中,你需要使用 archiveList 标签来展示文档列表。关键在于,archiveList 标签在 type="page" 模式下,会智能地读取当前URL中的所有筛选参数(包括 archiveFilters 标签生成的参数),并自动将这些参数应用到文档查询中。

<div class="document-list">
    {% archiveList archives with moduleId="1" type="page" limit="10" %}
        {% for doc in archives %}
            <div class="document-item">
                <a href="{{ doc.Link }}">
                    <h4>{{ doc.Title }}</h4>
                    <p>{{ doc.Description|truncatechars:100 }}</p>
                    <span class="views">阅读量:{{ doc.Views }}</span>
                </a>
            </div>
        {% empty %}
            <p>很抱歉,没有找到符合条件的文档。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

这里,archives 是我们为 archiveList 标签定义的变量名。type="page" 表明这是一个分页列表,limit="10" 则设定了每页显示10条文档。当用户点击筛选条件时,页面URL会发生变化,archiveList 会根据新的URL参数自动重新查询并显示符合条件的文档。

第三步:添加分页功能

为了让用户能浏览所有的筛选结果,还需要结合 pagination 标签。这个标签也会自动适应 archiveFilters 生成的URL,确保分页链接携带正确的筛选参数。

<div class="pagination-area">
    {% pagination pages with show="5" %}
        <ul>
            {% if pages.PrevPage %}
                <li><a href="{{ pages.PrevPage.Link }}">上一页</a></li>
            {% endif %}
            {% for pageItem in pages.Pages %}
                <li {% if pageItem.IsCurrent %}class="active"{% endif %}>
                    <a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
                </li>
            {% endfor %}
            {% if pages.NextPage %}
                <li><a href="{{ pages.NextPage.Link }}">下一页</a></li>
            {% endif %}
        </ul>
    {% endpagination %}
</div>

这里,pagespagination 标签定义的变量名。它会生成包含“上一页”、“下一页”以及中间页码的链接,这些链接都会自动带上当前的所有筛选条件,保证用户在不同页面间切换时,筛选状态得以保留。

实际案例:房产列表筛选

在安企CMS的实际应用中,如果你的网站有一个房产列表页面,你可能希望用户可以根据“房屋类型”、“区域”、“价格区间”等条件进行筛选。

”`twig

<h3 class="