我正在参加「启航计划」

跟着网站的内容变多，站内查找变得至关重要。像咱们常用的 Vue、React 等文档站点，都增加了全文查找功用，并且都使用了 algolia。跟着这篇文章咱们一起了解下什么是 algolia、怎么给自己的博客增加全文查找。

algolia 是什么？

algolia是一个查找、引荐服务平台，能够经过简略的装备来为站点增加全文检索功用。

基本原理：经过爬虫对方针网站的内容创立 Records（记录），在用户查找时调用接口回来相关内容。

给自己的博客增加全文查找

一. 创立 Application

首先咱们去创立一个 algolia 账号，接着根据指引创立应用（Application）和索引（Index），官网有具体的步骤，在这里就不做过多介绍了。创立完进入到应用，大概是这个样子。

快来给你的博客添加全文搜索

二. 增加 Records（要害）

最核心的便是这里了，咱们怎么增加自己站点的信息？这里有两种方法

计划一：使用官方的 Algolia Crawler 爬虫后台

网上搜到的大多是这种，经过发送邮件来请求免费的服务。 VuePress 博客优化之敞开 Algolia 全文查找 这篇文章有讲怎么弄。

不引荐这个计划，原因如下：

  1. 一般情况下咱们想要的是更新博客后第一时间同步查找。可是这个服务是定时更新（7天主动同步一次，应该能够设置），当然必定能够手动刷新，可是… 手动？程序员最厌烦的便是手动。
  2. 不知道哪步错了，没请求下来，一直要求付费（对于个人项目，algolia 是有开源项目来帮助咱们完结的，见计划二）。

计划二：DocSearch Scraper Action

使用 Github Actions 在 Docker 中运转自托管的 AlgoliaDocSearch scraper

  1. 获取 Application ID 和 Admin API Key
    快来给你的博客添加全文搜索

快来给你的博客添加全文搜索

  1. 将 Application ID 和 Admin API Key 设置到仓库（Github）的 Secrets

快来给你的博客添加全文搜索

  1. 在项目根目录创立装备 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"
  }
}
  1. 在项目的 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 }}

三、在项目中接入

  • VuePress
// .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/

参考

  • zhuanlan.zhihu.com/p/549263050
  • github.com/marketplace…
  • github.com/vuejs/vitep…