技术类博客接入 Docsearch 搜索

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

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

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

申请#

申请 Docsearch 要满足三个条件：

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

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

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

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

使用#

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

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

首先，安装 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 就会重新爬取并索引你的站点了