当我们的网站内容日益丰富,如何让访客在海量信息中迅速找到他们需要的内容,无疑是提升用户体验和内容营销效果的关键。安企CMS(AnQiCMS)深知这一点,因此提供了强大而灵活的机制,帮助我们轻松实现文章列表或搜索结果页的关键词搜索与内容筛选功能。

这项功能的实现,主要围绕安企CMS的核心模板标签展开,让我们能够将后台管理的内容,通过前端模板的精妙设计,转化为用户友好的互动界面。

内容展示的核心:文档列表

在安企CMS中,无论是文章、产品还是其他自定义内容模型,它们的列表展示都离不开archiveList这个强大的模板标签。它是内容呈现的基石,能根据我们的需求灵活地调取和组织内容。

当我们希望在页面上呈现一个内容列表时,通常会这样使用它:

{% archiveList archives with type="page" limit="10" %}
    {# 在这里循环展示每一篇文章或产品,例如: #}
    {% for item in archives %}
        <a href="{{item.Link}}">{{item.Title}}</a>
        <p>{{item.Description}}</p>
    {% endfor %}
{% endarchiveList %}

这里,type="page"表示我们希望这个列表是可分页的,而limit="10"则控制了每页显示的内容数量。archives是我们给内容列表起的变量名,方便在for循环中调用。

实现关键词搜索功能

让访客能够通过输入关键词来查找内容,是提升网站实用性的重要一步。安企CMS在archiveList标签中内置了对搜索关键词的支持。

我们只需要在页面上放置一个简单的搜索表单,并将搜索关键词通过URL参数q传递给服务器。安企CMS会智能地识别这个q参数,并在archiveList标签获取内容时,自动筛选出标题中包含该关键词的内容。

一个典型的搜索表单可能像这样:

<form method="get" action="/search">
    <input type="text" name="q" placeholder="输入关键词搜索" value="{{urlParams.q}}">
    <button type="submit">搜索</button>
</form>

这里,action="/search"通常指向我们网站的搜索结果页,name="q"则是约定好的关键词参数。value="{{urlParams.q}}"的用法很巧妙,它能让用户在搜索后,搜索框中依然保留之前输入的关键词,提供更好的用户体验。当这个表单提交后,例如输入“安企CMS”,URL可能变成/search?q=安企CMS。此时,我们搜索结果页的archiveList标签会自然而然地过滤出相关内容。

深度优化:内容筛选与分类

除了直接的关键词搜索,更精细化的内容筛选能帮助访客快速缩小范围,找到最匹配的需求。这通常基于内容的分类、标签或自定义属性来实现。

安企CMS的archiveFilters标签,正是为构建这类筛选界面而设计的。它能够根据后台内容模型中定义的自定义字段,动态生成筛选选项。

想象一下,你有一个产品模型,其中定义了“颜色”、“尺寸”等自定义字段。通过archiveFilters标签,你就可以在前端展示这些字段的筛选选项:

{% archiveFilters filters with moduleId="1" allText="全部" %}
    {% for item in filters %}
        <div>
            <span>{{item.Name}}: </span>
            {% for val in item.Items %}
                <a class="{% if val.IsCurrent %}active{% endif %}" href="{{val.Link}}">{{val.Label}}</a>
            {% endfor %}
        </div>
    {% endfor %}
{% endarchiveFilters %}

在这段代码中:

  • moduleId="1"指定了我们希望获取哪个内容模型(例如文章模型ID为1)的筛选参数。
  • allText="全部"设置了“全部”选项的显示文本。
  • filters变量会包含所有可筛选的参数组,每个item代表一个自定义字段(如“颜色”)。
  • item.Items则包含了该字段的所有可选值(如“红色”、“蓝色”)。
  • val.Link是安企CMS自动生成的筛选链接,点击后,URL会带上相应的筛选参数。
  • val.IsCurrent用于判断当前选项是否被选中,方便我们为选中项添加active样式。

当访客点击某个筛选条件时,URL中会带上相应的参数(例如/list?color=red&size=large),而前面提到的archiveList标签在获取内容时,便能自动识别并应用这些筛选条件,展示出精确匹配的结果。

除了自定义字段筛选,我们还可以通过categoryId参数在archiveList中直接筛选指定分类的内容,或者利用tagDataList标签来展示特定标签下的文章,这些都是内容筛选的有效手段。

构建用户友好的筛选界面

一个设计良好、直观易用的筛选界面,能极大提升用户体验。结合archiveFiltersarchiveList,我们可以创建一个功能完善的筛选页面。

通常,我们会将archiveFilters标签放置在页面顶部或侧边栏,用于展示筛选选项。而archiveList标签则用于展示经过筛选后的内容列表。两者协同工作,共同响应URL中的查询参数。

例如,在一个产品列表页,访客可以先通过archiveFilters选择“颜色”为“蓝色”,“尺寸”为“大号”,页面刷新后,archiveList就会自动展示出所有蓝色大号的产品。同时,pagination标签也能确保分页功能在筛选结果中正常工作。

分页展示:大型列表的必备

对于任何可能产生大量结果的列表,分页功能都是必不可少的。安企CMS的pagination标签与archiveList紧密配合,能够优雅地处理分页逻辑。

archiveList被设置为type="page"时,页面上就可以使用pagination标签来渲染分页导航。它会提供“首页”、“上一页”、“下一页”、“尾页”以及中间页码的链接,并且能自动判断当前页,并为其添加active状态。

{% pagination pages with show="5" %}
    <a href="{{pages.FirstPage.Link}}">首页</a>
    {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">上一页</a>
    {% endif %}
    {% for item in pages.Pages %}
        <a class="{% if item.IsCurrent %}active{% endif %}" href="{{item.Link}}">{{item.Name}}</a>
    {% endfor %}
    {% if pages.NextPage %}
        <a href="{{pages.NextPage.Link}}">下一页</a>
    {% endif %}
    <a href="{{pages.LastPage.Link}}">尾页</a>
{% endpagination %}

通过pages变量,我们可以获取到当前分页的所有信息,例如总条数、总页码、当前页