利用 Algolia 为静态博客搭建实现内容搜索

news2025/4/19 21:36:11


现在静态博客的标配之一就是博客搜索🔍,我也是通过搭建博客发现了它,这篇主要记录一下怎么使用 algolia 完成博客搜索,自己的博客搭建使用的是 docusaurus 。

注册账号

首先需要去 algolia 官网注册自己的账号,可以直接使用 Github 注册登陆即可。

注册完后,创建数据源 DB:

在这里插入图片描述

创建 Application

然后就是创建了你自己的应用了:

在这里插入图片描述

在这里插入图片描述

创建完之后,需要创建关键的 index 索引了,它用来存放爬取到的内容数据。点击 Indices

在这里插入图片描述

再给索引起个名字:这个名字后面会用到!

在这里插入图片描述

Docusaurus 项目中配置 algolia

Docusaurus 官方已经支持了 algolia 搜索,直接去 docusaurus.config.js 文件配置即可:

themeConfig: {
		// ...
    algolia: {
      apiKey: "Search-Only API Key",
      indexName: "刚才创建索引的 name,不是数据源的 name",
      appId: "Application ID",
    },
}

如果是用其他搭建的比如 Hexo,VuePress/ VitePres,也类似,在对应在 config 文件配置就好。

上面 apiKeyappId 可以在 API Keys 里面查看:
在这里插入图片描述

运行项目,就可以看到出现搜索功能,这时候还不能用,因为 algolia 还没有爬取自己网站的内容。

Docker 爬取本地内容推送到 Algolia

由于 Algolia 限制开源项目才可以免费试用爬虫,所以我们要自己推送数据。需要如下环境:

  • Docker(我的是mac ,下载安装即可)
  • jq(brew install jq)—— 解析 json 文件用

爬取环境创建后,完成以下步骤

1、 创建 .env 文件存放环境变量

ALGOLIA_APP_ID=xxx
ALGOLIA_API_KEY=xxx

2、创建一个docsearch.json文件

{
	// 修改部分
  "index_name": "对应上config文件里面的indexName,也是创建的索引名",
  "start_urls": ["https://www.website.com/"], // 自己的域名网站地址
	// 更换自己的域名地址,Docusaurus 官方会有配置生成 sitemap.xml 的方式
  "sitemap_urls": ["https://www.website.com/sitemap.xml"], 
	// end
  "stop_urls": ["/search"], // 排除不需要爬取页面的路由地址
  "selectors": {
    "lvl0": {
      "selector": "(//ul[contains(@class,'menu__list')]//a[contains(@class, 'menu__link menu__link--sublist menu__link--active')]/text() | //nav[contains(@class, 'navbar')]//a[contains(@class, 'navbar__link--active')]/text())[last()]",
      "type": "xpath",
      "global": true,
      "default_value": "Documentation"
    },
    "lvl1": "header h1, article h1",
    "lvl2": "article h2",
    "lvl3": "article h3",
    "lvl4": "article h4",
    "lvl5": "article h5, article td:first-child",
    "lvl6": "article h6",
    "text": "article p, article li, article td:last-child"
  },
  "custom_settings": {
    "attributesForFaceting": [
      "type",
      "lang",
      "language",
      "version",
      "docusaurus_tag"
    ],
    "attributesToRetrieve": [
      "hierarchy",
      "content",
      "anchor",
      "url",
      "url_without_anchor",
      "type"
    ],
    "attributesToHighlight": ["hierarchy", "content"],
    "attributesToSnippet": ["content:10"],
    "camelCaseAttributes": ["hierarchy", "content"],
    "searchableAttributes": [
      "unordered(hierarchy.lvl0)",
      "unordered(hierarchy.lvl1)",
      "unordered(hierarchy.lvl2)",
      "unordered(hierarchy.lvl3)",
      "unordered(hierarchy.lvl4)",
      "unordered(hierarchy.lvl5)",
      "unordered(hierarchy.lvl6)",
      "content"
    ],
    "distinct": true,
    "attributeForDistinct": "url",
    "customRanking": [
      "desc(weight.pageRank)",
      "desc(weight.level)",
      "asc(weight.position)"
    ],
    "ranking": [
      "words",
      "filters",
      "typo",
      "attribute",
      "proximity",
      "exact",
      "custom"
    ],
    "highlightPreTag": "<span class='algolia-docsearch-suggestion--highlight'>",
    "highlightPostTag": "</span>",
    "minWordSizefor1Typo": 3,
    "minWordSizefor2Typos": 7,
    "allowTyposOnNumericTokens": false,
    "minProximity": 1,
    "ignorePlurals": true,
    "advancedSyntax": true,
    "attributeCriteriaComputedByMinProximity": true,
    "removeWordsIfNoResults": "allOptional",
    "separatorsToIndex": "_",
    "synonyms": [
      ["js", "javascript"],
      ["ts", "typescript"]
    ]
  }
}

