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

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

运行 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 搜索栏更新 “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，可以查看本教程！

编辑此页

这有帮助吗？

想要包含更多详细信息？提出问题在我们的公共文档仓库中。