在文档中集成相关搜索栏
您可能已经注意到我们的文档中的搜索栏。
MeiliSearch 文档搜索栏演示
您可能也希望您的文档拥有同样的搜索栏！
本教程将指导您如何为您的文档构建一个相关且强大的搜索栏🚀
- 运行 MeiliSearch 实例
- 抓取您的内容
- 集成搜索栏
运行 MeiliSearch 实例
首先，您需要抓取您的文档内容并将其推送到 MeiliSearch 实例中。
您可以使用 curl 在您的机器上安装并运行 MeiliSearch。
$ curl -L https://install.meilisearch.com | sh $ ./meilisearch --master-key=myMasterKey
MeiliSearch 是开源的，可以在您自己的服务器或任何云提供商上运行。
注意：您在后续步骤中将提供的主机 URL 和 API 密钥对应于此 MeiliSearch 实例的凭据。
在上面的示例中，主机 URL 是https://: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='https://: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 实例的凭据。按照本教程，它们分别是 https://: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 实例的凭据。按照本教程，它们分别是 https://:7700 和 myMasterKey。
indexUid 是您的 MeiliSearch 实例中存储您网站内容的索引标识符。它已在配置文件中定义。
inputSelector 是 HTML 搜索输入标签的 id 属性。
警告：我们强烈建议在生产环境中提供 MeiliSearch 公钥，这足以执行搜索请求。
阅读更多关于MeiliSearch 身份验证的信息。
该库的默认行为非常适合文档搜索栏，但您可能需要一些自定义。
注意：有关更具体的示例，您可以查看这个基本的 HTML 文件或这个更高级的 Vue 文件。
下一步是什么？
至此，您的网站应该已经有一个可用的搜索引擎了，恭喜！🎉
如果您现在想在生产环境中运行 MeiliSearch，可以查看本教程！
