vitepress 添加搜索 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天

algolia.36之前版本的配置可以参考：blog.csdn.net/weixin_4242…

往后的版本更新了国际化，不再适用。

方法一：依旧使用 algolia

推荐这样做，也不需要继续使用我们的 ci 资源了。

大家可以看到，chodocs 目前已经使用了最新的版本，但 Algolia 依旧还是生效的。

这已经不是用的上一篇文章的 ci 自动爬取数据了，而是基于官方的（也是上文图中最后一段所说）DocSearch 来爬取数据，申请地址如下：

docsearch 申请地址

如果表单提交不成功，需要使用科学上网。

这里有几点需要注意：

• 您必须是该网站的所有者，或至少有更新其内容的权限
• 你的网站必须是公开的
• 你的网站必须是一个开源项目或技术博客的技术文档，不授权于商业内容
• 你的网站必须到生产环境

from who-can-apply

其实一般是 GitHub 上的开源项目都会申请通过的，我是大概等了 2 天样子，会收到如下类似的邮件回复，根据 key 和 id 来替换过去旧的即可。

方法二：VitePress 添加本地搜索功能

安装插件

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

添加和配置插件

坑点

1.README 没写在哪个目录下存放vite.config.ts，依据经验放在根目录下不管用，放在.vitepress也不生效，最后挨个试才发现需要放在docs

2.示例没有引入flexSearchIndexOptions，需要手动从flexsearch中引入

3.引入后发现之前搜索框样式没了，需要在.vitepress/theme/styles/index.css下重新覆盖样式。

//vite.config.js
import { SearchPlugin } from "vitepress-plugin-search";
import { defineConfig } from "vite";
import flexSearchIndexOptions from "flexsearch";
//default options
var options = {
  ...flexSearchIndexOptions,
  previewLength: 100, //搜索结果预览长度
  buttonLabel: "搜索",
  placeholder: "情输入关键词",
};

export default defineConfig({
  plugins: [SearchPlugin(options)],
});

样式覆盖

.DocSearch-Button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: transparent;
  transition: border-color 0.25s;
}
@media (min-width: 768px) {
  .DocSearch-Button {
    justify-content: flex-start;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 10px 0 12px;
    width: 100%;
    height: 40px;
    background-color: var(--vp-c-bg-alt);
  }
}
@media (max-width: 768px) {
  .DocSearch-Button-Keys {
    display: none;
  }
  .VPNavBarHamburger {
    height: 32px !important;
    width: 32px !important;
    border-radius: 4px;
  }
}
.DocSearch-Button:hover {
  background-color: #f5f5f6;
}