hexo之next主題優化篇2

上一篇博客介紹 next 主題配置文件 _config.yml的各部分的大致內容，現在我們來對每一部分的詳細配置做出說明，完成這些配置你的博客基本上就像樣了。

側邊欄部分

更換個人頭像

在主題篇配置文件 _config.yml 中找到側邊欄設置部分 Sidebar Settings部分，可以看到如下所示設置頭像部分內容( avatar )：

url : 就是你自己的頭像鏈接，將圖片放置在 source --> images 目錄下;
rounded : 頭像是否設置爲圓形；
rotated : 當鼠標放置頭像上時，頭像是否旋轉；

設置暱稱

暱稱的設置是在站點配置文件中的 Site 部分，在這一部分不僅可以設置暱稱(作者名) ,還可以設置站點標題，副標題，自己的關鍵詞以及站點語言等等，雖然 next 主題不支持副標題，對自己的描述等個性化設置，但寫上也沒有關係，我的設置部分如下所示：

title : 網站的標題；
subtitle : 網站的副標題，next 不支持；
description : 自己描述，相當於座右銘之類的，next 不支持；
keywords : 自己的關鍵詞，next 不支持；
author : 作者名，也就是暱稱；
language : 語言設置，設置爲中文 zh-CN；
timezone : 時區設置，不用填寫。

social link

社會鏈接支持添加自己的 github、E-Mail weibo 等等，同樣也是在側邊欄設置部分 Sidebar Settings部分：需要添加哪一個直接加上自己的賬號即可：

友情鏈接

如圖所示爲我自己設置部分，由於本站剛剛開始，還沒有添加添加朋友的鏈接，所以我就把自己的掘金還有CSDN賬戶掛上去了：

到此整個側邊欄的部分就完成了，應該可以得到不錯的效果。

菜單欄部分

next 初始默認菜單很少，爲了豐富內容，提升更好的讀者效果，我們還需要自己增加一些界面，從而豐富我們的博客,比如添加分類、標籤、about、站內搜索等等功能：

分類、標籤、日程界面

在主題配置文件中找到 Menu Settings 部分，然後將 categories, tags、schedule 前面的註釋去掉，如下所示：

只去掉註釋還不行，因爲在 next 主題中並沒有爲我們默認生成的這三個界面(pages)，需要我們手動生成：

在 Git bash 或者是 Mac 終端中進行操作:

$ hexo new page categories tags schedule

這個時候查看 source 文件夾就可以看到生成這幾個頁面，其他的就不用設置，在我們使用命令 hexo generate 生成的時候 hexo 會自動的爲我們生成這些界面的東西。

about 頁面

about 頁面就是 關於我 的意思，是對自己情況的介紹等等內容，除了要生成 about 界面外，自己還要編輯，創建自己的簡介；

首先要生成 about 頁面，頁面的生成方法和上面的一樣：

• 取消 about 的註釋；
  
• 使用命令 hexo new page about 生成 about 界面；

這個時候就已經生成了 about 界面，在 source 文件夾下可以看到一個 about 文件夾，打開文件夾我們編輯 index.md這個文件，支持markdown 格式，編輯自己信息即可，如圖所示爲我自己的內容：

最終的效果如下：

爬取豆瓣賬號數據

我們可以爬取自己的豆瓣賬號數據從而可以分享你的書籍和電影
具體的使用方法如下：

• 由於 hexo 沒有集成豆瓣功能，所以需要我們下載第三方插件：

$ cnpm install hexo-douban --save //我們之前在環境搭建的過程中介紹過cnpm鏡像源，沒有安裝的使用npm(速度可能比較慢)

• 配置，在站點配置文件(注：不是主題配置文件)最後，加入以下代碼：

 douban: 
 user: 204836163
 builtin: false
 book:
   title: '讀書'
   quote: ''
 movie:
   title: '我的電影'
   quote: ''
 # game:
  # title: '遊戲'
  # quote: ''
 timeout: 10000 

• user : 你的豆瓣ID.打開豆瓣，登入賬戶，然後在右上角點擊 “個人主頁” ，這時候地址欄的URL大概是這樣："" ，其中的"xxxxxx"就是你的個人ID了;
• builtin : 是否將生成頁面的功能嵌入 hexo s 和 hexo g 中，默認是 false;
• title : 該頁面的標題;
• quote : 寫在頁面開頭的一段話,支持 html 語法;
• timeout : 爬取數據的超時時間，默認是 10000ms 。

