【干貨】2個小時教你hexo博客添加評論、打賞、RSS等功能 (轉)

　　

備注：該教程基於Hexo 2.x版本，目前Hexo是3.x版本，照本教程實現有可能會出現404錯誤，筆者目前還未找時間去解決，待筆者找時間解決該問題后，再寫一篇該問題的解決教程，給各位讀者帶來困擾，還請多包涵！若有讀者遇到類似的問題解決了，歡迎在文章的評論區評論留言，我們相互學習！

前情提要

幾個月前，寫過幾篇關於Hexo博客搭建的教程，最近幾天，發現有很多讀者私信我一些Hexo搭建過程中遇到的問題，重新燃起了我對Hexo博客的興趣，於是花了一兩天的時間重新將Hexo博客搭建了一下，並通過配置實現了一些附加功能，寫下此篇博客，希望可以幫助讀者們深入Hexo博客的使用。

本篇教程基於NexT主題的博客配置，實現更換主題、評論、打賞等功能，接下來根據這些功能進行分點描述，附上個人博客以供比對參考：程序員技術棧。

搭建基本Hexo博客

Hexo博客基本搭建參考：《20分鍾教你使用hexo搭建github博客》一文，筆者按照教程的順序一步一步來，是沒有出現錯誤的，如果讀者們在搭建的時候遇到了問題不知如何解決，筆者會盡自己所能幫助讀者，並將遇到的問題及解決方法附在文章下方。

Hexo博客綁定域名

關於Hexo博客如何綁定自己的域名，詳情可參閱《hexo搭建的Github博客綁定域名》一文。

更換Hexo主題

筆者更換后的主題為NexT，其Github網址為：https://github.com/iissnan/hexo-theme-next 。首先將NexT的主題源文件下載到本地，使用Git克隆指令如下：

git clone https://github.com/iissnan/hexo-theme-next themes/next 

下載后，將壓縮包解壓縮，復制其中名稱為next的文件夾到Hexo的主題目錄下，主題目錄的路徑為：

Hexo博客根目錄/themes/

效果如下圖所示：

 

NexT主題包

在Hexo根目錄下有一個以_config.yml命名的文件（下稱站點配置文件），用Sublime等文本編輯器打開，在其中找到theme屬性，將其由landscape改為next。

 

修改主題

然后在Hexo根目錄執行部署Hexo指令：

// 清理緩存 hexo clean // 生成文件 hexo generate // 部署 hexo deploy 

便可以在遠程的博客上看到修改主題后的樣式了。

 

NexT主題樣式

設置Hexo主題模式

看到上圖，讀者可能會產生疑問，為什么自己的主題樣式和筆者的不一樣，這是因為在Hexo主題中，有三種不同的模式，通過切換模式，讓NexT主題顯示不一樣的樣式。在NexT根目錄下有一個同樣名稱為_config.yml，為了區分hexo根目錄下的_config.yml，將前者稱為主題配置文件，在其中找到scheme屬性，如下圖所示：

 

scheme屬性

NexT主題默認使用Muse模式，讀者可根據自己的喜好，選擇其中一種模式。

設置預覽摘要

設置完模式后，讀者們會發現，盡管首頁顯示的是所有文章的列表，但是每一篇文章都顯示了所有內容，這樣感覺看起來不舒服，這時候可以啟用預覽摘要模式，在主題配置文件中找到auto_excerpt屬性，將enable設置為true ，將length設置為想要預覽到的字數，如下圖所示：

 

設置預覽摘要

設置完畢后，調用部署指令，如下：

// 清理緩存 hexo clean // 生成文件 hexo generate // 部署 hexo deploy 

這里說明一下：上述的部署指令中hexo deploy可以換成hexo server，兩者的區別在於，前者是將博客部署到遠程的Github上，而后者是運行在本地，通過http://localhost:4000在瀏覽器中訪問。后者是為了調試配置方便而使用，但是最終本地博客還是需要hexo deploy指令將其部署至Github上。

添加評論功能

NexT目前出到5.1.0版本，功能模塊已經相當的豐富。NexT主題集成了評論系統，只需要設置相關的屬性即可實現功能，其目前支持多說、Disqus、Facebook評論、Hyper評論、網頁雲跟帖等，其中“多說”是NexT推薦的評論系統，但是多說評論系統不穩定，經常會出現服務異常的問題，如下圖所示：

 

“多說”服務異常

所以筆者查閱了網上，找到了另一款名為友言的評論系統，它也是NexT已經集成好的，可以直接拿來用的。下面對其操作進行講解：

• 注冊友言賬號
  打開友言官網，單擊“注冊”按鈕后，按照套路可完成賬號注冊。

