默认主题自带的搜索, 只会为页面的标题、h2、h3 以及 tags构建搜索索引。所以尽量将围绕知识点的关键字体现到标题上。而 tags 更为灵活,可以把相关的能想到的关键字都配置到 tags 中,以方便搜索。

默认插件介绍 (opens new window)

默认主体配置 (opens new window)

# 通过插件 vuepress-plugin-fulltext-search 实现全文搜索

  1. 安装依赖 vuepress-plugin-fulltext-search

    yarn add -D vuepress-plugin-fulltext-search
    
  2. 修改配置 vi docs/.vuepress/config.js

      module.exports = {
      // ...
      plugins: ['fulltext-search'],
      }
    

搜索效果如下, 展示效果和 algolia 相似

image-20231207144206632

提示

安装了该依赖后, 后面再用 yarn 安装其它依赖会报错,为避免影响其它插件正常使用,我最后决定从系统中移除了该插件

参考文档 (opens new window)

提示

发现的不足:

  1. 没有提供额外的调整参数, 如最大搜索结果数量等

  2. 关键词不高亮显示

官方文档 (opens new window)

# 通过插件 vuepress-plugin-flexsearch 实现全文搜索

  1. 安装依赖

    yarn add -D vuepress-plugin-flexsearch
    
  2. 修改配置

    // .vuepress/config.js
    
    module.exports = {
        plugins: [
          ['flexsearch'],
          // other plugins
        ]
    }
    

    提示

    优点:

    1. 提供了更多的配置项
    2. 搜索结果高亮显示

    但是按官方文档没有配置好对中文分词的支持,待日后完善。

    官方文档 (opens new window)

搜索效果如下

image-20231207144757904

# 集成第三方免费搜索服务 algolia

https://docsearch.algolia.com/apply/

image-20231207142458441

image-20231207142442621

image-20231207142537940

image-20231207143321387

更新时间: 2023年12月7日星期四下午3点05分