3. 主題配置文件進行添加菜單欄，找到菜單欄選項，然後添加以下兩行配置：
   
4. 使用：
   我們在上述完成之後，需要執行命令 hexo douban 來爬取自己的豆瓣賬號數據 (前提是自己在第二步關聯了自己的賬戶)，然後再使用命令 hexo g -d 生成部署博客，然後就可以在自己的博客看到如下界面：

添加站內搜索功能

在前面的一篇博客簡要介紹了在 next 主題配置文件中 _config.yml 中支持站內搜索服務:
設置的方法如下：

• 首先安裝依賴：

 $ cnpm install hexo-generator-searchdb

• 站點配置文件的配置 (在該文件的末尾加上以下代碼)：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

• 主題配置文件的配置 (按照如圖所示配置即可)：

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: true

# Swiftype Search API Key
swiftype_key:

然後我們就可以在菜單欄看到一個搜索按鈕，點擊就額可以進行對你的博客內容進行搜索：

至此，整個菜單欄就部署完畢！

文章部分設置

除了 next 主題一些默認的功能外，我們可能會添加一些功能來豐富和擴展我們的博客，包括：修改標籤樣式、文章打賞、文章版權、文章評論、統計功能等。

修改標籤樣式：

在主題配置文件 _config.yml 文件下找到 tag_icon,修改爲 true，即可以修改文章底部默認的 # 標籤字符：

文章打賞

最後的效果如下所示：

找到主題配置文件 _config.yml 中的 Reward(donate) 部分，將其設置爲如下所示：

• enable : 使能文章打賞功能；
• animation : 是否爲動畫，false 即可；
• comment : 在打賞按鈕之上的評論,隨便寫，但是爲了好看，一至兩句話即可；
• reward 部分：

此處是添加自己的收款碼，對於我們一般只要微信 和 支付寶就可以了，所以我們首先要把自己的收款碼放在 D:\Blog\themes\next\source\images目錄下，然後添加上鍊接即可：

• wechatpay : 微信支付；
• alipay : 支付寶支付；

文章評論

next 主題提供了很多的評論插件的接口，所以我們只需要下載本地依賴既可以使用，但是有一個需要注意的是，很多的插件都是國外的，在國內無法獲取服務，所以建議大家使用國內的插件，比如有 Valine 和 Changyan,這裏我使用的是 Valine，簡單容易上手，最終的效果就是如下所示：

配置過程如下：

1. 首先在 valine 上註冊一個帳戶或登錄到LeanCloud，然後單擊左下角在儀表板中創建應用程序：
   

2. 進入你剛剛創建的應用程序，選擇設置->應用鍵在左下角，你會看到你的應用ID和應用鍵:
   

3. 將值 enable 設置爲 true，添加獲得的 APP ID（appid）和APP Key（appkey），然後在主題配置文件的valine部分中編輯其他配置，如下所示：

文章版權設置

next 主題內部集成了版權功能代碼，只要設置版權部分爲 true 即可，在主題配置文件 _config.yml 文件中找到如下部分：

建議在 post (文章內部)添加版權說明: 將 post 設置爲 true 即可。

卜算子統計

next 主題新版本已經爲我們提供了卜算子接口，用於統計站點的訪問人數和總訪問量，效果如下所示：

由於已經提供了接口，所以配置就很方便，具體的配置就變得很簡單，只需要修改 busuanzi 部分：

enable : 是否啓用卜算子；
total_visitors : 是否顯示總瀏覽人數；
total_visitors_icon : 總瀏覽人數前的圖標，默認是 user；
total_views ： 是否顯示網站總訪問量；
total_views_icon : 總訪問量前的圖標，默認是 eye;
post_views : 是否顯示某一篇文章的總瀏覽量；
post_views_icon : 文章瀏覽量前的圖標，默認也是 eye。

在線聊天功能

這個功能雖然沒什麼用，但是對於喜歡學習的小夥伴們也可以嘗試一下(我並沒有使用這一功能)。
首先要明確的是：新版 next 主題已經內部提供了對於 Chatra 和 Tidio 兩個插件的接口，所以我們在使用的時候只要註冊賬號，然後使用功能即可，下面我們以 Chatra 爲例：

• 首先登陸 https://chatra.io/cn/ 官網註冊賬號，獲取自己的 ID (註冊使用的郵箱號);

• 然後將 chatra 部分的 enable 設置爲 true：
  

• 在側邊欄添加 chat 按鈕：
  

  • 最後的效果如下所示：