在安企CMS中,要在文章列表页实现多条件筛选,例如根据“区域”、“户型”等自定义参数进行筛选,这需要我们巧妙地结合系统提供的“内容模型”功能,以及前端模板的“文档参数筛选标签”(archiveFilters)和“文档列表标签”(archiveList)。整个过程可以分为几个核心步骤,让我们一起来详细了解。

核心功能:自定义内容模型与参数

实现多条件筛选的基础,是为您的文章定义可筛选的自定义参数。安企CMS的“内容模型”功能正是为此而生。

第一步:在内容模型中定义筛选字段

首先,您需要进入安企CMS的后台管理界面,找到“内容管理”菜单下的“内容模型”。在这里,您可以管理系统内置的模型(如“文章模型”、“产品模型”),也可以创建新的内容模型。

点击您要编辑的模型(例如,如果您想在文章中添加“区域”、“户型”筛选,就选择“文章模型”进行编辑),或者创建一个新的内容模型。在模型编辑页面的“内容模型自定义字段”区域,您可以添加新的字段。以“区域”和“户型”为例:

  • 参数名: 填写用户友好的名称,如“区域”、“户型”。这会在后台编辑文章时显示。
  • 调用字段: 这是一个关键的标识符,您将在前端模板中使用它来引用这个字段。请使用英文小写字母,例如“region”和“houseType”。
  • 字段类型: 对于筛选功能,我们通常会选择“单项选择”、“多项选择”或“下拉选择”这几种类型。这些类型允许您预设一系列选项,供用户在发布文章时选择,也方便前端生成筛选条件。
  • 默认值: 如果您选择了上述的字段类型,这里就是设置具体选项的地方。每一行代表一个选项。例如,“区域”的默认值可以是:
    
    东城区
    西城区
    海淀区
    朝阳区
    
    “户型”的默认值可以是:
    
    一室一厅
    两室一厅
    三室两厅
    复式
    
  • 是否必填: 根据您的业务需求决定。

完成字段的添加和配置后,记得保存内容模型。

第二步:为文章填写自定义参数

当您完成了内容模型的字段定义后,接下来就是在发布或编辑文章时,为这些文章选择或填写相应的自定义参数。

进入“内容管理”菜单下的“发布文档”或“文档管理”,选择一篇文章进行编辑。在文章编辑页面的底部,您会看到一个名为“其他参数”的折叠区域。展开这个区域,您会看到刚才在内容模型中定义的自定义字段,例如“区域”和“户型”。

在这里,您可以根据文章的实际情况,选择或填写相应的“区域”和“户型”值。确保您的文章数据包含了这些自定义参数,这样前端才能正确地进行筛选。

在文章列表页实现多条件筛选

现在,我们已经准备好了后台数据,接下来就是如何在前端页面上把这些筛选条件呈现给用户,并让列表能够根据用户的选择进行过滤。

第三步:前端模板中呈现筛选条件

在您的文章列表页模板中(通常是{模型table}/list.html),您可以使用安企CMS提供的archiveFilters标签来自动生成筛选条件。

archiveFilters标签会根据您在内容模型中定义的自定义字段,自动生成包含筛选选项和对应链接的HTML结构。

{# 示例:在文章列表页呈现“区域”和“户型”的筛选条件 #}
<div>
    <h3>多条件筛选:</h3>
    {% archiveFilters filters with moduleId="1" allText="不限" %} {# moduleId="1" 假设为文章模型ID,allText为“全部”选项的文本 #}
        {% for item in filters %} {# filters变量会包含所有可筛选的自定义参数 #}
        <div class="filter-group">
            <span class="filter-label">{{item.Name}}: </span> {# 显示自定义参数的名称,如“区域” #}
            <ul class="filter-options">
                {% for val in item.Items %} {# 遍历每个参数下的所有选项 #}
                <li class="filter-item {% if val.IsCurrent %}active{% endif %}">
                    <a href="{{val.Link}}">{{val.Label}}</a> {# val.Link是点击该选项后跳转的URL,val.Label是选项的显示文本 #}
                </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    {% endarchiveFilters %}
</div>

代码解释:

  • {% archiveFilters filters with moduleId="1" allText="不限" %}:调用archiveFilters标签来获取筛选数据。moduleId指定了要筛选哪个内容模型的文章(这里假设文章模型的ID是1),allText是默认“不限”选项的显示文本。
  • {% for item in filters %}filters变量是一个数组,包含了所有您定义的可用于筛选的自定义字段(例如“区域”、“户型”)。item.Name就是“区域”、“户型”等字段名称,item.FieldName是其对应的调用字段(如“region”)。
  • {% for val in item.Items %}item.Items是当前自定义参数(如“区域”)下的所有可选值(如“东城区”、“西城区”)。
  • {{val.Link}}:这是关键!安企CMS会自动生成点击该选项后,带上相应筛选参数的URL。例如,如果点击“东城区”,链接可能是yourwebsite.com/article/list?region=东城区
  • {{val.Label}}:显示选项的文本,如“东城区”。
  • {% if val.IsCurrent %}active{% endif %}:用于判断当前筛选选项是否被选中,方便您添加CSS样式来高亮显示。

第四步:结合 archiveList 标签展示筛选结果

当用户在前端点击某个筛选条件时,页面URL会自动携带相应的参数(例如?region=东城区&houseType=两室一厅)。此时,您的文章列表标签archiveList会自动识别并使用这些URL参数来过滤显示文章。

您只需在模板中正常使用archiveList标签来展示文章列表,并结合分页标签即可。

”`twig {# 示例:显示根据筛选条件过滤后的文章列表 #}

<h2>筛选结果</h2>
{% archiveList archives with moduleId="1" type="page" limit="10" %} {# type="page"表示启用分页,limit设置每页显示数量 #}
    {% for item in archives %}
    <div class="article-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description}}</p>
        {# 可以在这里显示其他文章信息,包括自定义参数值 #}
        {% archiveParams params with id=item.Id sorted=true %} {# 获取当前文章的自定义参数 #}
            {% for param in params %}
                {% if param.FieldName == 'region' %} {# 例如只显示“区域”参数 #}
                    <span>区域: {{param.Value}}</span>
                {% elseif param.FieldName == 'houseType' %} {# 例如只显示“户型”参数 #}
                    <span>户型: {{param.Value}}</span>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
    </div>
    {% empty %}
    <p>抱歉,没有找到符合条件的文章。</p>
    {% endfor %}
{% endarchiveList %}

{# 分页代码 #}
<div class="pagination-area">
    {% pagination pages with show="5" %}
        {# 这里是分页链接的HTML结构,具体可根据tag-pagination.md文档进行设置 #}
        <a href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {% if pages.NextPage %}<a