乐趣区

HexoNext集成Algolia搜索

集成 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。前往站点根目录,执行命令安装:

npm install hexo-algolia --save  # 目前最新版本是 1.2.4,下面的操作都是基于这个版本的文档

获取 Key,更新站点根目录配置

前往站点根目录打开_config.yml 添加以下代码

# Algolia Search API Key
algolia:
  applicationID: '你的 Application ID'
  apiKey: '你的 Search-Only API Key'
  indexName: '输入刚才创建 index name'

修改 Algolia 搜索 ACL(访问控制列表)

选中后保存。

操作完成后执行命令

 export(windows 为 set) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY= 你的 Search-Only API key
 set (Mac 和 git bash 为 export) (Powershell 用 $env:) HEXO_ALGOLIA_INDEXING_KEY     #查看是否设置成功如果没有值就设置失败
 hexo algolia

成功后修改 Next 主题配置文件

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

# Algolia Search
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我们没有找到任何搜索结果: ${query}"
    hits_stats: "找到约 ${hits}条结果(用时 ${time}ms)"

将 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

解决方案:找到 themesnextsourcecss_commoncomponentsthird-party 下面的 algolia-search.styl 文件 第 8 行追加

  +mobile()
    z-index: 1000

我的博客和 github 地址

http://blog.langpz.com

https://github.com/lanpangzhi

参考

http://theme-next.iissnan.com/third-party-services.html#algolia-search

https://github.com/oncletom/hexo-algolia

退出移动版