该插件用于让 Vuepress 的搜索栏支持全文搜索。

• 当用户在搜索栏中输入字符串时，该插件会实时地向 meilisearch 服务器发出 AJAX 形 式的查询请求，然后将查询结果显示在搜索栏下方。

meilisearch 是一个开源的搜索引擎，采用 Rust 语言开发，借鉴了 Algolia 引擎，适合 用于实现个人网站的搜索栏。

• 官网(opens new window)
• 使用 meilisearch 的主要流程如下：
  1. 运行 meilisearch 服务器。
  2. 执行 meilisearch 的 scrape 工具，抓取目标网站的内容信息，并送到 meilisearch 服务器中存储。 每当目标网站的内容更新时，就应该抓取一次。
  3. 向 meilisearch 服务器发出 HTTP 查询请求，搜索某一字符串在目标网站上的位置。

使用步骤

1. 启动 meilisearch 服务器：

   1
   docker run -d --name meilisearch --restart=always \
   2
       -p 7700:7700 \
   3
       -e MEILI_HTTP_ADDR=0.0.0.0:7700 \
   4
       -v /path/to/data.ms:/data.ms \
   5
       getmeili/meilisearch:v0.26.1

   • 启动 meilisearch 服务器时，默认没有设置密钥，允许用户访问任意 URL 。设置密 钥就可以拒绝非法用户的访问。密钥尽量长一些。

   • 可以设置环境变量

     1
     MEILI_MASTER_KEY=******

     即；

     1
     docker run -d --name meilisearch --restart=always \
     2
     -p 7700:7700 \
     3
     -e MEILI_MASTER_KEY=myMasterKey \
     4
     -e MEILI_HTTP_ADDR=0.0.0.0:7700 \
     5
     -v /path/to/data.ms:/data.ms \
     6
     getmeili/meilisearch:v0.26.1

     作为主密钥，此时会自动生成私钥和公钥，发送以下 HTTP 请求即可查询到：

     1
     [root@CentOS ~]# curl \
     2
     > -X GET 'http://ip:7700/keys' \
     3
     > -H 'Authorization: Bearer myMasterKey'

     会返回俩个密钥：Default Search API Key 和 Default Admin API Key

   • 如果用户在发出的 HTTP 查询请求的 headers 中加上 Default Admin API Key（主 密钥一般不用于查询），才有权访问除了 /keys 以外的 URL 。如果使用 Default Search API Key，则只有权查询 /indexes 下的部分内容。

   • 部署新的 meilisearch 时，索引不能向上兼容，需要清空 /data.ms 目录，重新生 成索引。

2. 执行 meilisearch 的 scrape 工具：

   1
   docker run -t --rm \
   2
       --network=host \
   3
       -e MEILISEARCH_HOST_URL='http://ip:7700' \
   4
       -e MEILISEARCH_API_KEY='myMasterKey' \
   5
       -v /path/to/docs-scraper.json:/docs-scraper/config.json \
   6
   getmeili/docs-scraper:v0.12.1 pipenv run ./docs_scraper config.json

   这里需要创建 scrape 的配置文件 docs-scraper.json ，如下：

   1
   {
   2
     "index_uid": "docs", // 索引 ID ，用于区分不同的抓取结果
   3
     "sitemap_urls": ["http://test.com/sitemap.xml"],
   4
     "start_urls": ["http://test.com"], // 待抓取的目标网站
   5
     "selectors": {
   6
       "lvl0": {
   7
         "selector": ".sidebar-heading.open",
   8
         "global": true,
   9
         "default_value": "Documentation"
   10
       },
   11
       "lvl1": ".theme-default-content h1",
   12
       "lvl2": ".theme-default-content h2",
   13
       "lvl3": ".theme-default-content h3",
   14
       "lvl4": ".theme-default-content h4",
   15
       "lvl5": ".theme-default-content h5",
   5 collapsed lines
   16
       "text": ".theme-default-content p, .theme-default-content li"
   17
     },
   18
     "strip_chars": " .,;:#",
   19
     "scrap_start_urls": true
   20
   }

3. 安装：yarn add vuepress-plugin-meilisearch

4. 在 config.js 中添加如下配置：

   1
   module.exports = {
   2
     plugins: [
   3
       [
   4
         'vuepress-plugin-meilisearch',
   5
         {
   6
           hostUrl: 'http://ip:7700', // 该 URL 应该能在用户的浏览器上被访问，不能为 localhost
   7
           apiKey: 'Default Search API Key', // 这里应该使用 Search key
   8
           indexUid: 'docs',
   9
           placeholder: 'Search as you type...', // 在搜索栏中显示的占位符
   10
           maxSuggestions: 5, // 最多显示几个搜索结果
   11
           cropLength: 30, // 每个搜索结果最多显示多少个字符
   12
         },
   13
       ],
   14
     ],
   15
   }

5. 重新编译 Vuepress 网站。