Enterprise：网站搜索 - Elastic Site Search

Elastic 中国社区官方博客

已于 2025-05-30 14:58:38 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Solutions Elastic 文章标签： elasticsearch 运维大数据

于 2020-03-10 13:38:53 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/UbuntuTouch/article/details/104755169

Elastic 同时被 2 个专栏收录

1942 篇文章

订阅专栏

Solutions

15 篇文章

订阅专栏

本文介绍如何使用ElasticSiteSearch为网站添加搜索功能，包括创建搜索引擎、配置搜索UI及自定义搜索结果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着你公司网站的内容不断地增加，网站不断地更新，你有没有发现查找你想要的内容越来越难了。一方面是内容是新的内容不断增加，另外一方面你之前保存的链接也由于网站的更新而不能使用了。你有没有想到想到为自己的网站添加一个搜索框，从而更加方便我们或者我们的客户来对我们的网站进行搜索。如果你这么想，那么Elastic Site Search将是你的答案。你无需做很多的工作，你只需要简单的配置就可以完成。剩下的工作就交给 Elastic 来完成。运用 Elastic Site Search，你所需要的就是提供一个你的网站的url，Elastic Site Search 对你的网站进行爬虫，并生产可以进行搜索的数据。

Elastic Site Search（以前称为 Swiftype 站点搜索）提供了构建强大的网站搜索所需的工具-无需学习。免维护的搜寻器使内容保持最新，而直观的自定义功能和强大的分析功能可完全控制搜索的相关性。所有这些都得到 Elasticsearch 的大规模支持。

你需要功能强大的搜索后端+设计良好的 UI。根据你网站的目的和规模，搜索可能是一项至关重要的功能，可使你的用户快速找到所需的信息。 Elasticsearch 使构建提供相关结果的搜索引擎变得更加容易，但是构建搜索后端只是实现搜索体验的工作的一部分。没有直观的搜索界面，你的用户可能无法获得搜索引擎的全部价值。

Elastic Site Search（以前称为 Swiftype Site Search）将搜索作为一项服务来完全处理你的搜索引擎的后端，并且我们还帮助你构建设计良好的搜索UI。网站搜索基于 Elastic Stack 构建，这使我们能够支持 10,000 多个生产搜索引擎，每月服务超过 50 亿个查询。可以肯定地说，由于我们已经帮助 Lyft，AT＆T，Twilio，Asana 和 Samsung 等大小公司提供一流的搜索体验，因此多年来我们已经在搜索方面学到了一两件事。如果你想进一步了解 Swiftype 架构和弹性堆栈的使用，请查看这个“Swiftype's Technical Journey with Elasticsearch”。

Elastic Site Search 使用三个简单的步骤来进行搜索搜索。Elastic Site Search 使强大的搜索变得简单。不是 “对高级开发人员来说简单” 简单，而是 “对任何人来说简单” 简单。单击以进行爬网，拖放以进行调整。看到？简单。


输入你的网站地址，然后让功能强大的“Site Search”搜寻器处理其余的内容。	在你的站点上执行几行代码，以添加一个由Elasticsearch驱动的搜索框。	通过增强，权重和同义词来微调用户的搜索体验。

在接下来的教程中，我们将详细介绍如何来创建一个我们的 Site Search。

创建一个自己的网站

为了方面我们的展示，我创建一个我自己的网站。你可以按照如下的方法来下载网站的代码：

git clone https://github.com/liu-xiao-guo/the-example-app.nodejs

等我们下载完这个应用后，我们可以使用如下的命令来进行安装：

npm install

等安装好后，我们可以使用如下的命令来进行运行我们的服务器：

npm run start:dev

上面显示我们的服务器运行于 localhost 的 3000 端口上。我们在浏览器中输入 localhost:3000:

从上面我们可以看出来，我们已经成功地把服务器运行起来了。

我运行起我的 natapp 应用：

在上面，我们可以看到我们的 natapp 应用已经成功地把我们的 127.0.0:3000 映射到 http://liuxg.natapp1.cc 上了。我们在浏览器中输入你自己的 url:

在上面我们可以看出来我们的 url 已经成功地起作用了。

创建一个 Elastic Site Search 帐户并将你的数据编入 Swiftype

你可以通过开始免费的14天试用期进行注册。在设置过程中，“Site Search” 将要求你输入你的 Web 网址。你的域将被爬网，并且你的文档将被索引。

一旦我们成功地注册完，我们可以在地址 Swiftype 进行登录：

等我登录过后，我们可以看到如下的画面：

我们选择“Site Search”:

我们点击“CREATE A NEW ENGINE”按钮:

在上面填入我们的网站的 url。然后，我们点击 “VERIFY URL”:

我们输入想要的 Engine Name，并点击 “CREATE ENGINE” 按钮：

上面显示我们的 Engine 已经被成功地创建。我们可以点击 “Install Search” 菜单：

从上面的图中，我们可以看出来，我们的网站正被 Site Search 爬，正在建立索引。等我们的网页被爬完后，我们可以看到如下的画面：

这个时候，我们点击 “Content” 菜单，我们可以看到：

从上面我们可以看出来我们的网站的内容已经被成功地爬完了，并已经建立了自己的索引。我们可以在上面的 Filter pages 的搜索框中来搜索我们想要的关键词，比如 Hello:

我们可以看到很多的链接都被罗列出来了。我们可以点击上面的 INSPECT 按钮：

我们可以点击上面的 VIEW DETAILS 按钮查看这个链接的详细信息。

在这里的其它的内容就留给大家自己来开发了。

为 Web 应用加上搜索框

到目前为止，我们所有的工作都在 swiftype.com 网站上完成，但是在大多数的情况下，我们其实更想把我们的搜索体验运用到我们的实际的Web应用中。我们想为我们的应用添加上一个搜索框。为此，我们按照教程 “jQuery Plugin Guide” 来做我们的练习。我们将实现一个最简单的搜索框来展示。我们打开我们的 nodejs 应用的文件 layout.pug。它位于：

$ ls views/layout.pug 
views/layout.pug

我们首先去掉下面被注释的3条语句：

上面的三天语句将为我们的每个页面创建一个搜索的输入框。同时为了能够使得我们的搜索框能够正确运行，我们必须首先在app.swiftype.com网站得到我们的Engine Key:

我们把这个 Engine Key 填入到 lib 目录下的 site_search.js 中：

$ ls lib/site_search.js 
lib/site_search.js

填入后的 site_search.js 是这样的：

$(function() {
  $('#st-search-input').swiftypeSearch({
    resultContainingElement: '#st-results-container',
    engineKey: 'YourEngineKey'
  });
});

我们重新运行我们的应用：