原文鏈接： 基于 Hexo 鍵入搜索功能

創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)保定,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

前言

本站基于Hexo搭建，用的 ???? hexo-theme-butterfly 主題 v3.7.1，請注意最新的???? hexo-theme-butterfly 版本已經(jīng)更新到 v4.2.2 。

如果你是 v3.7.1 之外的版本，可能有些地方會有出入，請留意。

注意：我的博客根目錄路徑為 【G:/hexo-blog/blog-demo】，下文所說的根目錄都是此路徑，將用[BlogRoot]代替。如果不清楚根目錄路徑，請回到教程 基于 Hexo 從零開始搭建個(gè)人博客（二），查看你執(zhí)行hexo init xxx這條命令時(shí)所選擇的路徑，例如我選擇的路徑是【G:/hexo-blog】，我的博客根目錄即為【G:/hexo-blog/xxx】。

修改站點(diǎn)配置文件_config.yml，路徑為【BlogRoot/_config.yml】。

修改主題配置文件_config.butterfly.yml，路徑為【BlogRoot/_config.butterfly.yml】。

推薦閱讀

• 基于 Hexo 從零開始搭建個(gè)人博客（一）
• 基于 Hexo 從零開始搭建個(gè)人博客（二）
• 基于 Hexo 從零開始搭建個(gè)人博客（三）
• 基于 Hexo 從零開始搭建個(gè)人博客（四）
• 基于 Hexo 從零開始搭建個(gè)人博客（五）
• 基于 Hexo 從零開始搭建個(gè)人博客（六）
• 基于 Hexo 鍵入分享功能
• 基于 Hexo 鍵入在線聊天功能
• Hexo + Butterfly 自定義右鍵菜單

Local search

步驟如下：

1. 安裝依賴。
   前往博客根目錄，打開cmd命令窗口執(zhí)行npm install hexo-generator-search --save。

npm install hexo-generator-search --save

2. 注入配置。
   修改站點(diǎn)配置文件_config.yml，添加如下代碼：

search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

3. 主題中開啟搜索。
   在主題配置文件_config.butterfly.yml中修改以下內(nèi)容：

local_search:
-  enable: false
+  enable: true

4. 重新編譯運(yùn)行，即可看到效果。
   前往博客根目錄，打開cmd命令窗口依次執(zhí)行如下命令：

hexo cl && hexo generate
hexo s -p 8000

詳情可參考 hexo-generator-search

Algolia（推薦）

關(guān)于 Algolia 搜索功能，這里有兩種插件，一個(gè)是 hexo-algolia ，一個(gè)是 hexo-algoliasearch。第一種親測只能對匹配文章title，不能匹配文章內(nèi)容查詢到結(jié)果，所以推薦第二種。下面分別對這兩種插件做不同的說明。

獲取 Algolia 賬號

1. 注冊 Algolia。
   進(jìn)入官網(wǎng)地址 注冊，也可以直接用Github授權(quán)登錄。
   

2. 新建 Index。
   

3. 創(chuàng)建擁有一定權(quán)限的api key（如果選擇第二種插件，可忽略這一步）。
   進(jìn)入【Settings > API Keys】。
   
   進(jìn)入【All API Keys > API Keys】，點(diǎn)擊【New API Key】。在ACL里面增加刪除和新增Object的權(quán)限（按理說只用這兩個(gè)權(quán)限就行，下圖中我多加了幾個(gè)），然后填上 indices 欄目中的 index name ，選剛才你創(chuàng)建的那個(gè)index，其余默認(rèn)就行。
   
   
   點(diǎn)擊【Create】，這樣就得到了一個(gè) api key。注意一下，這個(gè)key將會在下面的步驟中用到。
   

安裝依賴 && 寫入配置

hexo-algoliasearch（推薦）

1. 安裝 Algolia 依賴。
   前往博客根目錄，打開cmd命令窗口執(zhí)行npm install hexo-algoliasearch --save。

npm install hexo-algoliasearch --save

2. 注入配置。
   修改站點(diǎn)配置文件_config.yml，添加如下代碼：

algolia:
  applicationID: ''
  apiKey: ''
  indexName: ''
algolia:
  appId: "your applicationID"
  apiKey: "your Search-Only API Key"
  adminApiKey: "your Admin API Key"
  chunkSize: 5000
  indexName: "your indexName"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

【applicationID】填入圖中位置的 Applicaiton ID，【apiKey】填入圖中位置的 Search-Only API Key ，【Admin API Key】填入圖中位置的 Admin API Key ，【indexName】填入前面創(chuàng)建的索引名稱。
3. 執(zhí)行hexo algolia。
前往博客根目錄，打開cmd命令窗口執(zhí)行hexo algolia。

hexo algolia

到如下信息，證明成功了，可以去 Algolia 網(wǎng)站上查看，索引已經(jīng)上傳成功了。

INFO  128 files generated in 2.33 s
INFO  Clearing index on Algolia...
INFO  Index cleared.
INFO  Indexing posts on Algolia...
INFO  65 posts indexed.

4. 主題中寫入 Alogolia 配置項(xiàng)。
   在主題配置文件_config.butterfly.yml中修改以下內(nèi)容：

algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我們沒有找到任何搜索結(jié)果: ${query}"
    hits_stats: "找到${hits}條結(jié)果（用時(shí)${time} ms）"

5. 重新編譯運(yùn)行，即可看到效果。
   前往博客根目錄，打開cmd命令窗口依次執(zhí)行如下命令：

hexo cl && hexo generate
hexo s -p 8000

hexo-algolia

1. 安裝 Algolia 依賴。
   前往博客根目錄，打開cmd命令窗口執(zhí)行npm install hexo-algolia --save。

npm install hexo-algolia --save

2. 注入配置。
   修改站點(diǎn)配置文件_config.yml，添加如下代碼：

algolia:
  applicationID: 'your applicationID'
  apiKey: 'your Search-Only API Key'
  indexName: 'your indexName'

【applicationID】填入圖中位置的 Applicaiton ID，【apiKey】填入圖中位置的 Search-Only API Key，
【indexName】填入前面創(chuàng)建的索引名稱。
3. 上傳數(shù)據(jù)到 Algolia。
前往博客根目錄，打開Git，依次執(zhí)行如下命令：
【your apiKey】替換為剛才自己創(chuàng)建擁有權(quán)限的api key。

export HEXO_ALGOLIA_INDEXING_KEY=your apiKey
hexo algolia

到如下信息，證明成功了，可以去 Algolia 網(wǎng)站上查看，索引已經(jīng)上傳成功了。

INFO  [hexo-algolia] Testing HEXO_ALGOLIA_INDEXING_KEY permissions.
INFO  Start processing
INFO  [hexo-algolia] 7 records to index (post, page).
INFO  [hexo-algolia] Indexing chunk 1 of 1 (7 records)
INFO  [hexo-algolia] Indexing done.

4. 主題中寫入 Alogolia 配置項(xiàng)。
   在主題配置文件_config.butterfly.yml中修改以下內(nèi)容：

algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: Search for Posts
    hits_empty: "我們沒有找到任何搜索結(jié)果: ${query}"
    hits_stats: "找到${hits}條結(jié)果（用時(shí)${time} ms）"

5. 重新編譯運(yùn)行，即可看到效果。
   前往博客根目錄，打開cmd命令窗口依次執(zhí)行如下命令：

hexo cl && hexo generate
hexo s -p 8000