Hexo+Next集成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

解决方案： 找到\themes\next\source\css_common\components\third-party 下面的algolia-search.styl 文件 第8行追加

+mobile()
    z-index: 1000
复制代码

个人博客和github地址

blog.langpz.com

github.com/lanpangzhi

参考

theme-next.iissnan.com/third-party… github.com/oncletom/he…