VuePress全文检索

Edited on In ,

方案 vuepress-plugin-full-text-search2

vuepress2 推荐：

1
npm i -D vuepress-plugin-full-text-search2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import fullTextSearchPlugin from "vuepress-plugin-full-text-search2";
export default {
  plugins: [
    fullTextSearchPlugin({
      locales: {
        '/': {
          placeholder: 'Search',
        },
        '/zh/': {
          placeholder: '搜索',
        },
      },
    }),
  ],
}

docs\.vuepress\styles\index.scss添加样式

1
2
3
4
5
6
7
8
9
10
11
12
// 搜索结果样式

.suggestions {
  max-height: 80vh;
  min-width: 80vh;
  overflow-y: scroll;

  .highlight {
    color: #646cff;
    font-weight: bold;
  }
}

方案 vuepress-plugin-flexsearch-pro

方案 vuepress-plugin-next-search

方案 vuepress2-plugin-full-text-search

方案 fulltext-search

1
npm add -D vuepress-plugin-fulltext-search
1
2
3
4
// docs/.vuepress/config.js
module.exports = {
  plugins: ['fulltext-search'],
}
1
2
3
4
5
---
search: false
---

<!-- page content -->

默认情况下，搜索关键字的结果是下划线，没有高亮。修改如下：

1
2
3
4
5
6
7
8
9
// 搜索结果样式
.suggestions {
  max-height: 80vh; 
  overflow-y: scroll;
}
.suggestions .highlight{
  color: #646cff
  font-weight: bold
}

修改文件.vuepress/styles/index.style, 添加样式：高亮和加粗

本文地址： https://github.com/maxzhao-it/blog/post/66876dcb/