vitepress 添加搜索功能 博客模板_vitepress 搜索

vitepress 添加搜索功能

记录一下 vitepress 添加搜索功能过程中踩的坑, 踩过, 但感觉没有实际意义, 分享出来后来人可以避坑.

主要思路: 使用的 vitepress-plugin-search, 没有使用另外一个, 貌似要联网还要注册杂七杂八感觉麻烦.

vite.config.js 文件这么配置, vite.config.js 要和文档放在一块, 要是文档都在 docs 中, 就要吧 vite.config.js 放到 docs 里面, 具体多试试嘛, 以实际情况为准.

//vite.config.js
import { SearchPlugin } from "vitepress-plugin-search";
import { defineConfig } from "vite";

export default defineConfig({
  base: "./",
  server: {
    port: 3000,
    hmr: false,
    disableHostCheck: true,
  },
  plugins: [
    SearchPlugin({
      encode: false,
      tokenize: "full", // 解决汉字不能多个输入
    }),
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

网上都说是按照上面这样配置, 但配置了不生效.

创建一个 Search 的组件, 直接去把它源码里面的 search.vue 文件拷贝出来了, 当然要配套拷出来.

我把他搞出来了, 然后放到 theme 里面, 最后在一个全局的 silder 组件中引用, 这样所有的页面都能生效. 最后我把这个组件展示搜索框的位置隐藏了, 通过 ctrl + k 来触发, 这样一般人就不知道怎么使用我的搜索功能拉.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zmlKzHsx-1676624996344)(https://jslin.cn/杂记-2023-02-17-16-57-50.png)]

博客模板代码: https://jslin.cn/vite.config-2023-02-17-17-04-46.zip