JobbyM's Blog

Hexo集成Algolia搜索插件

前言

个人博客自从2016年10月21日搭建以来,迄今为止已经有49 篇日志了。虽然不是很多篇文章,但是搜索站内的内容已经力不从心了。

搜索了网上很多关于“Hexo 站内搜索”的内容,发现大部分都是使用Swiftype,但是发现Swiftype 搜索只有15 天的免费,之后就需要开始收费了。

因为只是为自己的个人博客 使用站内搜索,所以希望找一个类似与Swiftype 的,但是免费的站内搜索。最后找了Algolia 这个免费版本替代。

下面简单说下搭建过程:

搭建过程

前提条件

如果你的Next 版本为5.1.0 之后,可以使用Algolia。如果不是,请先升级到5.1.0 版本之后

一个Algolia 帐号

官网地址 使用GitHub 或Google 帐号登录。

创建Index

进入Dashboard
选择Indices 新建一个Index。

安装Hexo Algolia

Index 创建完成后,此时Index 为包含任何数据。需要安装Hexo Aloglia 扩展,这个扩展的功能是搜集站点的内容并通过API 发送给Aloglia。前往站点根目录,执行命令安装:

1
npm install --save hexo-algolia

获取Key,更新站点信配置

点击Dashborad 左侧的API Keys,其中的信息接下来将会被用到。

包括Application IDSearch-Only API KeyAdmin API Key,其中Admin API Key 需要保密保存

编辑站点配置文件,新增以下配置:

1
2
3
4
5
6
algolia:
applicationID: 'SV57WJ53OS'
apiKey: 'c7d219504e44d09ab55f5f7a195fce98'
adminApiKey: 'adminApiKey'
indexName: 'dev_jobbymsblog'
chunkSize: 5000

更新Index

当配置完成,在站点根目录下执行hexo algolia 来更新Index。请注意观察命令的输出。

主题集成

更改主题配置文件,找到Algolia Search 配置部分:

1
2
3
4
5
6
7
8
9
# Algolia Search
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"

enable 改为true 即可,根据需要你可以调整labels 中的文本。

问题

1. 点击搜索结果,结果跳转地址为:
1
Cannot GET /undefined/

按照5.1.0使用algolia搜索问题这里进行的处理,在这里总结一下:

  • 因为hexo-aloglia 的作者没有把post.path 加入index,所以data.pathundefined
  • 遇到这个问题,首先运行npm uninstll hexo-algolia 卸载之前的版本,再运行npm install hexo-algolia@0.2.0 --save,最后运行hexo algolia 命令重新index 就可以了。

参考文档

  1. Swiftype站内搜索
  2. Next 第三方服务集成