回到所有的课程
课程库

网站搜索

向Webflow站点添加一个搜索字段,自定义搜索结果页面的设计,并控制搜索结果中的内容。

本视频采用了旧的用户界面。更新版本即将到来!

站点搜索允许您在站点中添加搜索,这样您的访问者就可以找到他们想要的信息,并且您可以控制这种体验的外观和感觉。您还可以很容易地排除特定元素、页面甚至整个集合的内容,只需在复选框中打一个勾。

搜索对于大型内容驱动型网站尤其重要,例如:

  • 知识库和帮助中心
  • 博客或管理网站
  • 新闻出版物和媒体网站
网站搜索可在所有网站CMS托管或以上。在CMS和标准电子商务托管,手动驯鹿是可用的每24小时。在更高的主机层上,手动reindexing每小时可用一次。

网站搜索不会索引自定义代码中的内容.如果需要对自定义代码内容进行索引,请使用第三方搜索工具
在这节课中
  1. 添加搜索组件并设置其样式
  2. 样式您的搜索结果页面
  3. 索引和控制什么是“可搜索的”
  4. 常见问题

添加搜索组件并设置其样式

您将在Add面板中找到搜索组件,它位于Designer的左侧。

从Add面板中添加搜索组件。
从Add面板中添加搜索组件。

你会注意到搜索组件有三个部分:

  • 搜索(包装):父元素,包含搜索表单和提交按钮
  • 搜索输入:你的用户在哪里输入他们的搜索
  • 提交按钮(可选):一个提交搜索的按钮-如果你想要一个简单的“输入”来提交搜索,你可以隐藏这个按钮
搜索组件的默认结构。
搜索组件的默认结构。

一旦您将搜索组件添加到站点中,您就可以使用Webflow站点上任何其他元素的样式来设置它的样式。

搜索栏,样式。
搜索栏,样式。

您还可以自定义占位符文本,并将搜索栏设置为自动聚焦,从而在页面加载时自动将访问者的游标放在搜索字段中。

编辑你的占位符文本,让访问者了解如何搜索。
编辑你的占位符文本,让访问者了解如何搜索。

样式您的搜索结果页面

将搜索组件添加到站点后,您将看到搜索结果页面显示在页面选项卡下,实用程序的页面部分。

您的搜索结果页面位于页面面板的实用程序页面部分下。
您的搜索结果页面位于页面面板的实用程序页面部分下。

搜索结果页面的结构

当您第一次打开搜索结果页面时,您会注意到已经有一些基本的结构。容器元素将所有内容保存在适当的位置,在该元素中,有一个可选的搜索组件(如果人们没有看到他们要寻找的内容,可以尝试新的搜索)和一个结果列表,在样式方面,它的工作方式很像Collection Lists。

搜索结果页面的起点,填充了示例结果,让您在发布站点之前开始设计。
搜索结果页面的起点,填充了示例结果,让您在发布站点之前开始设计。

你可以随心所欲地改变这个页面的结构,以及样式,我们将在下面讨论。

样式的搜索结果

样式化搜索结果的工作原理与样式化集合列表非常相似,将应用于一个结果项的样式应用于该列表中的所有其他结果项。然而,搜索结果有一个基本的开始结构,并有一些其他的新控件。

需要知道
非托管网站和基本托管网站会在你发布的网站上显示搜索结果样本——你可以向客户展示,让他们了解他们的搜索体验会是什么样子。要看到真正的搜索结果,您需要添加CMS或企业托管到网站。

搜索结果结构

首先,你的搜索结果有一个基本的元素结构,你可以重新排列,重组,或删除你认为合适的:

  • 搜索标题(链接):该页面的标题,从页面的“页面设置”的“搜索”部分中设置为搜索结果标题的内容中提取。默认情况下,该标题充当到该页面的链接。
  • 页面URL(文本块):那一页的标题。
  • 代码片段(段):搜索词出现所在页面的上下文。您可以在“搜索结果设置”中控制此代码段的长度。或者,您可以选择将此段落连接到您可以在页面设置中设置的自定义描述。

网站搜索设置

您可以在所有站点的静态页面和集合页面的页面设置中控制搜索标题显示的内容。对于Collection Pages,可以从任何字段提取该内容,这与配置SEO和Open Graph设置的方式类似。

类似地,您可以为每个页面设置自定义搜索描述和搜索图像,或者从SEO描述和OG图像引入该内容。

在页面设置下控制搜索结果中显示的内容。
在页面设置下控制搜索结果中显示的内容。

显示内容“类型”

