回到所有的课程
课程库

网站搜索

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

这个视频的特点是一个旧的UI。更新版本即将发布!

站点搜索允许您在站点中添加搜索,这样您的访问者就可以找到他们想要的信息,并且您可以控制这种体验的外观和感觉。您还可以轻松地排除特定元素、页面甚至整个collection的内容,所有这些都可以通过复选框的勾号进行排除。

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

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

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

添加并样式化搜索组件

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

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

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

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

将搜索组件添加到站点后,可以使用与Webflow站点上任何其他元素相同的方式对其进行样式设置。

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

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

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

样式化搜索结果页面

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

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

搜索结果页面的结构

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

搜索结果页面的起点,包含示例结果,以便在发布站点之前开始设计。
搜索结果页面的起点,包含示例结果,以便在发布站点之前开始设计。

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

样式的搜索结果

对搜索结果进行样式化非常类似于对Collection列表进行样式化,应用于一个结果项的样式将应用于该列表中的所有其他结果项。但是,搜索结果有一个基本的开始结构,并有一些其他的新控件。

需要知道
没有托管的网站和有基本托管的网站会在你发布的网站上显示搜索结果样本——你可以向客户展示,让他们知道他们的搜索体验会是怎样的。要查看真正的搜索结果,您需要向站点添加CMS或Business hosting。

搜索结果结构

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

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

网站搜索设置

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

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

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

显示内容“类型”

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

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

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

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

添加搜索结果缩略图

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

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

样式代码片段

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

在搜索结果设置中设置结果的数量和片段长度。
在搜索结果设置中设置结果的数量和片段长度。

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

通过锁定“全部粗体”标记来样式代码片段的高亮部分。
通过锁定“全部粗体”标记来样式代码片段的高亮部分。

样式你的“空”(或“没有结果”)状态

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

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

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

片段的样式

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

在搜索结果设置中设置结果的数量和片段长度。
在搜索结果设置中设置结果的数量和片段长度。

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

通过锁定“全部粗体”标记来样式代码片段的高亮部分。
通过锁定“全部粗体”标记来样式代码片段的高亮部分。

设置的结果数

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

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

搜索结果预览

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

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

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

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

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

创建索引

一旦您添加了CMS或Business hosting,您的搜索索引将在您第一次发布站点后创建。

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

更新你的指数

有两种方法可以更新你的索引,使搜索结果中的内容与你的网站内容的最新更新相匹配:

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

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

手动重建索引

手动索引允许您故意刷新搜索引擎中的内容。当你对你的内容进行了重要的更新,或者对你的搜索引擎的内容进行了广泛的更改(参见下面的“精炼你的搜索索引”)时,这是最好的方法。

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

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

要检查索引的状态,请返回设置面板的搜索部分。(如果你做了一个主要的内容改变,需要你的网站立即重新索引,请联络支持,他可以为你重新编制索引,这是一次好意。)

手动驯鹿在CMS主机上每24小时可用一次,在商业主机上每小时可用一次。

自动重建索引

在持续的基础上,我们将更新您的搜索索引,使您的搜索引擎中的内容与您的网站的最新变化保持同步。在CMS主机上,每72小时自动驯鹿一次,在商业主机上每12小时自动驯鹿一次。

优化搜索索引

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

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

不包括静态页面

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

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

要排除静态页面,请转到页面设置并向下滚动到新的搜索设置部分,它位于Open Graph设置的下方。在此部分的顶部,您将看到一个复选框,用于“从站点搜索结果中排除此页”。一旦选中,重索引将从索引中删除该页。

默认情况下,密码保护页面和实用程序页面将被排除在搜索之外。

除收藏页面

同样,如果特定Collection不是站点内容的中心,比如标记、类别或其他没有有趣Collection page的信息,则可能希望从搜索中排除它们。

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

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

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

目前还不可能从搜索中排除个别集合项目。

排除元素

从搜索中排除重复出现的元素(如导航条、页脚、侧边栏和表单)是个好主意,因为它们会出现在整个站点中,可能会“搅乱”您的搜索结果。(例如,如果一个人搜索“Blog posts”,但“Blog posts”这个词在你的导航中,你的网站上的每个页面都将被认为与该搜索相关。)

因此,默认情况下,符号和集合列表不包含在搜索结果中,但您可以在符号的父元素上覆盖此设置。

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

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

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

常见问题

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

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

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

要了解网站访问者在搜索什么,整合你的Webflow网站搜索与谷歌分析

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

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

我可以在编辑器中搜索内容吗?

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

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