控制台执行 docker 爬去推送命令:

docker run -it --env-file=.env -e "CONFIG=$(cat docsearch.json | jq -r tostring)" algolia/docsearch-scraper

需要提前打开下载好的 docker 应用。

接下来就是等待阶段,这里需要点时间download docker 内置的东西。

最后控制台出现:

在这里插入图片描述

说明就在推送本地爬取的内容到 algolia 了。

利用 Github Action

可以利用 github 的 Action 帮我们跑这个阶段的内容,这个还是比较方便的。

项目根目录创建 .github/workflows/docsearch.yml 文件

内容:

name: docsearch

on:
  push:
    branches:
      - master
jobs:
  algolia:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Get the content of docsearch.json as config
        id: algolia_config
        run: echo "::set-output name=config::$(cat docsearch.json | jq -r tostring)"

      - name: Run algolia/docsearch-scraper image
        env:
          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
          ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
          CONFIG: ${{ steps.algolia_config.outputs.config }}
        run: |
          docker run \
            --env APPLICATION_ID=${ALGOLIA_APP_ID} \
            --env API_KEY=${ALGOLIA_API_KEY} \
            --env "CONFIG=${CONFIG}" \
            algolia/docsearch-scraper

这里说一下设置 github action 触发的条件

  • 这个是 push 到 master 分支时触发。
on:
  push:
    branches:
      - master
  • 发布成功后触发
on: deployment
  • 定时触发
on:
  schedule:
    # 约每天早上8点触发(UTC时间0点)
    - cron: '0 0 * * *'
  • 手动触发
on:
  workflow_dispatch:

我用的是第一种,提交代码更新文件就触发。

需要注意的是:免费的创建的 algolia 限制文件 records 1000,如果超过的话,Github Action 会跑失败,所以也就是爬取推送不成功。导致搜索用不了。暂时还不知道怎么解决,所以我都是本地用 docker 的。

用起来了

根据上面步骤就可以完成 algolia 的搜索配置功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/178633.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java线程池(超详细)

1、基本概念 Java线程需要经过线程的创建&#xff0c;调用和销毁整个过程&#xff0c;频繁的创建和销毁会大大影响性能&#xff0c;所以引入的线程池&#xff1a; 好处&#xff1a; 提升性能&#xff1a;线程池能独立负责线程的创建、维护和分配线程管理&#xff1a;每个Java…

k8s安装kuboard面板

前面介绍了k8s的dashboard面板&#xff0c;这里介绍国人开发的kuboard面板&#xff0c;相较于dashboard面板&#xff0c;kuboard面板对很多运维调试功能做了很多增强。官方文档&#xff1a;https://www.kuboard.cn/install/v3/install.html#kuboard-v3-x-%E7%89%88%E6%9C%AC%E8…

实现一个TCP客户端——服务端协议

目录 TCP客户端常见的API&#xff1a; ServerSocket: Socket&#xff1a; TCP服务端(单线程版本) 属性构造方法: 启动服务端的start()方法 步骤一&#xff1a;接收客户端发送的socket 步骤二&#xff1a; 调用processConnection方法来处理客户端发送的连接 ①通过参数传入的…

影像组学|特征定义以及提取

一、 影像组学特征分类 1.1 影像组学特征分类 1.1.1 一阶统计特征 一阶统计特征&#xff0c;反应所测体素的对称性、均匀性以及局部强度分布变化。包括中值&#xff0c;平均值&#xff0c;最小值&#xff0c;最大值&#xff0c;标准差&#xff0c;偏度&#xff0c;峰度等。 …

【Linux】六、Linux 基础IO(三)|文件系统|软硬链接|文件的三个时间

目录 八、文件系统 8.1 磁盘 8.1.1 磁盘的物理结构 8.1.2 磁盘的存储结构 8.1.3 磁盘的逻辑结构 8.2 inode 九、软硬链接 9.1 软链接 9.2 硬链接 9.3 当前路径(.)和上级路径(..) 十、文件的三个时间 八、文件系统 上面的内容谈论的都是一个被打开文件&#xff0c;那…

如何将两个录音合成一个?这篇文章告诉你

现如今&#xff0c;很多小伙伴都加入到短视频行业当中。而短视频的制作往往需要将多段音频进行一个合并。那么问题来了&#xff0c;当你想多个音频进行合并在一起的时候&#xff0c;你是怎么做的呢&#xff1f;其实很简单&#xff0c;我们只需要借助市面上的一些合并软件就好了…

初始网络

文章目录初始网络局域网 / 广域网IP地址 和 端口号认识协议协议分层初始网络 这里可以先自行在网上了解一下网络的发展史 也就是互联网是怎么来的. 局域网 / 广域网 关于网络的发展史 , 会涉及到两个非常重要的术语 &#xff0c;也就是 局域网&#xff0c;和广域网 。 局域网 &…

JavaEE多线程-阻塞队列