你可以使用搜索描述字段,可在搜索结果中添加其他信息。例如,假设你想向访问者展示什么类型通过在结果旁边显示博客文章类别来显示特定的搜索结果。

‍通过创造性地使用搜索描述字段,在搜索结果中显示附加信息。
在搜索结果中通过创造性地使用搜索描述字段来显示附加信息。

只需将类别名称添加到搜索描述字段,然后将搜索结果布局中的文本字段连接到搜索描述字段,然后按照您的意愿设置样式。

示例:使用这个新字段显示搜索结果的内容类型。
示例:使用这个新字段显示搜索结果的内容类型。

添加搜索结果缩略图

您还可以在页面设置(Page Settings)下设置搜索图像,就像设置OG图像一样。添加了搜索图像后,可以通过将图像元素连接到该搜索图像字段,将该图像添加到搜索结果中。还可以将搜索图像设置为div上的背景图像的源。

想要在搜索结果中添加图片?不是一个问题。

样式代码片段

除了像对任何其他文本进行样式化一样对代码片段的文本进行样式化之外,您还可以控制代码片段的长度(字符数量),并将高亮显示(它将在代码片段中显示加粗的搜索词)打开或关闭。

在搜索结果设置中设置结果数和代码段长度。
在搜索结果设置中设置结果数和代码段长度。

要对代码片段中的高亮显示设置样式,请在样式指南页面的富文本元素中对“All bold”的基本标记设置样式,这种样式将适用于搜索结果页面上的高亮显示词汇。

通过瞄准“所有粗体”标记来设置代码片段突出显示的样式。
通过瞄准“所有粗体”标记来设置代码片段突出显示的样式。

样式化您的“空”(或“无结果”)状态

就像表单有错误和提交状态,你可以设置样式一样,你的搜索结果页面有一个“无结果”状态,你可以自定义,以减轻用户搜索你的网站上没有的东西时的影响。(例如,你可能想在这里添加一个插图,以及一个回到你的主页的链接,以帮助他们重新定位自己)。

切换到“无结果”状态来设计无结果页面。
切换到“无结果”状态来设计无结果页面。

要自定义“无结果”状态的设计,请在“搜索结果设置”部分切换到“无结果”模式。从这里,您可以按您喜欢的任何方式定制设计。

片段的样式

除了像对任何其他文本进行样式化一样对代码片段的文本进行样式化之外,您还可以控制代码片段的长度(字符数量),并将高亮显示(它将在代码片段中显示加粗的搜索词)打开或关闭。

在搜索结果设置中设置结果数和代码段长度。
在搜索结果设置中设置结果数和代码段长度。

要对代码片段中的高亮显示设置样式,请在样式指南页面的富文本元素中对“All bold”的基本标记设置样式,这种样式将适用于搜索结果页面上的高亮显示词汇。

通过瞄准“所有粗体”标记来设置代码片段突出显示的样式。
通过瞄准“所有粗体”标记来设置代码片段突出显示的样式。

设置的结果数

最后,你可以选择在搜索结果中显示多少个结果,最多60个。

目前还不支持跨多个搜索结果页面分页。

搜索结果预览

当您设置搜索结果样式时,您可以通过在搜索结果设置部分的“预览结果”字段中更改搜索词来更改显示的结果。这将帮助您更清楚地了解您的搜索结果将如何出现在不同的查询。

在上线之前预览结果,看看不同查询的结果是怎样的。
在上线之前预览结果,看看不同查询的结果是怎样的。
在添加CMS或Business hosting并发布站点之前,您将看到示例结果——而不是站点的真实结果。要预览和样式真正的搜索结果,发布您的网站,以创建一个搜索索引。在下面的索引部分了解更多信息。

索引和控制什么是“可搜索的”

索引是搜索引擎中的内容和页面,它控制人们在您的站点上提交搜索时可以搜索的内容。例如,如果您不希望通过搜索发现某个特定页面,您可以将其从索引中删除(关于如何做到这一点的更多信息将在下面介绍)。

目前,网站只能使用一个搜索引擎。你可以在任意多个页面上设置搜索栏,但它们都将搜索相同的内容。

创建索引

一旦你添加了CMS或商业托管,你的搜索索引在你第一次发布你的网站后就创建了。

通过使用我们的示例结果,您可以在创建索引(或添加主机)之前设计搜索结果。

更新你的指数

有两种方法来更新你的索引,以便在搜索结果中的内容匹配你的网站内容的最新更新:

  1. 手动重建索引
  2. 自动重建索引

在CMS托管上,手动驯鹿每24小时可用一次。在商业托管,手动驯鹿每小时可用一次。在CMS托管上,自动reindexing每72小时一次,而在Business托管上,自动reindexing每12小时一次。

