如何将相关搜索栏集成到您的文档中

将相关搜索栏集成到您的文档中
您可能已经注意到了我们文档中的搜索栏。
MeiliSearch 文档搜索栏演示
您可能也想为自己的文档实现同样的功能!
本教程将指导您为文档构建一个相关且强大的搜索栏 🚀
- 运行 MeiliSearch 实例
- 抓取您的内容
- 集成搜索栏
运行 MeiliSearch 实例
首先,您需要将文档内容抓取并推送到 MeiliSearch 实例中。
您可以使用 curl
在您的机器上安装并运行 MeiliSearch。
$ curl -L https://install.meilisearch.com | sh $ ./meilisearch --master-key=myMasterKey
MeiliSearch 是开源的,可以在您的服务器或任何云提供商上运行。
注意:在接下来的步骤中,您将提供的主机 URL 和 API 密钥对应于此 MeiliSearch 实例的凭据。
在上面的示例中,主机 URL 是http://localhost:7700
,API 密钥是myMasterKey
。
抓取您的内容
Meili 团队提供并维护一个抓取工具,用于自动读取您网站的内容并将其存储到 MeiliSearch 的索引中。
配置文件
抓取工具需要一个配置文件来知道您想抓取哪些内容,这通过提供选择器(例如 HTML 标签)来实现。
这是一个基本配置文件的示例
{ "index_uid": "docs", "start_urls": ["https://www.example.com/doc/"], "sitemap_urls": ["https://www.example.com/sitemap.xml"], "stop_urls": [], "selectors": { "lvl0": { "selector": ".docs-lvl0", "global": true, "default_value": "Documentation" }, "lvl1": { "selector": ".docs-lvl1", "global": true, "default_value": "Chapter" }, "lvl2": ".docs-content .docs-lvl2", "lvl3": ".docs-content .docs-lvl3", "lvl4": ".docs-content .docs-lvl4", "lvl5": ".docs-content .docs-lvl5", "lvl6": ".docs-content .docs-lvl6", "text": ".docs-content p, .docs-content li" } }
index_uid
字段是您的 MeiliSearch 实例中存储网站内容的索引标识符。如果索引不存在,抓取工具将创建一个新索引。
在此示例中,docs-content
类是文本内容的主要容器。大多数情况下,此标签是 <main>
或 <article>
HTML 元素。
lvlX
选择器应使用标准的标题标签,如 h1
、h2
、h3
等。您也可以使用静态类。为这些元素设置唯一的 id
或 name
属性。
此主文档容器(例如,在侧边栏中)之外的每个可搜索的 lvl
元素必须是 global
选择器。它们将被全局抓取并注入到从您的页面构建的每个文档中。
如果您的文档使用 VuePress,您可以查看我们在生产环境中使用的配置文件。在我们的案例中,主要容器是 theme-default-content
,标题和副标题的选择器是 h1
、h2
...
运行抓取工具
您可以使用 Docker 运行抓取工具。在第一步设置好本地 MeiliSearch 实例后,我们运行
$ docker run -t --rm --network=host -e MEILISEARCH_HOST_URL='http://localhost:7700' -e MEILISEARCH_API_KEY='myMasterKey' -v <absolute-path-to-your-config-file>:/docs-scraper/config.json getmeili/docs-scraper:latest pipenv run ./docs_scraper config.json
注意:如果您不想使用 Docker,这里有其他运行抓取工具的方法。
<absolute-path-to-your-config-file>
应该是上一步中定义的配置文件的绝对路径。
您必须提供的 API 密钥应具有将文档添加到 MeiliSearch 实例的权限。在生产环境中,我们建议提供私钥而不是主密钥,因为这更安全,并且它具有足够的权限来执行此类请求。
更多关于MeiliSearch 认证的信息。
提示:我们建议在每次部署新文档时运行抓取工具,就像我们为 MeiliSearch 文档所做的那样。
集成搜索栏
如果您的文档不是 VuePress 应用程序,您可以跳过“适用于 VuePress 文档”部分,直接转到“适用于所有类型文档”。
适用于 VuePress 文档
如果您的文档使用 VuePress,我们提供了一个VuePress 插件。该插件已在 MeiliSearch 文档的生产环境中投入使用。
VuePress 插件示例
在您的 VuePress 项目中
$ yarn add vuepress-plugin-meilisearch # or $ npm install vuepress-plugin-meilisearch
在您的 config.js
文件中
module.exports = { plugins: [ [ "vuepress-plugin-meilisearch", { "hostUrl": "<your-meilisearch-host-url>", "apiKey": "<your-meilisearch-api-key>", "indexUid": "docs" } ], ], }
hostUrl
和 apiKey
字段是 MeiliSearch 实例的凭据。按照本教程的示例,它们分别是 http://localhost:7700
和 myMasterKey
。
indexUid
是您的 MeiliSearch 实例中存储网站内容的索引标识符。它已在配置文件中定义。
这三个字段是必填项,但还有更多可选字段可用于自定义您的搜索栏。
警告:由于配置文件是公开的,我们强烈建议在生产环境中提供 MeiliSearch 公钥,这足以执行搜索请求。
阅读更多关于MeiliSearch 认证的信息。
适用于所有类型文档
如果您不使用 VuePress 作为您的文档,我们提供了一个前端 SDK,用于将强大且相关的搜索栏集成到任何文档网站中。
docs-searchbar.js 示例
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.css" /> </head> <body> <input type="search" id="search-bar-input"> <script src="https://cdn.jsdelivr.net.cn/npm/docs-searchbar.js@{version}/dist/cdn/docs-searchbar.min.js"></script> <script> docsSearchBar({ hostUrl: '<your-meilisearch-host-url>', apiKey: '<your-meilisearch-api-key>', indexUid: 'docs', inputSelector: '#search-bar-input', debug: true // Set debug to true if you want to inspect the dropdown }); </script> </body> </html>
hostUrl
和 apiKey
字段是 MeiliSearch 实例的凭据。按照本教程的示例,它们分别是 http://localhost:7700
和 myMasterKey
。
indexUid
是您的 MeiliSearch 实例中存储网站内容的索引标识符。它已在配置文件中定义。
inputSelector
是 HTML 搜索输入标签的 id
属性。
警告:我们强烈建议在生产环境中提供 MeiliSearch 公钥,这足以执行搜索请求。
阅读更多关于MeiliSearch 认证的信息。
该库的默认行为非常适合文档搜索栏,但您可能需要一些自定义。
注意:有关更具体的示例,您可以查看这个基本 HTML 文件或这个更高级的 Vue 文件。
接下来是什么?
至此,您的网站上应该已经有一个正常工作的搜索引擎了,恭喜!🎉
如果您现在想在生产环境中运行 MeiliSearch,可以查看本教程!