前言

在本博客从 Hexo 迁移到 Vuepress 后，原打算使用 algolia 进行文章搜索，但由于本博客内容不能满足 algolia 的要求，最终选择了使用 vuepress-plugin-fulltext-search + Bing/Google Site搜索 的方式，vuepress-plugin-fulltext-search 的搜索结果不尽人意，而搜索引擎对本站的收录也不尽理想，Bing 后来不知道出于什么原因，不收录本站。

后来得知 Meilisearch 搜索引擎，并有开源版和免费额度的云服务，由于云服务的 Meilisearch 足以满足本人检索使用，因此本文将主要记录 Meilisearch 云服务的介入方式。

实例

云服务

注册

https://www.meilisearch.com (opens new window)，步骤省略

创建项目

创建成功后会得到搜索实例的 URL 、 API Key (多个)，会在下面的爬虫总使用到。

Docker 自建

暂不考虑

2023年7月5日更新

昨日收到 Meilisearch 的 Email 告知：

If you do not select a new plan by 31 July, 2023 your project will be automatically converted to a free trial and you'll have 14 days to select a new plan before your project will be removed.

30 刀每月的售价，使我不得不选择自建。

• 生成一个 uuid，备用
• Docker 安装：

docker run -it --rm \
  -p 7700:7700 \
  -e MEILI_MASTER_KEY='MASTER_KEY(秘钥，推荐使用uuid)'\
  -v $(pwd)/meili_data:/meili_data \
  -d \
  getmeili/meilisearch:v1.2

• 访问 http://host:7700
• 查看 Search API Key 、 Admin API Key

curl \
  -X GET 'http://localhost:7700/keys' \
  -H 'Authorization: Bearer <MASTER_KEY'

参考：

• https://www.meilisearch.com/docs/learn/getting_started/installation (opens new window)
• https://www.meilisearch.com/docs/learn/cookbooks/docker (opens new window)

爬虫

官方爬虫工具 Github 仓库：https://github.com/meilisearch/docs-scraper (opens new window)

配置

具体说明参考：https://github.com/meilisearch/docs-scraper#set-your-config-file (opens new window)

官方 Vuepress 配置：https://github.com/meilisearch/documentation/blob/main/.vuepress/docs-scraper/docs-scraper.config.json (opens new window)

以下配置仅适用本站及 vuepress-theme-vdoing Vuepress 主题

{
  "index_uid": "nipgeihou-blog",
  "start_urls": [
    "https://blog.nipx.cn"
  ],
  "sitemap_urls": [
    "https://blog.nipx.cn/sitemap.xml"
  ],
  "stop_urls": [],
  "selectors": {
    "lvl0": {
      "selector": ".sidebar-heading.open",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": ".content__default h1",
    "lvl2": ".content__default h2",
    "lvl3": ".content__default h3",
    "lvl4": ".content__default h4",
    "lvl5": ".content__default h5",
    "text": ".content__default p, .content__default li, .content__default td"
  },
  "strip_chars": " .,;:#",
  "scrap_start_urls": true,
  "custom_settings": {
    "synonyms": {
      "relevancy": ["relevant", "relevance"],
      "relevant": ["relevancy", "relevance"],
      "relevance": ["relevancy", "relevant"]
    }
  }
}

将其保存为一个 JSON 文件

开始

docker run -t --rm \
    -e MEILISEARCH_HOST_URL='<实例url>' \
    -e MEILISEARCH_API_KEY='<Admin API Key>' \
    -v '<本机配置文件路径含文件名>':/docs-scraper/<配置文件名> \
    getmeili/docs-scraper:latest pipenv run ./docs_scraper <配置文件名>

官方建议在生产环境不要使用 latest 版本，应在测试通过后，指定当前测试版本作为生产环境使用版本。

注意

• docker 挂载参数 -v 必须写绝对路径，不可使用相对路径
• 在 Linux 下可配合 $(pwd) 命令获取当前路径
• 在 Windows 下可配合 %cd% 命令获取当前路径

检查爬虫结果

在浏览器中直接访问实例的 URL 地址，并输入 API KEY 就可以查看爬虫结果

Vuepress 插件

meilisearch/vuepress-plugin-meilisearch: Add a relevant and typo tolerant search bar to your VuePress (opens new window)

安装

npm install vuepress-plugin-meilisearch

配置

module.exports = {
  plugins: [
    [
      'vuepress-plugin-meilisearch',
      {
      hostUrl: '', // Mandatory
      apiKey: '', // Search API Key
      indexUid: '', // index
      placeholder: '', // Default: ""
      maxSuggestions: 8, // Default: 5
      hotKeys: [], // Default: ['s', '/']
      cropLength: 50, // Default: 30
      layout: 'columns', // Default: "columns"
      debug: false, // Default: false
      enableDarkMode: 'auto' // Default: false
    }
    ]
  ]
}

注意

这里的 apikey 是 Default Search API Key 用于搜索使用

样式修改

编辑 .vuepress/styles/palette.styl 覆盖原样式

// meilisearch搜索栏
#meilisearch-search-input{
    border-radius: 0
    border: 0 !important
    border-bottom: 1px solid #ccc !important
    transition: width 0.3s
    background-color: transparent;
}

#meilisearch-search-input:focus{
    width : 15rem
    border-bottom: 1px solid #000 !important
}

参考

• meilisearch/vuepress-plugin-meilisearch: Add a relevant and typo tolerant search bar to your VuePress (opens new window)