Hexo集成Algolia实现搜索功能
2年前搭建的hexo博客好久沒有維護了,一看 hexo 以及先前使用 butterfly 主題已經更新好幾個版本了,看介紹在速度性能上有了很大的提高,于是打算給 hexo 升個級,整理整理翻翻新。通過閱讀 butterfly 的官方文檔,發現 butterfly 內置功能越來越豐富并且支持了更多的三方功能,本文就帶大家通過搜索引擎
Algolia實現 hexo 站內的高效檢索~
參考:
- https://butterfly.js.org/( hexo-butterfly 官方)
- https://www.dazhuanlan.com/fjshlm/topics/1384262
- https://blog.csdn.net/lol155/article/details/107023079
什么是 Alogolia
Algolia 是一個托管搜索引擎,提供全文,數字和多面搜索,能夠從第一次擊鍵中提供實時結果,它提供了一組工具,可簡化制作完整搜索體驗并將其集成到您的網站和應用程序中的過程。這些包括:
- 支持多種不同語言的后端 API 客戶端,用于索引、配置和管理數據。
- 用于構建 Web 和移動搜索體驗的前端小部件。
- 與流行的框架和平臺集成,進一步簡化Algolia在現有項目中的集成。
- 一個安全的分布式搜索網絡,可托管您的內容并快速將其提供給客戶。
- 透明、可自定義的相關性算法。
- 一個經過大量優化的搜索引擎,從頭開始構建,C++。
- 大量文檔、實現指南和代碼示例。
簡單來說,Algolia 是一個提供云搜素服務的第三方平臺,我們可以通過調用 Algolia 的API接口把我們自己站點的數據上傳到 Alogolia 中,實現我們自己站點的搜索功能。
1. 創建 Alogolia Index
首先登陸進入 Algolia 官網,我們可以使用 GitHub 或 Google 帳號登錄。
然后進入 Dashboard,選擇 Indices 新建一個 Index,這里創建了一個名為hexo的索引
Index(索引)也就是搜索引擎中的數據庫,我們所有的搜索相關信息都存在里面。
2. 配置 API Key
接下來我們需要配置 Algolia——API Keys 到我們自己的 hexo 站點中,關聯兩者,使得 Algolia 能夠搜集我們 hexo 站點的數據通過 API 發送給 Aloglia
點擊 Dashborad 左側的 API Keys,其中的 Application ID 、Search-Only API Key、Admin API KEY信息將會被用到
首先我們需要修改 hexo 站點根目錄下的 _config.yml,進行以下配置:
algolia:applicationID: 'RF2NKDLHP9'apiKey: '605b8fc4325b813cfebbc5618f2887f5'indexName: 'hexo'
- applicationID 就是網頁中的
Applicaiton ID - apiKey 就是網頁中的
Search-Only API Key - indexName 就是我們前面創建的索引名稱
然后我們需要配置一個名稱為 HEXO_ALGOLIA_INDEXING_KEY,內容為 Alogolia 網頁中 Admin API KEY 的環境變量:
vim ~/.bash_profile
source ~/.bash_profile
3. 通過 Hexo Aloglia 獲取站點數據
前面我們創建了 Index,但是此時為空,不包含任何數據。我們需要安裝 Hexo Aloglia 擴展,這個擴展的功能是搜集站點的內容并通過 API 發送給 Aloglia
npm install --save hexo-algolia
安裝完成后,在 hexo 站點根目錄下執行hexo algolia 來搜集數據更新到我們剛創建的 Index 中
如上圖所示則代表成功將 hexo 站點中的數據發送到了 Alogolia 的 Index 中,我們可以在網頁中看到所有的數據
4. 主題集成 Alogolia
更改主題配置文件 _config.yml,找到 Algolia Search 配置部分,將enable 改為true 即可:
# Algolia search
algolia_search:enable: truehits:per_page: 6
5. 重新部署
hexo clean
hexo g
hexo d
然后重新部署到 Gitee Page,部署完成后再次訪問,即可看到搜索功能已經配置完成:
總結
以上是生活随笔為你收集整理的Hexo集成Algolia实现搜索功能的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Docsify个人网站搭建详细教程
- 下一篇: Hexo集成Valine实现评论留言