全局搜索功能

站点添加添加全局搜索功能

操作步骤

1. 配置主题

在.vitepress/config.ts文件中，将themeConfig.search.provider选项设置为'local'。这将启用 VitePress 的内置模糊全文搜索功能。具体代码如下：

import { defineConfig } from "vitepress";

export default defineConfig({
  themeConfig: {
    search: {
      provider: "local",
    },
  },
});

2. 安装插件

如果使用本地搜索功能，可以安装vitepress-plugin-search、markdown-it和flexsearch这三个插件。通过运行以下命令进行安装：

npm i vitepress-plugin-search markdown-it flexsearch -D

3. 添加和配置插件

在.vitepress目录下创建一个vite.config.ts文件（如果尚未存在），并添加以下内容来配置插件：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VitepressPluginSearch from "vitepress-plugin-search";
import MarkdownIt from "markdown-it";
import Flexsearch from "flexsearch";

export default defineConfig({
  plugins: [
    vue(),
    VitepressPluginSearch({
      // 自定义配置
    }),
  ],
  markdown: {
    config: (md) => {
      md.use(MarkdownIt());
      md.use(Flexsearch());
    },
  },
});

4. 自定义配置

搜索功能进行更多自定义配置，可以在VitepressPluginSearch函数中传入一个配置对象。

5. 重启开发服务器

完成上述配置后，重新启动 VitePress 开发服务器，全局搜索功能应该就可以使用了。

请注意，上述步骤中的插件和配置可能会随着 VitePress 的版本更新而发生变化，