Hexo+GitHub搭建靜態博客平臺(三)-Next主題基本使用

博客網站搭建好後就是爲自己的網站設置一個美觀的主題了， hexo 官方提供了許多官方主題,還有許多別人編寫的主題，例如：hexo-theme-jekyll 和 hexo-theme-yilia。還有很多就不一一列舉了，我將介紹也是我在使用的 Next主題 。

一、導入並使用主題

導入主題的方式很簡單，有兩種：

1. 進入博客根目錄 /themes/ , 執行 $git clone ... 命令，將主題克隆下來
2. 直接將主題下載並解壓到博客根目錄 /themes/，這種方法沒有版本信息，也就是隱藏文件夾git

爲了簡潔可以將其目錄重命名爲next。配置主題時，我們需要修改博客根目錄的 _config.yml 中的默認 theme: landscape改爲 theme: 使用主題文件夾名稱就可以了。然後我們就可以正常啓動博客，來驗證主題是否應用成功了。

注意：修改 theme: 的時候後面必須有一個空格，這是YAML配置的格式要求，在冒號後必須有一個空格，後續將不再贅述。

二、Next主題的使用

• Next的官方網址爲：http://theme-next.iissnan.com/
• Next的GitHub地址爲：https://github.com/iissnan/hexo-theme-next
• Next 5.1.4版本_CSDN下載：https://download.csdn.net/download/fanxiaobin577328725/10345678

在 Hexo中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。
爲了描述方便，在接下來的說明中，將前者稱爲站點配置文件， 後者稱爲主題配置文件。

2.1 主題設定

說明：主題的配置文件修改時會自動更新，因此無需重啓服務器。

2.2 選擇 Scheme

Scheme 是 NexT提供的一種特性，藉助於 Scheme，NexT爲你提供多種不同的外觀。同時，幾乎所有的配置都可以在 Scheme 之間共用。目前 NexT支持三種 Scheme，其分別是：

1. Muse - 默認Scheme，這是NexT最初的版本，黑白主調，大量留白
2. Mist - Muse的緊湊版本，整潔有序的單欄外觀
3. Pisces - 雙欄 Scheme，小家碧玉似的清新

Scheme 的切換通過更改 主題配置文件，搜索 scheme 關鍵字。 你會看到有三行 scheme 的配置，將你需用啓用的 scheme 前面註釋 # 去除即可。

2.3 設置語言

編輯 站點配置文件， 將 language 設置成你所需要的語言。建議明確設置你所需要的語言，例如選用簡體中文，配置如下：

language: zh-Hans

目前 NexT支持的語言如以下表格所示：

語言	代碼	設定示例
English	en	language: en
簡體中文	zh-Hans	language: zh-Hans
Français	fr-FR	language: fr-FR
Português	pt	language: pt or language: pt-BR
繁體中文	zh-hk 或者 zh-tw	language: zh-hk
Русский язык	ru	language: ru
Deutsch	de	language: de
日本語	ja	language: ja
Indonesian	id	language: id
Korean	ko	language: ko

2.4 設置菜單

菜單配置包括三個部分，第一是菜單項（名稱和鏈接），第二是菜單項的顯示文本，第三是菜單項對應的圖標。 NexT 使用的是 Font Awesome 提供的圖標， Font Awesome 提供了 600+ 的圖標，可以滿足絕大的多數的場景，同時無須擔心在 Retina 屏幕下 圖標模糊的問題。

編輯 主題配置文件，修改以下內容：

<1> 設置菜單項

設定菜單內容, 對應的字段是 menu。 菜單內容的設置格式是：item name: link。其中 item name 是一個名稱，這個名稱並不直接顯示在頁面上，她將用於匹配圖標以及翻譯。

menu:
home: /
archives: /archives
#about: /about
#categories: /categories
tags: /tags
#commonweal: /404.html

若你的站點運行在子目錄中，請將鏈接前綴的 / 去掉

