作为一名资深的安企CMS网站运营人员,我深知如何通过精细化的内容呈现来满足用户需求。构建一个带有筛选条件的文章列表页面,尤其是在自定义属性上进行筛选,是提升用户体验、帮助用户快速找到所需信息的重要手段。安企CMS凭借其灵活的内容模型和强大的模板标签,让这一过程变得高效而直观。
构建一个按自定义属性筛选的文章列表页面,主要涉及以下几个核心环节:首先,在后台管理系统中定义和配置这些自定义属性;其次,在前端模板中利用安企CMS提供的标签来生成筛选条件的用户界面;最后,通过文章列表标签展示经过筛选的内容,并结合分页功能提供完整的浏览体验。
配置自定义内容模型与筛选属性
要实现按自定义属性筛选文章,第一步是在安企CMS后台定义这些自定义属性。安企CMS的“灵活的内容模型”是实现此功能的基础。
您需要导航至后台的“内容管理”模块,然后点击“内容模型”。在这里,您可以选择编辑现有的内容模型(例如“文章模型”),或者创建一个全新的内容模型以适应特定的业务需求。在内容模型的编辑界面中,您可以添加“内容模型自定义字段”。这些字段将作为您的文章的额外属性。
添加自定义字段时,需要明确“参数名”作为后台显示和管理的名称,“调用字段”作为前端模板中引用的唯一标识(建议使用英文小写字母,如houseType或region),以及最重要的“字段类型”。为了实现筛选功能,我们通常会选择“单项选择”、“多项选择”或“下拉选择”这几种类型。当选择这些类型时,您需要在“默认值”中逐行输入所有可能的选项(例如,对于房屋类型,您可以输入“住宅”、“商铺”、“公寓”等;对于区域,您可以输入“市中心”、“郊区”、“开发区”等)。这些预设的选项将直接用于前端的筛选条件生成。完成字段定义后,保存内容模型,并在发布或编辑文章时,为每篇文章选择或填写相应的自定义属性值。
构建前端筛选条件的用户界面
在定义好自定义属性并为文章添加了相应数据后,我们需要在文章列表页面模板中构建筛选功能。安企CMS提供了archiveFilters标签来方便地生成这些筛选条件。
首先,您需要确定您的文章列表页面对应的模板文件。根据安企CMS的“模板制作的目录和模板”约定,这通常是位于/template/您的模板目录/{模型table}/list.html的文件。在该模板中,您可以使用archiveFilters标签来获取和渲染筛选条件。
例如,如果您想为模型ID为1(通常是文章模型)的文档生成筛选条件,您可以这样使用archiveFilters标签:
{# 参数筛选代码区域 #}
<div>
<div class="filter-title">筛选条件:</div>
{% archiveFilters filters with moduleId="1" allText="不限" %}
{% for item in filters %}
<ul class="filter-group">
<li class="filter-name">{{item.Name}}: </li>
{% for val in item.Items %}
<li class="filter-item {% if val.IsCurrent %}active{% endif %}">
<a href="{{val.Link}}">{{val.Label}}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
{% endarchiveFilters %}
</div>
在这段代码中,moduleId="1"指定了我们希望为文章模型生成筛选器。allText="不限"则设置了每个筛选组的“全部”选项的显示文本。filters变量包含了所有可筛选的自定义属性组,每个item代表一个自定义属性(如“房屋类型”)。item.Items是该属性下的所有可选值(如“住宅”、“商铺”)。val.Link会自动生成带有相应筛选参数的URL,点击即可提交筛选请求。val.IsCurrent则用于判断当前选项是否被选中,以便在界面上高亮显示。通过这样的结构,用户可以清晰地看到所有筛选维度及其可选值,并通过点击链接进行筛选。
展示经过筛选的文章列表与分页
筛选条件生成后,接下来是展示实际的文章列表。安企CMS的archiveList标签能够智能地识别URL中的筛选参数,并返回相应过滤后的文章。
在同一个列表页模板中,紧接着筛选条件的代码,您可以添加archiveList标签来展示文章。当用户点击筛选链接时,页面URL会携带自定义属性参数,archiveList标签会自动读取这些参数并进行内容筛选,无需额外编码处理:
{# 文章列表区域 #}
<div class="article-list-container">
{% archiveList archives with moduleId="1" type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<a href="{{item.Link}}">
<h3 class="article-title">{{item.Title}}</h3>
{% if item.Thumb %}
<img class="article-thumb" alt="{{item.Title}}" src="{{item.Thumb}}">
{% endif %}
<p class="article-description">{{item.Description}}</p>
<div class="article-meta">
<span class="category-name">所属分类:{% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span class="publish-date">发布日期:{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span class="views-count">阅读量:{{item.Views}}</span>
</div>
</a>
</div>
{% empty %}
<div class="no-content-message">
抱歉,该筛选条件下暂无文章内容。
</div>
{% endfor %}
{% endarchiveList %}
{# 分页代码区域 #}
<div class="pagination-container">
{% pagination pages with show="5" %}
<a class="pagination-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">首页</a>
{% if pages.PrevPage %}
<a class="pagination-link" href="{{pages.PrevPage.Link}}">上一页</a>
{% endif %}
{% for item in pages.Pages %}
<a class="pagination-link {% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
{% endfor %}
{% if pages.NextPage %}
<a class="pagination-link" href="{{pages.NextPage.Link}}">下一页</a>
{% endif %}
<a class="pagination-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}
</div>
</div>
在archiveList标签中,moduleId="1"再次指定了文章模型。type="page"表示这是一个需要分页的列表,而limit="10"则设置了每页显示的文章数量。archives变量包含了当前页的所有文章数据,您可以循环遍历并根据item中的字段来展示文章标题、链接、描述、缩略图、发布时间等信息。
同时,我们结合使用了pagination标签来生成分页导航。pages变量包含了分页所需的所有信息,包括总页数、当前页、首页、末页、上一页、下一页以及中间的页码列表。show="5"参数控制了中间页码链接的显示数量。用户可以通过这些链接在筛选结果中进行翻页浏览。
通过以上步骤,您就能在安企CMS上成功构建一个功能完善、用户友好的带有自定义属性筛选条件的文章列表页面。这不仅提升了网站内容的组织性,也极大地改善了用户查找信息的效率。
常见问题解答
Q1: 我定义了自定义属性,但archiveFilters标签却没有显示这些筛选条件,这是为什么?
A: 首先请确保您在“内容模型”中添加自定义字段时,将其“字段类型”设置为“单项选择”、“多项选择”或“下拉选择”。这三种类型的数据是archiveFilters标签能够识别并生成筛选条件的。其次,请确认您的文章确实已经填写并保存了这些自定义属性的值,并且archiveFilters标签的moduleId参数与您文章所属的模型ID一致。
Q2: 筛选条件链接点击后页面没有变化,或者文章列表没有按照筛选条件更新,该如何排查?
A: 出现这种情况,您需要检查几点。首先,确认您的网站伪静态规则已正确配置,因为筛选链接通常会以URL查询参数的形式呈现(例如?region=cityCenter),如果伪静态配置不当,这些参数可能无法被正确解析。您可以检查help-plugin-rewrite.md文档进行伪静态规则的确认。其次,确保在archiveList标签中,type参数设置为"page",因为只有在分页模式下,archiveList才会自动处理URL中的筛选参数。最后,如果问题依然存在,检查浏览器开发者工具的网络请求,看筛选链接是否正确发出以及后端返回的数据是否符合预期。
Q3: 如何让自定义筛选条件同时支持多选?
A: 安企CMS的archiveFilters标签生成的筛选链接会基于单个值进行筛选。如果您在内容模型中设置的字段类型是“多项选择”,那么在前端模板中,用户通常会点击一个筛选值来应用该条件。若要实现类似“多选”的复杂筛选逻辑(例如同时筛选“住宅”和“公寓”),这通常需要在前端通过JavaScript捕获用户的多个选择,然后动态构建包含多个参数的URL(例如?houseType=住宅&houseType=公寓),或者将多个选择值编码为一个参数(例如?houseType=住宅,公寓),然后提交给后台。安企CMS的archiveList标签能够处理URL中带有多个同名字段参数的查询,您只需确保前端生成的URL格式正确即可。