安企CMS如何实现网站站内搜索并显示文章搜索结果?

在网站运营中,站内搜索功能扮演着至关重要的角色。它不仅能帮助访问者快速找到所需信息,提升用户体验,还能通过分析搜索数据洞察用户需求,优化内容策略。安企CMS作为一个高效的内容管理系统,提供了一套直观而强大的机制来实现网站的站内搜索,并灵活地展示搜索结果。

安企CMS的站内搜索功能设计得非常实用。当用户在您的网站上输入关键词进行搜索时,系统会将其导向一个专门的搜索结果页面。这个页面通常由您在模板中预先定义,它负责接收用户的查询,并根据查询内容从网站的所有文章(或特定内容模型)中检索相关信息,最终以结构化的方式呈现给用户。

一、准备搜索模板文件

要实现站内搜索,首先需要在您的安企CMS主题模板中准备一个名为 search/index.html 的文件。这个文件是安企CMS识别并用于处理所有搜索请求的默认页面。您可以根据自己的设计需求,在这个文件中构建搜索框、搜索结果列表以及分页导航等元素。

design-director.md 文档中,提到了 search/index.html 是默认的搜索页模板,这意味着所有发往 /search 路径的请求都将由这个模板来渲染。

二、构建用户搜索表单

让用户能够输入关键词是搜索功能的第一步。这通常通过一个HTML表单来实现。这个表单需要指定提交方式为 GET,并将搜索请求的 action 指向 /search 路径。核心的输入框应命名为 q,安企CMS的 archiveList 标签会自动识别这个参数作为搜索关键词。

为了提升用户体验,您还可以让搜索框在用户提交后保留他们输入的关键词,这样用户就能知道自己之前搜索了什么。这可以通过 {{urlParams.q}} 这个模板变量轻松实现。

以下是一个简单的搜索表单示例:

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

当用户输入关键词并提交表单后,例如搜索“安企CMS”,URL可能会变成 /search?q=安企CMS。安企CMS的模板系统会捕捉到 q 参数的值,并将其传递给后续用于显示结果的标签。

三、显示文章搜索结果列表

search/index.html 模板中,核心任务是显示与用户搜索关键词相关的文章列表。安企CMS提供了强大的 archiveList 标签来完成这项工作。

archiveList 标签的 type="page" 参数至关重要,它表明我们期望一个支持分页的文章列表。当您在搜索页使用 archiveList 且URL中包含 q 参数时,archiveList 标签会自动读取 q 的值,并以此作为关键词来筛选文章。它会匹配文章的标题、描述以及正文等相关字段,将包含关键词的文章呈现出来。

您可以从 archiveList 标签获取每篇文章的详细信息,例如:

  • item.Title:文章标题
  • item.Link:文章链接
  • item.Description:文章简介
  • item.CreatedTime:文章发布时间(可使用 stampToDate 格式化)
  • item.Views:文章浏览量
  • item.Thumb:文章缩略图

当没有搜索结果时,archiveList 标签的 {% empty %} 块可以用来显示友好的提示信息。

以下是显示搜索结果列表的示例代码:

{# page 搜索指定关键词分页列表展示 #}
<div>
{% archiveList archives with type="page" limit="10" %} {# limit 参数控制每页显示的文章数量 #}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span> {# 显示文章所属分类 #}
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span> {# 格式化发布时间 #}
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %} {# 如果有缩略图,则显示 #}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        抱歉,没有找到与您的搜索词相关的文章。请尝试其他关键词。
    </li>
    {% endfor %}
{% endarchiveList %}
</div>

四、处理搜索结果分页

如果搜索结果数量较多,分页功能就必不可少。安企CMS的 pagination 标签与 archiveList type="page" 标签配合使用,可以方便地构建出完善的分页导航。

pagination 标签会根据 archiveList 返回的总文章数和每页显示数量,自动生成“首页”、“上一页”、“下一页”以及中间页码的链接。

pagination 标签提供了多个有用的字段,例如:

  • pages.TotalItems:总文章数
  • pages.TotalPages:总页数
  • pages.CurrentPage:当前页码
  • pages.FirstPage:首页链接对象
  • pages.PrevPage:上一页链接对象
  • pages.NextPage:下一页链接对象
  • pages.LastPage:末页链接对象
  • pages.Pages:一个包含中间页码链接的数组

以下是分页导航的示例代码:

    {# 分页代码 #}
    <div>
        {% pagination pages with show="5" %} {# show 参数控制中间页码显示的数量 #}
            {# 首页 #}
            <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" 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 class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">尾页</a>
        {% endpagination %}
    </div>

通过以上几个步骤,您就可以在安企CMS网站上搭建起一个功能完善、用户友好的站内搜索系统。整个过程无需复杂的编程,