NexT 默認的菜單項有（標註 ♠ 的項表示需要手動創建這個頁面）：

鍵值	設定值	顯示文本（簡體中文）
home	home: /	主頁
archives	archives: /archives	歸檔頁
categories	categories: /categories	分類頁 ♠
tags	tags: /tags	標籤頁 ♠
about	about: /about	關於頁面 ♠
commonweal	commonweal: /404.html	公益 404 ♠

<2> 設置菜單項的顯示文本。

在第一步中設置的菜單的名稱並不直接用於界面上的展示。Hexo 在生成的時候將使用這個名稱查找對應的語言翻譯，並提取顯示文本。因爲我將語言設置爲簡體中文，因此會自動進行翻譯爲中文。這些翻譯文本放置在 NexT主題下的 languages/{language}.yml （{language} 爲你所使用的語言）目錄中。

以簡體中文爲例，若你需要添加一個菜單項，比如 something。那麼就需要修改簡體中文對應的翻譯文件languages/zh-Hans.yml，在 menu 字段下添加一項：

menu:
home: 首頁
archives: 歸檔
categories: 分類
tags: 標籤
about: 關於
search: 搜索
commonweal: 公益404
something: 有料

<3> 設定菜單項的圖標

設定菜單項的圖標，對應的字段是 menu_icons。 此設定格式是 item name: icon name，其中 item name 與上一步所配置的菜單名字對應，icon name 是 Font Awesome 圖標的名字。而 enable 可用於控制是否顯示圖標，你可以設置成 false 來去掉圖標。

menu_icons:
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat

在菜單圖標開啓的情況下，如果菜單項與菜單未匹配（沒有設置或者無效的 Font Awesome 圖標名字） 的情況下，NexT將會使用 ? 作爲圖標。

請注意鍵值（如 home）的大小寫要嚴格匹配

2.5 設置側欄

默認情況下，側欄僅在文章頁面（擁有目錄列表）時才顯示，並放置於右側位置。 可以通過修改 主題配置文件 中的 sidebar 字段來控制側欄的行爲。側欄的設置包括兩個部分，其一是側欄的位置， 其二是側欄顯示的時機。

<1> 設置側欄的位置

修改 sidebar.position 的值，支持的選項有：

• left - 靠左放置
• right - 靠右放置

sidebar:
position: left

<2> 設置側欄顯示的時機

修改 sidebar.display 的值，支持的選項有：

• post - 默認行爲，在文章頁面（擁有目錄列表）時顯示
• always - 在所有頁面中都顯示
• hide - 在所有頁面中都隱藏（可以手動展開）
• remove - 完全移除

2.6 設置頭像

編輯 主題配置文件，修改字段avatar， 值設置成頭像的鏈接地址。其中，頭像的鏈接地址可以是：

三、集成常用的第三方服務

官網教程：第三方服務集成

3.1 百度統計

<1> 登錄 百度統計， 定位到站點的代碼獲取頁面

<2> 複製 hm.js? 後面那串統計腳本 id，如：

<3> 編輯 主題配置文件， 修改字段 baidu_analytics 字段，值設置成你的百度統計腳本 id。

3.2 閱讀次數統計（LeanCloud）

在註冊完成 LeanCloud 帳號並驗證郵箱之後，我們就可以登錄我們的 LeanCloud 帳號，進行一番配置之後拿到 AppID 以及 AppKey 這兩個參數即可正常使用文章閱讀量統計的功能了。

登錄 LeanCloud ，然後新建一個 應用 來專門進行博客的訪問統計的數據操作。新建的 應用 名稱我們可以隨意輸入，即便是輸入的不滿意我們後續也是可以更改的:

我創建的應用的名稱爲 fxb_LeanCloud 創建完成之後我們點擊新創建的應用的名字來進行該應用的參數配置:

