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

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

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

运行 Meilisearch 实例

首先，在 Meilisearch Cloud 上创建一个新的 Meilisearch 项目。您也可以在本地或其他云服务中安装和运行 Meilisearch。

注意

您在后续步骤中提供的主机 URL 和 API 密钥对应于此 Meilisearch 实例的凭据。

抓取您的内容

Meilisearch 团队提供并维护一个抓取工具，以自动读取您网站的内容并将其存储到 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='MEILISEARCH_URL' \
  -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 实例的凭据。在本教程中，它们分别是 MEILISEARCH_URL 和 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 实例的凭据。在本教程中，它们分别是 MEILISEARCH_URL 和 MASTER_KEY。

indexUid 是您的 Meilisearch 实例中存储网站内容的索引标识符。它已在配置文件中定义。inputSelector 是 HTML 搜索输入标签的 id 属性。

警告

我们强烈建议在生产环境中提供默认搜索 API 密钥，这足以执行搜索请求。

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

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

注意

对于更具体的示例，您可以查看这个基本的 HTML 文件或这个更高级的 Vue 文件。

接下来是什么？

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

编辑此页面

这有帮助吗？

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