给 `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搜索更全面和强大一些。

参考

相关推荐
风无雨15 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家2 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js