技术类博客接入 Docsearch 搜索

2022-08-05 · 811 chars · 5 min read

大家平时在看一些开源项目的网站或者文档的时候,应该会注意到,很多站点的搜索功能都是 Docsearch 提供的。

搜索对于文档类的站点,应该说是刚需了。但是自建搜索引擎非常麻烦、成本高昂;使用类似 google 的站内搜索,又过于通用,体验很差。Docsearch 的出现就很好的解决了站内搜索的各种痛点。

我的博客已经接入成功了,大家点击右上角的 🔍 体验。由于过于好用,今天必须写篇笔记推荐一下。

申请#

申请 Docsearch 要满足三个条件:

  • 网站必须可以公开访问的
  • 网站必须是开源项目的技术文档或者技术博客
  • 申请人必须是站点的拥有者、网站稳定可用

符合条件的站点可以在这里 https://docsearch.algolia.com/apply/ 提交申请,之后就是漫长的等待,因为它需要人工审核的,我记得我大概是等了半个多月。注意留意邮件。如果长时间没有回复,也可以在这里 https://discourse.algolia.com/ 发帖问一下

申请成功后会收到一封邮件,里面会有 appIdapiKey 等,还会有简单的接入教程。

建议大家看一下文档和 github 上的 sdk,选择适合你的方式接入。

使用#

我没有按照官方推荐的、最简单的方式接入,因为有两点不满足我的需求:

  • Docsearch 官方提供的 @docsearch/react 存在 ssr/ssg 和 csr 渲染不一致的问题
  • 无法自定义搜索按钮

Note

这两个问题不知道官方解决了没有,大家还是先试试看,不行了在参考我的方案

首先,安装 js 库和 css

npm i @docsearch/js @docsearch/css

然后,使用一个隐藏的容器初始化 docsearch

import React, {useEffect} from "react"
import docsearch from "@docsearch/js"

const AsyncSearch: React.FC<{}> = () => {
  useEffect(() => {
    docsearch({
      container: "#docsearch",
      appId: "<your appId>",
      apiKey: "<your apiKey>",
      indexName: "<your indexName>",
    })
  }, [])

  return <div style={{width: 0, height: 0, overflow: "hidden"}} id="docsearch" />
}

export default AsyncSearch

最后,在你的自定义按钮上绑定 click 事件,简介触发 docsearch 的 click

const handleClick = useCallback(() => {
  const $search = document.querySelector < HTMLElement > "#docsearch button"

  if ($search == null) {
    window.alert("搜索组件初始化中,请稍后再试!")
    return
  }

  $search.click()
}, [])

大功告成!

设置爬取频率#

接好一段时候后,我发现新发布的文章迟迟没有被爬虫索引到。安装官方的说法,爬虫应该一周来一次的,但据我观察并没有。

How often will you crawl my website?

Crawls are scheduled at a random time once a week. You can configure this schedule from the config file or trigger one manually from the Crawler interface.

这时候就只能收到设置了,打开爬虫的后台,点击你的站点名称

然后点击右侧菜单的 Editor,添加 schedule:

new Crawler({
  schedule: "every 7 day at 3:00 am", // 加上这一句,保存即可
})

可以根据更新频率选一个合适的时间间隔。之后到了指定的时间,Algolia Crawler 就会重新爬取并索引你的站点了

赞赏

微信