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", // 解决汉字不能多个输入
    }),
  ],
});

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

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

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