快来给你的博客添加全文搜索
随着网站的内容变多,站内搜索变得至关重要。像我们常用的 Vue、React 等文档站点,都添加了全文搜索功能,并且都使用了 algolia。跟着这篇文章我们一起了解下什么是 algolia、如何给自己的博客添加全文搜索。
algolia 是什么?
algolia 是一个搜索、推荐服务平台,可以通过简单的配置来为站点添加全文检索功能。
基本原理:通过爬虫对目标网站的内容创建 Records(记录),在用户搜索时调用接口返回相关内容。
给自己的博客添加全文搜索
一. 创建 Application
首先我们去创建一个 algolia 账号,接着根据指引创建应用(Application)和索引(Index),官网有详细的步骤,在这里就不做过多介绍了。创建完进入到应用,大概是这个样子。
二. 增加 Records(关键)
最核心的就是这里了,我们如何添加自己站点的信息?这里有两种方式
方案一:使用官方的 Algolia Crawler 爬虫后台
网上搜到的大多是这种,通过发送邮件来申请免费的服务。 VuePress 博客优化之开启 Algolia 全文搜索 这篇文章有讲怎么弄。
不推荐这个方案,原因如下:
- 一般情况下我们想要的是更新博客后第一时间同步搜索。但是这个服务是定期更新(7天自动同步一次,应该可以设置),当然肯定可以手动刷新,但是... 手动?程序员最讨厌的就是手动。
- 不知道哪步错了,没申请下来,一直要求付费(对于个人项目,algolia 是有开源项目来帮助我们完成的,见方案二)。
方案二:DocSearch Scraper Action
使用 Github Actions 在 Docker 中运行自托管的 Algolia DocSearch scraper
- 获取
Application ID
和Admin API Key
- 将
Application ID
和Admin API Key
设置到仓库(Github)的Secrets
- 在项目根目录创建配置 algolia.json (爬虫的配置文件)
下面👇是笔者的配置,可根据文档自行调整,也可以参考一些配置模版
{
"index_name": "vitepress-blog",
"start_urls": ["https://mingyuli97.github.io/blog"],
"rateLimit": 8,
"maxDepth": 10,
"selectors": {
"lvl0": {
"selector": "",
"defaultValue": "Documentation"
},
"lvl1": ".content h1",
"lvl2": ".content h2",
"lvl3": ".content h3",
"lvl4": ".content h4",
"lvl5": ".content h5",
"content": ".content p, .content li"
}
}Ï
- 在项目的 worlflow 中添加新任务
algolia:
needs: deploy
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Get the content of algolia.json as config
id: algolia_config
run: echo "::set-output name=config::$(cat algolia.json | jq -r tostring)"
- name: Push indices to Algolia
uses: signcl/docsearch-scraper-action@master
env:
APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
API_KEY: ${{ secrets.API_KEY }}
CONFIG: ${{ steps.algolia_config.outputs.config }}
三、在项目中接入
<XXX_XXX>
这种是占位,需要替换成自己对应的值
// .vuepress/config.js
module.exports = {
themeConfig: {
algolia: {
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>'
// If Algolia did not provided you any `appId`, use `BH4D9OD16A` or remove this option
appId: '<APP_ID>',
}
}
}
- VitePress
官方文档没有写,参考 issue 可以这么用
// docs/.vitepress/config.ts
algolia: {
appId: '<APP_ID>',
apiKey: '<API_KEY>',
indexName: '<INDEX_NAME>'
}
最后
- 查看项目完整配置:github.com/mingyuLi97/…
- 查看最终效果:mingyuli97.github.io/blog/
参考
备注
----- 2023.4.20 更 -----
最近发现自己博客搜索功能失效了,但是在 Algolia Dashboard 中搜索却是正常的。于是给官方发了邮件,下面是官方的回复。
大概意思就是,我在发送请求的时候增加了 facetFilters: [lang: en-US]
,但是后台的 records 中并没有设置。
🤔 想到前段时间升级了 vitepress 的版本,可能与这个有关。
打开 vitepress 仓库,全局搜了一下 facetFilters,果然有这个字段,跟踪了下文件 commit 记录,原来是 Vitepress 支持了 i18n,在发送请求时会默认加上 lang 字段,这就导致之前的配置失效, 原因见源码。
知道原因,就很好解决了,只要让我们的 records 加上 lang 就可以了。详细操作见 commit。
转载自:https://juejin.cn/post/7157340749065895944