手动重建索引

手动reindexing允许你有意识地刷新你的搜索引擎中的内容。这是最好的当你推送重要的更新到你的内容,或对你的搜索引擎的内容做广泛的改变(见“精炼你的搜索索引”下面)。

要手动重新索引你的站点,打开设计器左侧的设置面板,在搜索部分,点击“现在索引”。大型站点的索引时间可能长达24小时。

在设置面板的搜索部分触发重新索引。

要检查索引的状态,回到设置面板的搜索部分。(如果你做了一个主要的内容更改,需要你的网站重新索引,请联络支持,他可以为你重新索引,这是出于一次性的礼貌。)

手动reindexing在CMS上每24小时一次,在Business上每小时一次。

自动重建索引

在一个持续的基础上,我们将更新您的搜索索引,以保持您的搜索引擎的内容与您的网站的最新变化是最新的。在CMS托管上,自动reindexing每72小时一次,而在Business托管上,自动reindexing每12小时一次。

优化搜索索引

默认情况下,当您添加搜索时,站点上的所有内容(不包括符号、集合列表、实用程序页和密码保护内容)都会被索引,因此用户在搜索时可以发现这些内容。在大多数情况下,您会想要细化您的索引,以更好地控制用户通过搜索可以发现的内容——并隐藏您不想被发现的内容。

从站点搜索中排除内容不会影响谷歌和其他搜索引擎索引站点的方式。你可以要求搜索引擎不要索引特定的页面在您的网站设置。

不包括静态页面

当你想要改进你的索引时,一个常见的例子是如果你有一个特定的页面,你不想让用户在搜索中找到——例如,一个你想要保持私有的内部样式指南,甚至你的主页,它只作为你的网站的入口点。在这些情况下,您希望从搜索中完全排除这些静态页面。

在页面设置下排除静态页面。
在页面设置下排除静态页面。

要排除静态页面,请转到“页面设置”,向下滚动到新的“搜索设置”部分,它位于“打开图表设置”的下方。在这一节的顶部,你会看到一个复选框“将此页面从网站搜索结果中排除”。一旦勾选,重新索引将从索引中删除此页面。

默认情况下,密码保护的页面和实用程序页面是不允许搜索的。

除收藏页面

类似地,如果特定集合不是站点内容的中心,比如标签、类别或其他没有有趣的集合页面的信息,您可能希望从搜索中排除它们。

要从搜索中排除“收集页”,请转到“收集页”的“页面设置”,然后向下滚动到“搜索设置”部分。一旦你勾选“将这些页面从网站搜索结果中排除”,这些页面将从你的搜索引擎中删除,下次你的网站被索引。

在“集合页”的“页设置”中排除集合的搜索。
在“集合”页的“页设置”中排除“集合”的搜索。

排除一个Collection页面将从搜索结果中排除所有模板页面,但是在其他页面的Collection列表中仍然可以发现这个Collection的任何内容,因为它们将从该页面的内容建立索引。在这种情况下,您可能希望对那些集合列表应用元素级别的排除(见下文)。

目前,不可能从搜索中排除个别Collection项目。

排除元素

从搜索中排除重复出现的元素(如导航条、页脚、侧边栏和表单)是一个好主意,因为它们会出现在你的站点中,并会“混淆”你的搜索结果。(例如,如果一个人搜索“博客帖子”,但是“博客帖子”这个词出现在你的导航栏中,那么你网站上的每一个页面都会被认为与该搜索相关。)

因此,“符号”和“集合”列表默认情况下不会出现在搜索结果中,但您可以在符号的父元素上重写此设置。

排除重复出现的元素,如导航条、页脚和侧边栏,以清理搜索结果。(注意,默认情况下不包含符号)。

要排除特定的元素,打开元素的设置,并在搜索设置部分,单击“排除搜索结果中的内容”。

在父级设置的任何排除规则也将应用于子元素。

常见问题

如果我导出我的代码,搜索会发生什么?

搜索将无法在导出的网站上工作,因为搜索引擎需要与Webflow托管。

我怎样才能看到用户在搜索什么?

为了看到你的网站访问者在搜索什么,集成您的Webflow网站搜索谷歌分析

我可以有多个搜索引擎与不同的内容?

目前,网站只能使用一个搜索引擎。你可以在任意多个页面上设置搜索栏,但它们都将搜索相同的内容。

我可以在编辑器中搜索东西吗?

搜索在编辑器中不起作用。要测试搜索,请以匿名链接打开站点,或在“搜索结果设置结果预览输入”中测试设计器中的结果。

尝试Webflow——它是免费的
Baidu
map