• 獲取uid
  注冊完登錄后，在首頁單擊“后台管理”按鈕進入后台界面便可看到自己的用戶ID，將其復制下來。

   

  

  獲取uid

   

• 主題配置文件 設置uid
  打開主題配置文件，在其中找到屬性youyan_uid，然后在:后添加之前復制的uid，如下圖所示：

   

  

  Paste_Image.png

   

這里強調一下：所有屬性的設置，其:后必須有一個空格。

然后部署一下Hexo，可以在本地或遠程看到實現的評論功能，如下圖所示：

 

友言評論功能

在筆者配置評論功能的時候，筆者遇到了一個問題： 本地博客有評論功能，而遠程博客卻沒有 。折騰了一下午，始終不知道其原因所在。后來，當筆者對博客綁定自己的域名后，發現遠程的博客自動出現了評論功能，這里不清楚是 域名的緣故 還是 網絡延遲 的緣故。若讀者們遇到這個情況，可以放放，先配置其他功能。

 

添加打賞功能

打賞是讀者對筆者支持的最大動力，作為經常寫博客的筆者來說，打賞功能如果在自己的博客中出現，那真的是求之不得呀（雖然基本不會有人來打賞）！而NexT正好集成了打賞的功能，其實現的思路是放上收款二維碼，讓讀者掃碼后支付。筆者添加了微信支付和支付寶支付，所以以此為例：

• 獲取微信收款二維碼
  微信二維碼的獲取途徑還是比較容易的，按照這個教程即可實現，讀者們也可以預先設置收款的金額。

• 獲取支付寶收款二維碼
  筆者上網查了很多關於支付寶收款二維碼的相關信息，奈何得到的結果不是版本不一致就是商家認證，找了好久，終於找到一個符合要求的教程，讀者們可別被“商家平台”這幾個字嚇到了，普通用戶一樣可以開通，且不需要相關證件的認證，讀者們可根據這個教程獲得自己的支付寶收款二維碼。

• 添加二維碼圖片資源
  得到二維碼圖片資源后，讀者們可將二維碼圖片放到NexT根目錄/source/images/文件夾下。

• 開啟打賞功能
  找到主題配置文件，在其最后添加打賞的配置信息:

reward_comment: 堅持原創技術分享，您的支持將鼓勵我繼續創作！
wechatpay: 圖片鏈接或圖片相對路徑
alipay: 圖片鏈接或圖片相對路徑

其信息如下圖所示：

 

開啟打賞功能

然后部署一下Hexo，便可實現打賞功能，效果圖如下：

 

打賞功能效果圖

設置側邊欄顯示效果

鑒於個人喜好，筆者不是很喜歡在打開一篇文章的時候，剛想好好品讀，卻因為側邊欄的出現擾亂視覺，所以想對其進行設置。

 

側邊欄在文章加載好時出現

在主題配置文件中，找到sidebar的display屬性，display屬性有四種顯示模式：分別為：

post    // 默認顯示方式 always // 一直顯示 hide // 初始隱藏 remove // 移除側邊欄 

筆者將其設置為hide模式，如下圖所示：

 

設置側邊欄顯示效果

讀者們可根據個人喜好進行設置。

添加菜單選項

默認情況下，菜單導航欄有首頁、歸檔、關於三個選項，除此之外筆者還添加了分類、標簽和關於。在主題配置文件中，找到menu屬性，並去掉categories、 tags、about的的注釋，如下圖所示：

 

菜單選項設置

然后在Hexo根目錄執行指令如下：

// 添加分類頁面 hexo new page "categories" // 添加標簽頁面 hexo new page “tags” // 添加關於頁面 hexo new page "about" 

執行完上述指令后，在Hexo根目錄/source/文件夾下創建三個文件夾，命名分別為：categories、tags、about文件夾，在這些文件夾中分別會創建一個以index命名的Markdown文件，對這三個Markdown文件內容進行修改，使之分別為：

---
title: categories
date: 2017-03-12 22:06:24
type: "categories" --- 

---
title: 標簽
date: 2017-03-12 17:27:16
type: "tags" --- 

---
title: about
date: 2017-03-12 22:07:26
type: "about" --- 

完成文件的修改，然后部署Hexo即可完成菜單選項的添加。

添加搜索功能

 

導航菜單欄

完成了上述菜單選項的添加后，讀者們可以看到菜單欄中還有搜索一項，搜索的功能源於第三方服務——Algolia，接下來看看配置的步驟：

• 注冊Algolia，創建Index
  在Algolia官網注冊一個賬戶，完成賬戶注冊后，創建一個Index，如下圖：
  
   

  

  創建Index
• 安裝Hexo Algolia
  在Hexo根目錄執行如下指令，進行Hexo Algolia的安裝：

npm install --save hexo-algolia

