集成Algolia搜索
起因Swiftype现在收费了,也没有免费版本。Local Search搜索体验不好,微搜索Next官网上描述太少!所以选择Algolia。
注:Algolia搜索在版本 5.1.0 中引入,要使用此功能请确保所使用的 NexT 版本在此之后
首先注册Algolia账户
Algolia 登陆页面https://www.algolia.com/users/sign_in,可以使用 GitHub 或者 Google 账户直接登录,也可以注册一个新账户。我直接用谷歌账户登陆了,注册后的 14 天内拥有所有功能(包括收费类别的)。之后若未续费会自动降级为免费账户,免费账户 总共有 10,000 条记录,每月有 100,000 的可以操作数。
注册完成后,创建一个新的 Index,这个 index name 之后会用到
Index 创建完成后,此时这个 Index 里未包含任何数据。 接下来需要安装 Hexo Algolia 扩展, 这个扩展的功能是搜集站点的内容并通过 API 发送给 Algolia。前往站点根目录,执行命令安装:
1 | npm install hexo-algolia --save # 目前最新版本是1.2.4,下面的操作都是基于这个版本的文档 |
获取 Key,更新站点根目录配置
前往站点根目录打开_config.yml添加以下代码
1 | # Algolia Search API Key |
修改Algolia搜索ACL(访问控制列表)
选中后保存。
操作完成后执行命令
1 | export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY=你的Search-Only API key |
成功后修改Next主题配置文件
更改Next主题配置文件,找到 Algolia Search 配置部分:
1 |
|
将 enable 改为 true 即可,根据需要你可以调整 labels 中的文本。这个是我修改的文本。
总结一下集成遇到的BUG
Please provide an Algolia index name in your hexo _config.yml flle
原因:Algolia Search API Key indexName 错了
解决方案:看下之前新建index的名字
Not enough rights to update an object near
原因:没有修改Algolia搜索ACL(访问控制列表)
解决方案: 按1.4操作勾选上就可以
移动端遮罩盖住搜索
原因:遮罩的z-index值太高,我的next主题是5.1.3版本可能其他版本没有这个BUG
解决方案: 找到\themes\next\source\css_common\components\third-party 下面的algolia-search.styl 文件 第8行追加
1 | +mobile() |
参考
http://theme-next.iissnan.com/third-party-services.html#algolia-search
https://github.com/oncletom/hexo-algolia