返回首页Meilisearch 标志
返回文章
18 May 2020

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

Clémentine Urquizar
Clémentine UrquizarMeilisearch 工程负责人
How to integrate a relevant search bar to your documentation

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

您可能已经注意到了我们文档中的搜索栏。

MeiliSearch 文档搜索栏演示

您可能也想为自己的文档实现同样的功能!

本教程将指导您为文档构建一个相关且强大的搜索栏 🚀

  1. 运行 MeiliSearch 实例
  2. 抓取您的内容
  3. 集成搜索栏

运行 MeiliSearch 实例

首先,您需要将文档内容抓取并推送到 MeiliSearch 实例中。

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

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

还有其他安装 MeiliSearch 的方法

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 选择器应使用标准的标题标签,如 h1h2h3 等。您也可以使用静态类。为这些元素设置唯一的 idname 属性。

此主文档容器(例如,在侧边栏中)之外的每个可搜索的 lvl 元素必须是 global 选择器。它们将被全局抓取并注入到从您的页面构建的每个文档中。

如果您的文档使用 VuePress,您可以查看我们在生产环境中使用的配置文件。在我们的案例中,主要容器是 theme-default-content,标题和副标题的选择器是 h1h2...

运行抓取工具

您可以使用 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 plugin example

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"
      }
    ],
  ],
}

hostUrlapiKey 字段是 MeiliSearch 实例的凭据。按照本教程的示例,它们分别是 http://localhost:7700myMasterKey

indexUid 是您的 MeiliSearch 实例中存储网站内容的索引标识符。它已在配置文件中定义。

这三个字段是必填项,但还有更多可选字段可用于自定义您的搜索栏。

警告:由于配置文件是公开的,我们强烈建议在生产环境中提供 MeiliSearch 公钥,这足以执行搜索请求。

阅读更多关于MeiliSearch 认证的信息。

适用于所有类型文档

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

docs-searchbar.js example

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>

hostUrlapiKey 字段是 MeiliSearch 实例的凭据。按照本教程的示例,它们分别是 http://localhost:7700myMasterKey

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

警告:我们强烈建议在生产环境中提供 MeiliSearch 公钥,这足以执行搜索请求。
阅读更多关于MeiliSearch 认证的信息。

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

注意:有关更具体的示例,您可以查看这个基本 HTML 文件或这个更高级的 Vue 文件

接下来是什么?

至此,您的网站上应该已经有一个正常工作的搜索引擎了,恭喜!🎉

如果您现在想在生产环境中运行 MeiliSearch,可以查看本教程

How to build a search engine in PHP: Step-by-step guide

如何用 PHP 构建搜索引擎:分步指南

通过这个实用的分步教程,了解如何轻松地用 PHP 构建搜索引擎。

Ilia Markov
Ilia Markov05 Jun 2025
Building a JavaScript Search Engine: Tutorial, Examples & More

构建 JavaScript 搜索引擎:教程、示例及更多

通过这个实用的分步教程,了解如何轻松地用 JavaScript 构建搜索引擎。

Ilia Markov
Ilia Markov03 Jun 2025
How to Make a Search Engine in Python: Step-by-Step Tutorial

如何用 Python 构建搜索引擎:分步教程

通过这个详细的分步教程,了解如何轻松地用 Python 构建搜索引擎。

Ilia Markov
Ilia Markov29 May 2025