给 `vitepress` 配置 `algolia` 指南

背景

最近折腾 VitePress,想给自己的博客添加一个algolia搜索,

发现网上很多文章,还是基于老版本的vitepress使用github-Actions的CI自动爬取数据来实时更新

目前最新版本 VitePress 支持使用 Algolia DocSearch 搜索您的文档站点

避免大家被误导,所以写这个文章,避免踩坑

使用 Algolia

1. 申请使用Algolia DocSearch

docsearch 申请地址

这里有几点需要注意:

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

申请成功后,Algolia官方会给你填写的邮箱发送邮件,提醒你接受邀请,申请成功的邮件如下:

点击该地址会让你注册账号登录Algolia,或者第三方选项登录,我个人是以 GitHub 身份登录


成功登录会进入控制台页面,之后来到 Applications 这里,去创建一个应用,以我自己的为例,下图已经创建好了「vitepress」。

如果是点击邮件里的邀请地址,Algolia会默认创建好一个应用,如果没有,自己单独创建一个即可。


2. 配置

VitePress 支持使用 Algolia DocSearch 搜索您的文档站点,只需要在 .vitepress/config.js,配置Algolia参数即可

2.1 获取应用的key

如图下所示,进入 API Keys 页面。

进入该页面后,你会看见 Application IDSearch API Key,这个2个参数就是我们需要在.vitepress/config.js配置文件的参数

indexName参数可以在邮件查看,也可以在控制台搜索里查看


2.2 VitePress配置Algolia

js 复制代码
import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: 'algolia',
      options: {
        appId: '...', // 你的 Application ID
        apiKey: '...', // 你的Search API Key
        indexName: 'chunge16vitepress' // 你的indexName
      }
    }
  }
})

更多的配置可以查看 docsearch API Reference


结尾

其实vitepress 官方的本地搜索,已经很不错了,但algolia搜索更全面和强大一些。

参考

相关推荐
灵犀学长1 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
江号软件分享9 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM17 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试