執行完指令后，讀者們可能會發現安裝失敗，或發現安裝成功后實現的搜索功能可以搜索但是不可以點擊搜索到的文章，這是因為5.1.0版本NexT在package.json文件的配置中存在錯誤。
到Hexo的根目錄，在其中找到package.json文件，修改其中的hexo-algolia屬性值為^0.2.0，如下圖所示：

 

修改package.json文件

"hexo-algolia": "^0.2.0" 

然后再執行上述的安裝指令。

• 獲取Key，修改站點配置
  完成Hexo Algolia后，回到Algolia官網的Dashboard，在左側導航欄選擇API Keys一項，跳轉到如下圖所示的頁面。

 

獲取Key

基於這個頁面的Key，編輯站點配置文件，在文件內容最后添加如下圖所示的信息，包括 ApplicationID、Search-Only API Key、 Admin API Key和indexName，其中apiKey就是Search-Only API Key：

 

Algolia配置信息

 

• 更新Index
  配置好Key后，在Hexo根目錄執行hexo algolia來更新Index，若出現如下圖所示，則表示更新成功：

 

 

更新Index

若更新失敗，則返回上面安裝Hexo Algolia的步驟，查看一下hexo-algolia是否安裝成功，並核實一下package.json信息是否正確。

 

• 啟用配置搜索功能
  修改主題配置文件，在其中找到algolia_search屬性，將其enable子屬性改為true，然后再看其labels子屬性，修改相應的提示文本，使之更加適合自己的風格，屬性配置如下圖所示：
  
   

  

  啟用配置搜索功能

經過上述的操作后，部署Hexo，便可在博客中添加搜索功能，其效果圖如下：

 

找到搜索結果

 

未找到搜索結果

添加閱讀次數統計

筆者以為，寫技術博客一方面作為個人知識積累外，更重要的是讓讀者通過閱讀有所收獲，而閱讀數量作為一篇文章質量好壞的重要參考因素，可以為作者繼續文章創作帶來信心。抱着這份理解，筆者給自己的博客添加了查看閱讀數量的功能。閱讀次數統計是基於第三方服務——LeanCloud實現的，其配置詳情如下：

• 創建LeanCloud賬號
  進入LeanCloud官網，按照套路完成注冊，這里不做贅述。

• 創建應用
  注冊並登錄LeanCloud后，進入控制台，單擊“創建應用”按鈕進行應用的創建，輸入新應用名稱，選擇開發版，單擊“創建”按鈕完成創建，如下圖所示：

   

  

  創建應用

   

• 創建Class
  進入到剛剛創建的應用中，選擇左側導航欄的“存儲”，然后點擊“創建Class”，為了與NexT形成配置關系，將Class名稱填為Counter，並選擇無限制選項，然后單擊“創建Class”按鈕完成Class的創建，如下圖所示：

   

  

  創建Class
  
  點擊剛剛創建的Counter，其實質是一張結構表，用來記錄文章的瀏覽量，如下圖所示，這里的表可以直接對文章閱讀次數進行修改，所以如果想要追求閱讀次數的讀者可以在表上直接進行修改。
  
   

  

  Counter表

   

• 配置Key
  在左側導航欄的設置界面，單擊“應用Key”可以看到應用的App ID和App Key。

   

  

  Key
  
  復制ID和Key，然后將其配置到主題配置文件中，在文件中找到leancloud_visitors屬性，將enable設置為true，然后將之前復制的ID和Key粘貼到相應的屬性中。
  
   

  

  配置ID和Key

   

至此，閱讀次數統計添加完成，其效果圖如下所示：

 

添加閱讀次數統計

添加RSS

筆者之前雖聽過RSS這個名詞，但至今不知其為何物、何以用之，望知曉的讀者在文章下方留言評論，指點一二。筆者表示對RSS不明覺厲，覺得有必要添加上，提升一下逼格，所以接下來看看RSS功能的添加：

• 安裝 hexo-generator-feed 插件
  RSS需要有一個Feed鏈接，而這個鏈接需要靠hexo-generator-feed插件來生成，所以第一步需要添加插件，在Hexo根目錄執行安裝指令：

npm install hexo-generator-feed --save

