在安企CMS(AnQiCMS)中,管理和展示大量内容时,我们常常需要超越简单的分类和标签,实现更精细化的内容筛选。例如,一个房产网站可能需要按“户型”、“区域”、“价格区间”筛选房源;一个电商网站则可能需要按“颜色”、“尺寸”、“品牌”来筛选商品。AnQiCMS 提供了强大的自定义参数功能,让实现这种高级筛选变得非常直观和高效。
下面,我们将逐步了解如何在AnQiCMS中,通过自定义参数来筛选和显示文档列表。
第一步:定义您的自定义内容模型和参数(后台操作)
一切内容的筛选都源于对内容的细致定义。在AnQiCMS中,这意味着您需要首先在后台为您的内容创建或修改内容模型,并添加所需的自定义参数。
- 进入内容模型管理: 登录AnQiCMS后台,导航至“内容管理” -> “内容模型”。这里列出了您网站所有的内容模型,例如默认的“文章模型”和“产品模型”,您也可以根据业务需求创建新的模型。
- 添加自定义字段: 选择您希望添加筛选参数的内容模型(例如“产品模型”),点击“修改”进入模型详情。在“内容模型自定义字段”区域,您可以添加新的字段。
- 参数名: 这是字段的中文显示名称,例如“户型”、“颜色”。
- 调用字段: 这是在模板中引用该字段时使用的英文名称,例如“housingType”、“color”。
- 字段类型: AnQiCMS提供了多种字段类型,对于筛选功能,尤其推荐使用“单项选择”、“多项选择”或“下拉选择”。这些类型允许您预设可供用户选择的筛选值(例如,户型的“一居室”、“两居室”等,颜色的“红色”、“蓝色”等)。
- 默认值: 对于选择类型的字段,您可以在这里设置具体的选项值,每行一个。这些值将直接成为前端筛选器中的选项。
- 是否必填: 根据您的业务需求设置。
通过这些设置,您就为内容模型构建了丰富的属性维度,为后续的筛选奠定了基础。
第二步:为文档录入自定义参数值(后台操作)
自定义参数定义完成后,您在发布或编辑属于该内容模型的文档时,就可以为这些自定义字段录入具体值了。
- 发布或编辑文档: 导航至“内容管理” -> “文档管理”,点击“添加新文档”或选择现有文档进行“编辑”。
- 填写自定义参数: 在文档编辑页面,选择正确的“所属分类”(该分类必须属于您在第一步中修改过内容模型)。页面会自动加载该模型的所有自定义字段。您会看到之前定义的自定义参数(例如“户型”、“颜色”),并根据字段类型选择或输入相应的值。
确保内容的自定义参数填写完整且准确,这是前端筛选器能够正常工作的数据基础。
第三步:在前端模板中实现自定义参数筛选(模板设计)
现在,内容模型和文档数据都已准备就绪,接下来就是在前端模板中,将这些自定义参数转化为用户可操作的筛选界面。AnQiCMS提供了专门的模板标签来简化这一过程。
利用
archiveFilters标签生成筛选器UI:archiveFilters标签用于生成一系列筛选条件的链接。它会读取当前页面或指定模型下的自定义参数,并为每个参数的每个可能值生成一个可点击的筛选链接。使用方法示例:
<div class="filter-area"> <h3>筛选条件:</h3> {% archiveFilters filters with moduleId=1 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="filter-option {% if val.IsCurrent %}active{% endif %}"> <a href="{{ val.Link }}">{{ val.Label }}</a> {# 例如:一居室 #} </li> {% endfor %} </ul> </div> {% endfor %} {% endarchiveFilters %} </div>moduleId:指定您希望生成筛选器的内容模型ID(例如,1代表文章模型,2代表产品模型)。allText:设置“全部”或“不限”选项的显示文本。filters变量:它是一个数组,每个元素代表一个自定义参数(例如“户型”、“颜色”)。item.Name:自定义参数的名称(如“户型”)。item.Items:该参数下的所有筛选选项(如“一居室”、“两居室”)。val.Label:每个筛选选项的显示文本。val.Link:最重要的部分!这是AnQiCMS自动生成的带有筛选参数的URL。当用户点击时,页面会刷新并应用该筛选条件。val.IsCurrent:一个布尔值,表示当前选项是否被选中,可用于添加CSS样式(例如active类)来高亮显示。
利用
archiveList标签显示筛选后的文档列表:archiveList标签用于获取并显示文档列表。当用户的URL中包含由archiveFilters生成的筛选参数时,archiveList会自动识别这些参数,并只返回符合条件的文档。使用方法示例:
<div class="document-list"> {% archiveList archives with type="page" moduleId=1 limit="10" %} {% for item in archives %} <div class="document-card"> <h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4> <p>{{ item.Description }}</p> {# 还可以显示自定义参数 #} {% archiveParams docParams with id=item.Id sorted=false %} {% if docParams.housingType %}<span>户型: {{ docParams.housingType.Value }}</span>{% endif %} {% if docParams.color %}<span>颜色: {{ docParams.color.Value }}</span>{% endif %} {% endarchiveParams %} <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span> </div> {% empty %} <p>抱歉,没有找到符合条件的文档。</p> {% endfor %} {% endarchiveList %} {# 分页标签,确保筛选条件下也能正常分页 #} {% pagination pages with show="5" %} {# 分页UI代码,参考pagination标签文档 #} {% endpagination %} </div>type="page":表示这是一个需要分页的列表。moduleId:同样指定内容模型ID,确保获取正确类型的文档。- 关键点: 您无需在
archiveList标签中显式地传递自定义筛选参数。只要用户点击archiveFilters生成的链接,URL中就会包含如?color=red&housingType=two_bedroom这样的查询参数,archiveList会自动读取并应用这些参数进行数据库查询。
通过以上三个步骤,您就可以在AnQiCMS中轻松地构建高度定制化的文档筛选功能了。这不仅能够帮助用户快速找到他们感兴趣的内容,也能显著提升网站的用户体验和内容的可用性。
常见问题(FAQ)
Q1:我可以同时筛选多个自定义参数吗?
A1:是的,完全可以。AnQiCMS 的 archiveFilters 标签生成的筛选链接会自动处理多参数组合。当用户选择一个参数(例如“户型:两居室”)后,URL中会带上相应的查询参数。如果用户再选择另一个参数(例如“颜色:红色”),系统会自动在现有URL参数的基础上添加或修改颜色参数,形成类似 ?housingType=two_bedroom&color=red 的URL。archiveList 标签会读取URL中的所有自定义参数进行组合筛选,从而显示同时满足多个条件的内容。
Q2:自定义参数筛选对SEO友好吗?
A2:AnQiCMS的自定义参数筛选功能在设计时考虑了SEO友好性。archiveFilters 生成的链接通常是标准的GET请求URL(例如 yourdomain.com/category/list?housingType=two_bedroom&color=red)。搜索引擎可以抓取这些带有参数的URL,从而索引到筛选后的内容。此外,通过提供更精准的筛选,用户能够更快找到所需信息,这间接提升了用户体验,而良好的用户体验是SEO的重要加分项。对于重要的筛选组合页面,您还可以考虑通过伪静态规则进行优化。
Q3:我定义的自定义参数除了筛选,还能在文档详情页显示吗?
A3:当然可以。您在内容模型中定义的自定义参数不仅可用于筛选,也可以在文档的详情页中展示。在文档详情页的模板(通常是detail.html)中,您可以使用 archiveDetail 标签来获取单个自定义参数的值,或者使用 archiveParams 标签来循环显示文档所有的自定义参数。例如,要显示名为 color 的自定义参数值,您可以这样写:`{% archiveDetail with name=“color