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…