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

博客編號：20180120084123

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

導入並使用主題

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

1. 進入博客根目錄 /themes/ , 執行 $git clone ... 命令，將主題克隆下來
2. 直接將主題下載並解壓到博客根目錄 /themes/

配置主題時，我們需要修改博客根目錄的 _config.yml 中的默認 theme: landscape改為 theme: 使用主題就可以了。然後我們就可以正常啟動博客,來驗證主題是否應用成功了。

注意：修改 theme: 的時候後面必須有一個空格。

Next主題的使用

Next的官方網址為：http://theme-next.iissnan.com/

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。

為了描述方便，在以下說明中，將前者稱為 站點配置文件， 後者稱為 主題配置文件。

主題設定

主題的配置文件。修改時會自動更新，無需重啟伺服器。

選擇 Scheme

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

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

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

設置語言

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

language: zh-Hans

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

設置菜單

菜單配置包括三個部分，第一是菜單項（名稱和鏈接），第二是菜單項的顯示文本，第三是菜單項對應的圖標。 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 默認的菜單項有（標註 ? 的項表示需要手動創建這個頁面）：

<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）的大小寫要嚴格匹配

設置側欄

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

<1> 設置側欄的位置

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

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

sidebar: position: left

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

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

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

設置頭像

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

集成常用的第三方服務

詳見： 第三方服務集成

百度統計

注意： baidu_analytics 不是你的百度 id 或者 百度統計 id

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

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

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

閱讀次數統計（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 表中。

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

評論系統 - 來必力

登陸 來必力 獲取你的 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

更多資源可關注公眾號：fxb577328725

推薦閱讀：