在现代网站运营中,用户对于内容筛选的需求日益增长。无论是寻找特定价位的产品,还是查询某个地区的活动信息,一个支持多条件筛选的文章列表都能极大地提升用户体验和内容触达效率。安企CMS(AnQiCMS)凭借其灵活的内容模型和强大的模板标签,为网站运营者提供了实现这类复杂筛选功能的便捷方案。

构建多维内容的基石:内容模型的自定义字段

在安企CMS中,实现文章列表的多条件筛选,其核心在于灵活运用“内容模型”功能。内容模型允许我们根据网站的业务需求,为不同类型的内容(例如:文章、产品、活动、房源等)定义独特的字段。

假设我们需要为房产信息网站实现按“价格”和“地域”筛选文章(房源列表),我们首先需要在安企CMS后台的内容模型中进行配置。您可以创建一个名为“房源”的内容模型(如果尚未创建),然后为其添加自定义字段:

  • 价格(Price):这个字段可以设置为“数字”类型,方便存储具体的房源价格。如果需要实现价格区间筛选,我们可以在模板中配合自定义的输入框实现。
  • 地域(Region):这个字段则可以设置为“单项选择”或“下拉选择”类型。在默认值中,您可以列出所有支持的地域选项,如“上海”、“北京”、“广州”等。这样,当发布房源信息时,编辑人员只需从预设列表中选择即可。

除了价格和地域,您还可以根据需要添加更多字段,如“户型”、“面积”、“租赁方式”等,它们都可以通过不同的字段类型(如多项选择、单行文本)来满足,为后续的筛选奠定数据基础。

灵活呈现筛选选项:archiveFilters 标签的应用

有了自定义字段作为数据支撑,接下来就需要将这些筛选条件呈现在网站前台,供用户选择。安企CMS为此提供了archiveFilters模板标签。

archiveFilters标签能够自动读取您在内容模型中定义的、可用于筛选的自定义字段,并根据这些字段生成相应的筛选选项和对应的URL链接。例如,如果您为“房源”模型定义了“地域”字段,archiveFilters就能生成一个包含“上海”、“北京”等地域选项的列表。

在模板中使用archiveFilters时,您可以通过moduleId参数指定要筛选的模型,确保其作用于正确的内容类型。同时,allText参数可以自定义“全部”或“不限”等选项的显示文本,提升用户体验。archiveFilters标签会输出一个数组对象,其中包含了每个筛选条件的名称、字段名以及其下的具体选项(包括选项的文本、点击后的链接以及是否当前选中状态),方便您在前端构建筛选UI。

示例代码片段 (用于生成筛选UI):

{# 假设我们有一个房源模型,moduleId为3 #}
<div>
    <p>筛选条件:</p>
    {% archiveFilters filters with moduleId="3" 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>

这段代码会遍历所有可筛选的自定义字段,并为每个字段及其选项生成一个列表,当用户点击某个选项时,页面URL会携带相应的筛选参数。

精准获取筛选结果:archiveList 标签的强大组合

当用户点击了筛选条件后,页面URL中会包含类似于?region=上海&price_min=1000&price_max=2000的参数。此时,安企CMS的archiveList模板标签便发挥了作用。

archiveList标签是用于获取文章(或任何文档类型)列表的核心标签。当其type参数设置为"page"(表示这是一个分页列表)时,它会自动解析当前URL中的所有查询参数,包括关键词搜索(q参数)和您自定义的筛选参数(如regionprice_min等),并根据这些参数从数据库中获取匹配的内容。

这意味着,您无需编写复杂的后端代码来处理筛选逻辑,archiveList标签会自动完成这一过程。它会根据URL参数动态调整查询,返回符合所有条件的文章列表。

示例代码片段 (结合筛选UI与列表显示):

”`twig {# 假设这是房源列表页面,moduleId为3 #}

{# 筛选条件UI部分,如上所示 #}

<p>筛选条件:</p>
{% archiveFilters filters with moduleId="3" 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 %}

{# 文章列表显示部分 #}

{% archiveList archives with moduleId="3" type="page" limit="10" %}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        {# 假设您有价格和地域的自定义字段,可以直接通过item.Price和item.Region调用 #}
        <p>价格: {{item.Price}} | 地域: {{item.Region}}</p>
        <span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
    </div>
    {% empty %}
    <p>抱歉,没有找到符合条件的房源信息。</