• 配置feed信息
  在站點配置文件中追加如下圖所示的信息：
  
   

  

  RSS配置
  
  feed屬性下的各個子屬性的含義借用feed官方英文解釋如下：
  • type - Feed type. (atom/rss2)
  • path - Feed path. (Default: atom.xml/rss2.xml)
  • limit - Maximum number of posts in the feed (Use 0 or false to show all posts)
  • hub - URL of the PubSubHubbub hubs (Leave it empty if you don't use it)
  • content - (optional) set to 'true' to include the contents of the entire post in the feed.

如此這般，RSS功能添加完成，效果圖如下：

 

RSS效果

單擊RSS按鈕，跳轉如下界面：

 

RSS跳轉結果

添加社交鏈接

筆者希望在個人博客中加入自己的簡書和Github鏈接以提高訪問量，接下來了解一下社交鏈接如何添加：

• 添加鏈接
  在主題配置文件中找到social屬性，在其下方添加社交鏈接，其格式為：

社交平台名稱：鏈接

筆者添加的內容如下圖所示：

 

添加社交鏈接

• 添加鏈接圖標
  讀者們可根據自己喜好，啟用顯示鏈接的圖標，鏈接的圖標全部來自於Font Awesome ，其配置方式也很簡單，在主題配置文件中找到social_icons，修改其狀態值為true，然后配置對應鏈接的圖標，其格式為：

社交平台名稱: Font Awesome中的圖標的名字（區分大小寫）

如下圖所示：

 

添加鏈接圖標

如筆者添加的社交鏈接中有簡書，但是Font Awesome平台沒有簡書的圖標，這時候就會顯示默認的圖標：

 

默認圖標

這里筆者遇到了一個問題，就是筆者啟用了圖標以后，發現不論Font Awesome平台有沒有對應的社交平台的圖標，最終顯示效果都是默認的圖標，若遇到相同問題的讀者們解決了這個問題，望可以在文章下方評論留言，感謝！

 

全部顯示默認圖標的社交鏈接

添加友情鏈接功能

筆者身邊有很多志同道合的好友，也都有用其他博客搭建工具如wordpress、jekyll等來搭建自己的博客，寫的文章多了，當然希望可以收獲更多的流量，這時候好友之間就會互相幫忙，在自己的博客上添加好友的博客鏈接。接下來看一下如何實現這個功能：

在主題配置文件中找到links屬性，修改links_title屬性的值為“友情鏈接”（也可以是其他文案），然后添加上好友的博客名稱和博客地址，其格式如下：

博客名稱: 博客鏈接

如下是筆者的配置信息：

 

Paste_Image.png

配置完成后部署Hexo，即可實現友情鏈接的效果，附圖如下：

 

友情鏈接

寫在后面

其實筆者本篇文章是在閱讀完NexT的官方配置文檔后編寫的，考慮到文檔內容較多，且其中很多功能一般用不到，就挑選了其中比較常用的功能。在閱讀官方文檔的時候，發現文檔中有些地方將主題配置文件與站點配置文件弄混了，因此本篇文章也算是對官方文檔中的錯誤進行更正吧！當然本文肯定有描述不夠清楚的地方，讀者們有疑問的話，歡迎在文章下方留言，亦可參閱官方文檔進行對比配置，最后附上官方文檔的鏈接供讀者們參閱：
http://theme-next.iissnan.com/

---

疑難解答

• 密鑰生成的位置在哪里？
  Windows平台：C:/Users/用戶名/.ssh/
  Mac OS平台：~/.ssh/

• .ssh文件找不到
  .ssh文件以.開頭，在一些操作系統中是隱藏文件，需要將隱藏文件設置可見。

• npm install時，出現npm error: RPC failed錯誤
  開啟翻牆軟件，或將重新設置npm鏡像為淘寶的npm鏡像，修改操作詳見：http://blog.csdn.net/zhy421202048/article/details/53490247

• 執行hexo deploy指令是出現Deployer not found: git錯誤
  在終端或命令行執行指令：

npm install hexo-deployer-git --save

然后執行heo deploy指令。

• 第一次hexo deploy以后，遠程的博客報出404錯誤
  Github中倉庫的命名沒有按照Github昵稱+.github.io的規則來。

• hexo deploy以后，遠程的博客沒有更新
  原因是部署延遲后執行hexo deploy指令前為執行hexo generate指令。

---

更新20170314

• 關於hexo指令簡寫
  文中提到的hexo指令可以簡寫，其簡寫方式如下：

hexo generate --- hexo g
hexo deploy --- hexo d
hexo server --- hexo s

---

更新20170722

• themes文件夾下的nexT文件夾里的內容無法上傳到Github
  將nexT文件夾壓縮，以壓縮文件的形式上傳到Github進行備份。
• 關於RSS的使用
  最近有讀者私信我，發現使用Safari訂閱的文章無法訪問：
  
  
  
  筆者嘗試了一下，發現了RSS的作用，之前文章中提到的RSS：
  
  
  
  點擊RSS后，會在瀏覽器的訂閱欄中出現博客最新的5篇文章，而讀者訪問不了訂閱文章的原因是配置RSS的時候，筆者使用的是inerdstack.com的域名，后來筆者更換了域名，RSS沒有更新，所以文章無法訪問，只需要在站點配置文件中將url改為更新
• 原文地址 https://www.jianshu.com/p/5973c05d7100