在應用的數據配置界面，左側下劃線開頭的都是系統預定義好的表，爲了便於區分我們新建一張表來保存我們的數據。點擊左側右上角的圖標，新建Class：

注意：此處的新建 Class名字必須 爲 Counter 。

由於LeanCloud升級了默認的ACL權限，如果你想避免後續因爲權限的問題導致次數統計顯示不正常，建議在此處選擇 無限制 。

創建完成之後，左側數據欄應該會多出一欄名爲 Counter 的欄目。接下來我們獲取應用的 AppID 以及 AppKey ，有了它們，我們就有權限能夠通過主題中配置好的Javascript代碼與這個應用的Counter表進行數據存取操作了:

複製 AppID 以及 AppKey 並在 NexT主題 的 _config.yml 文件中我們相應的位置填入即可，正確配置之後文件內容像這個樣子:

leancloud_visitors:
enable: true
app_id: ***joaeuuc4h***
app_key: ***E9UJsJpw1o***

這個時候重新生成部署Hexo博客，應該就可以正常使用文章閱讀量統計的功能了。

需要特別說明的是： 記錄文章訪問量的唯一標識符是文章的發佈日期以及文章的標題，因此請確保這兩個數值組合的唯一性，如果你更改了這兩個數值，會造成文章閱讀數值的清零重計。

Web安全

因爲 AppID 以及 AppKey 是暴露在外的，因此如果一些別有用心之人知道了之後用於其它目的是得不償失的，爲了確保只用於我們自己的博客，建議開啓Web安全選項，這樣就只能通過我們自己的域名纔有權訪問後臺的數據了，可以進一步提升安全性。

選擇應用的設置的安全中心選項卡：

如果你不知道怎麼填寫安全域名而或者填寫完成之後發現博客文章訪問量顯示不正常，打開瀏覽器調試模式，發現如下圖的輸出:

這說明你的安全域名填寫錯誤，導致服務器拒絕了數據交互的請求，你可以更改爲正確的安全域名。

後臺管理

當你配置部分完成之後，初始的文章統計量顯示爲0，但是這個時候我們 應用的 Counter 表中並沒有相應的記錄，只是單純的顯示爲0而已，當博客文章在配置好閱讀量統計服務之後第一次打開時，便會自動向服務器發送數據來創建一條數據，該數據會被記錄在對應的應用的 Counter 表中。

3.3 Local Search【本地搜索】

安裝 hexo-generator-searchdb，在站點的根目錄下執行以下命令：

$ npm install hexo-generator-searchdb --save

編輯 站點配置文件，新增以下內容到任意位置：

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

編輯 主題配置文件，啓用本地搜索功能：

# Local search
local_search:
enable: true

3.4 評論系統 - 來必力

登陸 來必力 獲取你的 LiveRe UID。編輯 主題配置文件， 編輯 livere_uid 字段，設置如下：

livere_uid: #your livere_uid

LiveRe 有兩個版本：

• City版：是一款適合所有人使用的免費版本；
• Premium版：是一款能夠幫助企業實現自動化管理的多功能收費版本。

第一步安裝：

第二步填寫信息：

第三步獲取UID：

內容分享服務

JiaThis

編輯 主題配置文件， 添加/修改字段 jiathis，值爲 true。

# JiaThis 分享服務
jiathis: true

百度分享

編輯 主題配置文件，添加/修改字段baidushare，值爲 true。

baidushare:
type: button #百度分享展示的方式button|slide

---

問題待解決：分享服務本地瀏覽正常，部署到GitHub上後失效！

當前解決狀態：

查看網頁生成網址源碼，與分享服務提供的源碼基本一致。但仍無法執行，我將JiaThis或百度分享的代碼直接貼到hexo生成文件中也是這種情況。

暫時理解：

可能是JavaScript加載問題導致的，因爲其文字加載正常，但是後續出現問題！

解決幫助：next的分享代碼生成在文件夾：themes → next → layout → _partials → share