目录一、认识阻塞队列1.1 什么是阻塞队列&#xff1f;1.2 生产者消费者模型1.3 标准库中的阻塞队列类二、循环队列实现简单阻塞队列2.1 实现循环队列2.2 阻塞队列实现一、认识阻塞队列 1.1 什么是阻塞队列&#xff1f; 阻塞队列&#xff1a;从名字可以看出&#xff0c;他也是…

简明Java讲义 2:数据类型和运算符

目录 1、安装IDE编辑器 2、关键字和保留字 3、标识符 4、分隔符 5、数据类型 6、基本类型的数据类型转换 7、表达式类型的自动提升 8、变量 9、运算符 10、运算符的优先级 1、安装IDE编辑器 在开始内容之前&#xff0c;先下载IDE&#xff0c;可以是Eclipse或STS&…

Python函数(函数定义、函数调用)用法详解

Python 中函数的应用非常广泛&#xff0c;前面章节中我们已经接触过多个函数&#xff0c;比如 input() 、print()、range()、len() 函数等等&#xff0c;这些都是 Python 的内置函数&#xff0c;可以直接使用。除了可以直接使用的内置函数外&#xff0c;Python 还支持自定义函数…

LeetCode刷题模版:201 - 210

目录 简介201. 数字范围按位与202. 快乐数203. 移除链表元素204. 计数质数205. 同构字符串206. 反转链表207. 课程表【未实现】208. 实现 Trie (前缀树)209. 长度最小的子数组210. 课程表 II【未实现】结语简介 Hello! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您…

LeetCode[1319]连通网络的操作次数

难度&#xff1a;中等题目&#xff1a;用以太网线缆将 n台计算机连接成一个网络&#xff0c;计算机的编号从 0到 n-1。线缆用 connections表示&#xff0c;其中 connections[i] [a, b]连接了计算机 a和 b。网络中的任何一台计算机都可以通过网络直接或者间接访问同一个网络中其…

(十六)异步编程

CompletableFuture在Java8中推出&#xff0c;Java8中的异步编程就是依靠此类。几种任务接口四种任务无参数有一个参数有两个参数无返回值RunnableConsumerBiConsumer有返回值SupplierFunctionBiFunctionCompletionStage接口这个类中定义的许多能够链式调用的方法和组合方法时是…

Unity3DVR开发—— XRInteractionToolkit(PicoNeo3)

目录 一、开发前的准备 二、基础配置 三、Pico项目配置 四、添加基础功能 一、开发前的准备 1、为了方便开发&#xff0c;先在Pico开发者平台里下载预览工具 Pico开发者平台https://developer-global.pico-interactive.com/sdk?deviceId1&platformId1&itemId17 2、…

【哈希表】关于哈希表,你该了解这些!

【哈希表】理论基础1 哈希表2 哈希函数3 哈希碰撞3.1 拉链法3.2 线性探测法4 常见的三种哈希结构5 总结1 哈希表 哈希表 Hash table &#xff08;一些书籍翻译为散列表&#xff09; 哈希表是根据关键码的值而直接进行访问的数据结构。 直白来讲其实数组就是一张哈希表。 哈希表…

用1行Python代码识别增值税发票,YYDS

大家好&#xff0c;这里是程序员晚枫。 录入发票是一件繁琐的工作&#xff0c;如果可以自动识别并且录入系统&#xff0c;那可真是太好了。 今天我们就来学习一下&#xff0c;如何自动识别增值税发票并且录入系统~ 识别发票 识别发票的代码最简单&#xff0c;只需要1行代码…

CSS的总结

从HTML被发明开始&#xff0c;样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长&#xff0c;为了满足页面设计者的要求&#xff0c;HTML添加了很多显示功能。但是随着这些功能的增加&…

ISIS的路由器级别level-1、level-2、level-1-2,报文格式

2.1.0 ISIS的路由器级别level-1、level-2、level-1-2&#xff0c;报文格式 通过该文章了解ISIS的路由器级别类型、级别之间建立的邻接关系、各级别的作用、ISIS报文的结构。 ISIS路由器级别 Level-1 level-1路由器又称L1路由器&#xff0c;是一种ISIS区域内部路由&#xff0c…

6、运算符

目录 一、赋值运算符 二、算数运算符 三、自增和自减运算符 四、比较运算符 五、逻辑运算符 六、位运算符 1. “按位与”运算 2. “按位或”运算 3. “按位取反”运算 4. “按位异或”运算 5. 移位操作 七、三元运算符 八、运算符优先级 一、赋值运算符 赋值运算…

[Android开发基础1] 五大常用界面布局

文章目录 一、线性布局 二、相对布局 三、帧布局 四、表格布局 五、约束布局 总结 一、线性布局 线性布局&#xff08;LinearLayout&#xff09;主要以水平或垂直方式来显示界面中的控件。当控件水平排列时&#xff0c;显示顺序依次为从左到右&#xff0c;当控件垂直排列时…