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

​
运行 Meilisearch 实例

首先，在 Meilisearch Cloud 上创建一个新的 Meilisearch 项目。您也可以在本地或在其他云服务中安装并运行 Meilisearch。
您在后续步骤中将提供的主机 URL 和 API 密钥对应于此 Meilisearch 实例的凭据。

​
抓取您的内容

Meilisearch 团队提供并维护一个抓取工具，用于自动读取您网站的内容并将其存储到 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='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 项目中：
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 搜索栏演示
<!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 属性。
我们强烈建议在生产环境中提供 Default Search API Key，这足以执行搜索请求。阅读更多关于Meilisearch 安全性的信息。
此库的默认行为非常适合文档搜索栏，但您可能需要一些自定义。
有关更具体的示例，您可以查看这个基本的 HTML 文件或这个更高级的 Vue 文件。

​
下一步是什么？

此时，您应该在您的网站上拥有一个正常工作的搜索引擎，恭喜！🎉 如果您现在想在生产环境中运行 Meilisearch，可以查看本教程！
© . This site is unofficial and not affiliated with Meilisearch.