Hexo+Next整合Algolia搜尋

jilei786發表於2018-05-10
HexoGo

整合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，更新站點根目錄配置

Hexo+Next整合Algolia搜尋

前往站點根目錄開啟_config.yml新增以下程式碼

# Algolia Search API Key
algolia:
  applicationID: '你的Application ID'
  apiKey: '你的Search-Only API Key'
  indexName: '輸入剛才建立index name'
複製程式碼

修改Algolia搜尋ACL（訪問控制列表）

Hexo+Next整合Algolia搜尋

選中後儲存。

操作完成後執行命令

 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
複製程式碼

Hexo+Next整合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 中的文字。這個是我修改的文字。

Hexo+Next整合Algolia搜尋

總結一下整合遇到的BUG

Please provide an Algolia index name in your hexo _config.yml flle

Hexo+Next整合Algolia搜尋

原因：Algolia Search API Key indexName 錯了

解決方案：看下之前新建index的名字

Not enough rights to update an object near

Hexo+Next整合Algolia搜尋

原因：沒有修改Algolia搜尋ACL（訪問控制列表）

解決方案： 按1.4操作勾選上就可以

移動端遮罩蓋住搜尋

Hexo+Next整合Algolia搜尋

原因：遮罩的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…

相關文章