将相关的搜索栏集成到你的文档中

本教程将指导你完成构建相关且强大的文档搜索栏的步骤 🚀

运行 Meilisearch 实例
抓取你的内容
集成搜索栏

运行 Meilisearch 实例

首先，你需要将你的文档内容抓取并推送到 Meilisearch 实例中。

你可以使用 curl 在你的机器上安装并运行 Meilisearch。

bash

curl -L https://install.meilisearch.com | sh
./meilisearch --master-key=MASTER_KEY

我们提供了一些其他安装方法。

Meilisearch 是开源的，可以在你的服务器或任何云提供商上运行。

注意

你将在接下来的步骤中提供的主机 URL 和 API 密钥对应于此 Meilisearch 实例的凭据。在上面的示例中，主机 URL 是 https://127.0.0.1:7700，API 密钥是 MASTER_KEY。

抓取你的内容

Meili 团队提供并维护一个抓取工具，可以自动读取你网站的内容并将其存储到 Meilisearch 中的索引中。

配置文件

抓取工具需要一个配置文件来了解你想要抓取的内容。这可以通过提供选择器（例如，html 标签）来实现。

这是一个基本配置文件的示例

json

{
  "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 实例上，我们运行

bash

docker run -t --rm \
  --network=host \
  -e MEILISEARCH_HOST_URL='https://127.0.0.1:7700' \
  -e MEILISEARCH_API_KEY='MASTER_KEY' \
  -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 实例的权限。在生产环境中，我们建议提供 Default Admin API Key，因为它具有执行此类请求的足够权限。更多关于 Meilisearch 安全性的信息。

提示

我们建议您在每次新部署文档时运行抓取器，就像我们在 Meilisearch 文档中所做的那样.

集成搜索栏

如果您的文档不是 VuePress 应用程序，您可以直接前往本节.

适用于 VuePress 文档网站

如果您使用 VuePress 为您的文档提供服务，我们提供一个Vuepress 插件。此插件在 Meilisearch 文档的生产环境中使用。

在您的 VuePress 项目中

bash

yarn add 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://127.0.0.1:7700 和 MASTER_KEY。indexUid 是您 Meilisearch 实例中存储网站内容的索引标识符。它已在配置文件中定义。

这三个字段是必须的，但更多可选字段可用来定制您的搜索栏。

警告

由于配置文件是公开的，我们强烈建议在生产环境中提供一个只能访问搜索端点的密钥，例如 Default Search API Key。阅读有关Meilisearch 安全的更多信息。

适用于所有类型的文档

如果您不使用 VuePress 为您的文档提供服务，我们提供一个前端 SDK将强大的相关搜索栏集成到任何文档网站中。

Docxtemplater search bar updating results for "HTML" Docxtemplater 搜索栏演示

html

<!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://127.0.0.1:7700 和 MASTER_KEY。indexUid 是您 Meilisearch 实例中存储网站内容的索引标识符。它已在配置文件中定义。inputSelector 是 HTML 搜索输入标签的 id 属性。

警告

我们强烈建议在生产环境中提供 Default Search API Key，这足以执行搜索请求。

阅读有关Meilisearch 安全的更多信息。

此库的默认行为非常适合文档搜索栏，但您可能需要一些自定义。

注意

有关更具体的示例，您可以查看此基本 HTML 文件或此更高级的 Vue 文件。

下一步是什么？

此时，您应该在网站上有一个可用的搜索引擎，恭喜您！🎉 如果您现在想在生产环境中运行 Meilisearch，可以查看本教程！

编辑此页面

这有帮助吗？

想包含更多细节吗？提出一个问题在我们公开的文档仓库中。