Hexo-theme-next: 請加入對 Algolia 的支援

Created on 25 Mar 2016  ·  22Comments  ·  Source: iissnan/hexo-theme-next

我注意到 Hexo.io 的站内搜尋採用的是 Algolia 的服務,它有免費方案(Hacker),而且比 Swiftype 更快更精準,配合 hexo-algolia 就可以把 index 部署上去,只不過不知道怎麼加搜尋框,想請問 NexT 是否能考慮加入支援,謝謝。

3rd party service Enhancement

Most helpful comment

改动会比较大,推迟到 5.1.0

All 22 comments

如何生成 records?

你好,records 可以按以下方法推送:

  1. 註冊 Algolia,取得 App ID 和 API Keys
  2. 安裝 hexo-algolia,輸入相關資訊並執行 $hexo algolia
  3. 在 Algolia 上設定 Ranking 裡的 Attributes to Index 和 Custom Ranking(後者由於沒有文章裡計數器,貌似沒有很好的排序依據)

完成以後應該能在站上的模擬搜尋框看到效果,但我不知道如何在 Blog 上安裝搜尋框……
我有找到 Hexo 作者的方法,他是申請 Algolia 的 DocSearch 服務,不過這項服務需經專人,可以的話還是希望研究出 Algolia App 的方法。

https://zespia.tw/blog/2016/01/01/algolia-doc-search/

我找到官方的一個範例,不過是針對 Jekyll,效果很好

https://blog.algolia.com/instant-search-blog-documentation-jekyll-plugin/

這邊有些 JS 的說明文件,但我不會設定,不好意思
https://www.algolia.com/doc/javascript

我剛才又確認了一下 https://github.com/hexojs/site/commit/a3961d9cd3958141cebf8f02c13c9849fe7cf421 的修改,大概分為:

  1. Instant Search API 的設定
  2. DocSearch 的設定
  3. UI 的設定

在 Hexo 上用 Algolia 到底需不需要 DocSearch,這我還不確定,但如果只需要一三步的話,第一步https://www.algolia.com/doc/javascript裡已經有提到,只要在 footer.swig 裡加一段代碼就行;第三步的 UI 我不會設定,剛才照著 Example 把搜尋框加在 header.swig 裡,但輸入以後沒反應。一三步或許有些要對應的地方,但我功力還太淺不會設定……

PS
我剛執行 hexo algolia 的時候,發現 index 裡的 record 都不見了,後來重新 hexo g 一次才又更新成功。

分享一下我跟 Algolia 官方最後一次的郵件往來,結論是應該用不著 DocSearch,只要部署好 Index 和 JS,也可以在個人 Blog 上安裝 Instant Search。

Hi Jimmy,
Thank you for your message. Once you manually imported the content of your blog to Algolia, you can integrate Algolia on the frontend. Basically, you'll make queries to the API directly from the front end, and Algolia will render a json file containing the results of the search, so that you can display them.
The community page includes some useful links to front end libraries that will help you build the UI:

  • The AlgoliaSearch JavaScript Helper Helper.js is the high level library for building non-trivial search UI.
  • Autocomplete.js is a flexible JavaScript library that provides a strong foundation for building robust as-you-type search input.

You might also be able to work with InstantSearch.JS. https://community.algolia.com/instantsearch.js/

Does it make sense?

Jean-Edern

多谢你的 research,我会尝试在 5.0.1 (or 5.1.0) 中加入 Agolia 的支持

不會,我有看到 milestone,謝謝採納,Algolia 今天又回了一封:

Hi Jimmy, right you don't need docsearch. Check out our documentation page https://www.algolia.com/doc We wrote a lot of guides and documentation to guide you through the process of implementing Algolia :)

Looking forward to see your implementation live!

Jean-Edern

这两天试了下 Algolia,搜索确实很好。现在有一个担心就是免费的 quota 估计不够用

改动会比较大,推迟到 5.1.0

知道了,Hacker 版 quota 是 10,000 Records,如果 1 Post 1 Record 的話,以我個人來說感覺還能撐滿久。

你好,我今天試著部署 5.1.0 了,但當我在 .config.yml 裡 enable algolia search 並執行 hexo a 之後,「檢索」還是無法點擊。請問正確的設定方式是?謝謝。

急求!!!!!!!!!!!!!!!!!!!!楼主好人,一生平安!!!!!!!!!!!!!!!!!!!!

@mcknote 浏览器控制器(Google Chrome 按 F12)是否有报错信息?能否在页面源码里找到 algolia 字眼?

@iissnan 你好,我查了一下,發現是 /lib/algolia-instant-search/instantsearch.min.js.map 載入不成功,請問我該如何修改?謝謝。

map 文件没有影响的

感謝 @iissnan 的說明文件,經過一年多我終於成功部署了 Algolia。針對無法跳出搜尋介面的問題,我根據這篇文章修改了 header.swig

另外請問該如何對 adminApiKey 保密保存?我用了 Travis-CI,所以這篇文章提到的建立多個 _config.yml 可能不適用。

Was this page helpful?
0 / 5 - 0 ratings

Related issues

keltoy picture keltoy  ·  3Comments

winterrain5 picture winterrain5  ·  4Comments

dev-fancyluo picture dev-fancyluo  ·  3Comments

liyuan989 picture liyuan989  ·  3Comments

Nirvanada picture Nirvanada  ·  4Comments