Hexo搭建的GitHub博客之優化大全

03-02

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

本文目錄

搭建基本Hexo博客
Hexo博客綁定域名
更換Hexo主題
設置Hexo主題模式
設置預覽摘要
添加評論功能
設置側邊欄顯示效果
添加菜單選項
添加閱讀次數統計
添加社交鏈接
添加友情鏈接功能
設置博文內鏈接為藍色
設置文章末尾」本文結束」標記
顯示每篇文章字數
顯示站點文章總字數
文章末尾添加版權說明
設置個人頭像
設置頭像動態特效
設置網站圖標
添加留言版塊
項目主頁添加README
實現fork me on github
實現點擊出現桃心效果
修改文章底部的#號標籤
添加動態背景
代碼塊樣式自定義
文章加密訪問
添加jiathis分享
自定義滑鼠樣式
支持mathjax公式
修改字體顏色/大小/背景色
實現首行縮進
插入表格
添加RSS
添加搜索功能
Hexo博客提交百度和Google收錄
添加打賞功能
博文置頂
參考文獻

搭建基本Hexo博客

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

Hexo博客綁定域名

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

博主按照上述教程，已經成功地綁定域名wangwlj.com。

更換Hexo主題

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

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

下載後，將壓縮包解壓縮(文件位於指令運行的當前目錄)，複製其中名稱為next的文件夾到Hexo的主題目錄下，主題目錄的路徑為：

Hexo博客根目錄/themes/

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

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

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

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

設置Hexo主題模式

看到上圖，讀者可能會產生疑問，為什麼自己的主題樣式和筆者的不一樣，這是因為在Hexo主題中，有四種不同的模式，通過切換模式，讓NexT主題顯示不一樣的樣式。

在NexT根目錄下有一個同樣名稱為_config.yml，為了區分hexo根目錄下的_config.yml，將前者稱為主題配置文件 ，在其中找到scheme屬性，如下圖所示：

# Schemes#scheme: Muse#scheme: Mistscheme: Pisces#scheme: Gemini

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

修正圖片顯示問題

經過上面的配置後，發現上傳的博客文章裡面的本地圖片居然顯示不來（沒有同步上傳）。

於是，找到解決方案：

1 把主頁配置文件_config.yml 里的post_asset_folder:這個選項設置為true

2 在你的hexo目錄下執行這樣一句話npm install hexo-asset-image --save，這是下載安裝一個可以上傳本地圖片的插件

3 等待一小段時間後，再運行hexo n "xxxx"來生成md博文時，/source/_posts文件夾內除了xxxx.md文件還有一個同名的文件夾

4 最後在xxxx.md中想引入圖片時，先把圖片複製到xxxx這個文件夾中，然後只需要在xxxx.md中按照markdown的格式引入圖片：

![你想輸入的替代文字](xxxx/圖片名.jpg)

注意： xxxx是這個md文件的名字，也是同名文件夾的名字。只需要有文件夾名字即可，不需要有什麼絕對路徑。你想引入的圖片就只需要放入xxxx這個文件夾內就好了，很像引用相對路徑。

5.hexo s，運行本地伺服器，打開http://localhost:4000/，可實時查看修改情況。

6.hexo d，同步到github。

參考自：hexo生成博文插入圖片

設置預覽摘要

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

auto_excerpt:enable: true #將原有的false改為truelength: 300 #設置預覽的字數

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

添加評論功能

更新

目前的評論系統，友言，網易雲跟帖都掛了。所以，我最終採用的是來必力。

我新寫一篇文章詳細介紹了來必力評論系統的實現方法：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即可完成菜單選項的添加。

添加閱讀次數統計

註冊LeanCloud賬號，完成激活；點擊左上角的」應用」-「創建新應用」-點擊「數據」右邊的齒輪–點擊創建類class，類名字叫做Counter。

然後，修改主題配置文件 ，找到leancloud_visitors，添加修改：

leancloud_visitors: enable: true #將原來的false改為true app_id: #<app_id> app_key: #<app_key>

從設置中找到相應的id和key：

然後預覽，如圖：

添加社交鏈接

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

添加鏈接及圖標

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

社交平台名稱：鏈接 || 圖標

鏈接的圖標全部來自於Font Awesome

個人配置

筆者社交鏈接添加情況如以下代碼所示：

social: GitHub: https://github.com/qwerty200696 || github E-Mail: mailto:yourname@gmail.com || envelope 知乎: https://www.zhihu.com/people/LijieWang || gratipay 微博: https://weibo.com/3280603012 || weibo Google: https://plus.google.com/yourname || google Twitter: https://twitter.com/yourname || twitter FB Page: https://www.facebook.com/yourname || facebook #VK Group: https://vk.com/yourname || vk #StackOverflow: https://stackoverflow.com/yourname || stack-overflow YouTube: https://youtube.com/yourname || youtube Instagram: https://instagram.com/yourname || instagram

其中，微博有其對應的圖標，而知乎在圖標庫中卻沒有找到，筆者找了一款gratipay的圖標來代替知乎圖標。

如果沒有找到指定的圖標，將會啟用默認的圖標。

效果展示

配置完成後，具體效果顯示如下：

添加友情鏈接功能

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

# Blog rollslinks_title: 友情鏈接 #修改名稱#links_layout: block#links_layout: inlinelinks: #該行取消注釋小草莓: http://my.csdn.net/qq_31196849 qingkong: http://my.csdn.net/qingkong1994

筆者友情鏈接出現位置在社交鏈接的下方，效果如下圖所示：

設置博文內鏈接為藍色

修改原因

鏈接的默認顏色是白色的，和普通字體顏色相同，不容易區分，如下圖所示：

修改方法

通過路徑：

F:Hexo hemes extsourcecss\_commoncomponentspost

打開post.styl文件，在文件中添加，如下欄位：

.post-body p a{ color: #0593d3; border-bottom: none; &:hover { color: #0477ab; text-decoration: underline; } }

最好將新添加的內容放在原文件內容的底部，便於查看。

效果預覽

設置完成後部署一下，預覽效果如圖：

圖中Git的鏈接出現的下劃線是滑鼠懸停時的效果。

設置文章末尾」本文結束」標記

實現方法

在路徑F:Hexo hemes extlayout\_macro下，新建一個文件passage-end-tag.swig,文件內容中添加以下代碼：

{% if theme.passage_end_tag.enabled %} <div stylex="text-align:center;color: #ccc;font-size:14px;"> ------ 本文結束<i class="fa fa-paw"></i>感謝您的閱讀 ------</div> {% endif %}

代碼截圖如下(在網站中看到的div標籤生效消失了，故此截圖)：

這裡可以更改字體顯示的顏色，大小，以及內容，例如可將本文結束用The Happy Ending代替，並將字體顏色設置為了自己喜歡的#CDBA96，你可以去這裡選擇自己喜歡的顏色對應的RGB值。

然後在路徑hemes extlayout\_macro下找到並打開post.swig文件，在 post-body 之後， post-footer 之前添加如下代碼（post-footer之前兩個DIV）：

{% if not is_index %} <div> {% include passage-end-tag.swig %} </div> {% endif %}

具體位置如下圖所示：

最後在主題配置文件 中，在末尾添加如下語句：

passage_end_tag: enabled: true

實現效果圖

最終實現效果如下：

顯示每篇文章字數

實現方法

首先安裝插件，執行以下命令：

npm install hexo-wordcount --save

然後修改主題配置文件 ，定位到post_wordcount，將wordcount由false改為true即可。

實現效果圖

在每篇文章標題下會有如下效果：

顯示站點文章總字數

實現方法

首先安裝插件，插件安裝同上（已經「顯示每篇文章字數」則忽略這步）。

然後修改主題配置文件 ，定位到post_wordcount，將totalcount由false改為true即可。

實現效果圖

在頁面最底部會有如下效果：

文章末尾添加版權說明

直接修改主題配置文件 ，定位到post_copyright，將enable由false改為true即可。

該欄位如下：

# Declare license on postspost_copyright: enable: true license: CC BY-NC-SA 3.0 license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

實現效果如圖所示：

設置個人頭像

通過上面切換到Pisces發現，自己的頭像還是屬於匿名狀態，因此，我們有必要設置一下自己的頭像。

實現方法

在主題配置文件 中找到avatar欄位,進行修改:

# Sidebar Avatar # in theme directory(source/images): /images/avatar.gif # in site directory(source/uploads): /uploads/avatar.gif avatar: /images/head_icon.jpg

先將avatar欄位前的#刪除，然後粘貼上頭像的目錄位置或者鏈接。

筆者將頭像圖片保存在了主題目錄下的source/images文件夾，也可以存放在站點目錄下的source/uploads文件夾。也可以將自己的頭像圖片，保存在百度網盤或者新浪微盤的某個地方，然後將對應的url地址複製過來，添加在avatar欄位後即可。

實現效果圖

其效果如下圖所示：

達到效果後即可部署至遠程。

設置頭像動態特效

在路徑F:Hexo hemes extlayout\_partials找到head.swig文件並打開，在其末尾添加，如下欄位：

<link href="//cdn.bootcss.com/animate.css/3.5.0/animate.min.css" rel="stylesheet">

並在路徑themes extsourcecss\_commoncomponentssidebar下找到sidebar-author.styl文件並打開，添加如下語句：

.site-author-image:hover { -webkit-animation: jello 1s; animation: jello 1s; };

其中jello是我選擇的動態效果，你可以在這裡找到你喜歡的特效;然後更換上述代碼中的jello欄位，達到預期效果後，即可部署至遠程。

設置網站圖標

實現方法

打開主題配置文件 ，找到以下欄位，進行相應的修改：

# Put your favicon.ico into `hexo-site/source/` directory.favicon: /web_icon.jpg

其中，圖片web_icon.jpg存放在hexo-site/source/目錄下。

然後預覽，在自己的博客網站上有這樣的圖標：

因為我使用了與頭像一樣的圖片，所以圖標與頭像一樣。達到效果後即可部署至遠程。

添加留言版塊

我們還可以在菜單欄增加一個」留言板」,讓他人可以通過留言板直接給我們留言。

實現方法

在博客目錄中，執行以下命令，新建一個頁面：

hexo n page guestbook

然後通過路徑F:Hexosourceguestbook找到並打開guestbook文件夾下的index.md文件，然後再文件中添加以下代碼:

<div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>

然後打開主題配置文件 ，在menu欄位下，添加如下欄位：

menu: home: / || home about: /about/ || user tags: /tags/ || tags categories: /categories/ || th archives: /archives/ || archive 留言板: /guestbook || newspaper-o #自己添加的欄位

newspaper-o是留言板的圖標，可以在這裡找到自己喜歡的圖標。

筆者採用的youyan評論系統，默認在新建頁面上會產生評論板塊。效果如下：

這個效果若不穩定，或是由於暫時還沒有綁定域名的關係。

項目主頁添加README

在建立Github上建立自己的博客倉庫的時候，沒有生成README文件，這樣使得其他人無法知道我們這個倉庫是做什麼，即我們的這個倉庫缺少一個說明文件；但是如果直接使用命令hexo n README，再部署至遠程的時候，hexo會將它解析為html文件，這不是我們想要的。

實現方法

因此，解決方式是在路徑F:Hexosource下手動新建README.mdown注意這裡的後綴是.mdown，Mardownpad可以將文件保存為.mdown後綴文件；然後再在這個新建文件中寫README即可。再之後hexo g會把它複製到public文件夾，而不會被解析成html文件，發布在博客中。

實現效果圖

預覽效果，如圖：

實現fork me on github

在右上角或者左上角實現fork me on github。

實現方法

點擊這裡挑選自己喜歡的樣式，並複製代碼。例如，我是複製如下代碼：

然後粘貼剛才複製的代碼到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，並把href標籤改為你的github地址：

實現效果圖

實現效果圖如下（右上角）：

實現點擊出現桃心效果

實現方法

打開瀏覽器，輸入如下網址

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

然後將裡面的代碼copy一下，新建love.js文件並且將代碼複製進去，然後保存。將love.js文件放到路徑/themes/next/source/js/src裡面，然後打開hemes extlayout\_layout.swig文件,在末尾（在前面引用會出現找不到的bug）添加以下代碼：

<script type="text/javascript" src="/js/src/love.js"></script>

修改文章底部的#號標籤

實現方法

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，將其中的 # 換成<i class="fa fa-tag"></i>

實現效果圖

添加動態背景

實現方法

在主題配置文件 中，定位到如下部分：

# Canvas-nestcanvas_nest: true# three_wavesthree_waves: false# canvas_linescanvas_lines: false# canvas_spherecanvas_sphere: false# Only fit scheme Pisces# Canvas-ribboncanvas_ribbon: false

這是已經集成好的幾個動態效果，筆者採用的是canvas_nest，讀者可依次體驗(將false改為true)，選擇最喜歡的動態背景。

實現效果圖

代碼塊樣式自定義

實現方法

打開hemes extsourcecss\_customcustom.styl,向裡面加入：(顏色可以自己定義)

// Custom styles.code { color: #ff7600; background: #fbf7f8; margin: 2px;}// 大代碼塊的自定義樣式.highlight, pre { margin: 5px 0; padding: 5px; border-radius: 3px;}.highlight, code, pre { border: 1px solid #d6d6d6;}

實現效果圖

文章加密訪問

實現方法

打開themes->next->layout->_partials->head.swig文件,在以下位置插入這樣一段代碼：

代碼如下：

<script> (function(){ if({{ page.password }}){ if (prompt(請輸入文章密碼) !== {{ page.password }}){ alert(密碼錯誤！); history.back(); } } })();</script>

然後在文章上寫成類似這樣：

實現效果圖

添加jiathis分享

實現方法

在主題配置文件 中，jiathis為true，就行了，代碼如下：

# Share# This plugin is more useful in China, make sure you known how to use it.# And you can find the use guide at official webiste: http://www.jiathis.com/.# Warning: JiaThis does not support https.jiathis: true ##uid: Get this uid from http://www.jiathis.com/#add_this_id:

實現效果圖

自定義滑鼠樣式

實現方法

打開themes/next/source/css/_custom/custom.styl,在裡面寫下如下代碼

// 滑鼠樣式 * { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important }

其中 url 裡面必須是 ico 圖片，ico圖片可以上傳到網上，然後獲取外鏈，複製到 url 里就行了

支持mathjax公式

看到網上說明安裝hexo-math工具，或者其他的一系列教程，如這個。

其實在目前的hexo/NexT主題已經集成了mathjax，所以不需要那麼麻煩的設置了。

實現方法

在主題配置文件 中，定位到mathjax，將後面的選項為true，就行了。

另外，雖然這樣設置了，但是在編寫的時候還會出現mathjax與markdown默認渲染不兼容的問題，導致有時候公式一複雜就顯示不出來。

解決上述問題的方法請參照我寫的另一片博客：https://qwerty200696.github.io/2017/09/21/markdown_mathjax/

修改字體顏色/大小/背景色

比如說，想在文章中對某一部分的文字進行強調（改變大小，顏色），該操作具體說明如下：

如果想自定義字體大小以及顏色，可以直接在 Markdown 文檔中使用 html 語法：

<font size=4 > 這裡輸入文字，自定義字體大小 </font><font color="#FF0000"> 這裡輸入文字，自定義字體顏色</font> <span stylex="background-color: #ff6600;">這裡輸入文字，自定義字體背景色</span><font color="#000000" size=4><span stylex="background-color: #ADFF2F;">這是綜合起來的效果 </span></font><font color="#FFFFFF" size=4><span stylex="background-color: #68228B;">這是綜合起來的效果2 </span></font>

其中#FF0000為RGB顏色代碼，讀者可去RGB顏色查詢對照表網站查找自己喜歡的顏色。

若想在RGB顏色值與十六進位顏色碼之間相互轉化，可查看該網站。

效果如下：

這裡輸入文字，自定義字體顏色這裡輸入文字，自定義字體背景色這是綜合起來的效果這是綜合起來的效果2

實現首行縮進

由於markdown語法主要考慮的是英文，所以對於中文的首行縮進並不太友好，因此想要實現行縮進需要加上相應的代碼，如下。

在需要縮進行的開頭處，先輸入下面的代碼，然後緊跟著輸入文本即可。分號也不要漏掉。

直接寫:

半方大的空白`&ensp;`或`&#8194`;全方大的空白`&emsp;`或`&#8195`;不斷行的空白格` `或`&#160`;

親測可行。

插入表格

方法1：html代碼

插入表格的代碼是：

<table class="table table-bordered table-striped table-condensed"> <tr> <td>北京</td> <td>霧霾</td> </tr> <tr> <td>深圳</td> <td>暴雨</td> </tr> </table>

效果為：

可以看到上面多出了很多空行，所以我一般採用第二種方法，如下：

方法二：markdown代碼

|函數名|功能||----|----||max|求最大值||min|求最小值|

效果如下：

添加RSS

安裝 hexo-generator-feed 插件

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

npm install hexo-generator-feed --save

配置feed信息

在站點配置文件 中追加如下代碼：

feed: type: rss2 path: rss2.xml limit: 10 hub: content: true

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 dont use it)content - (optional) set to true to include the contents of the entire post in the feed.

至此RSS功能大功告成，部署至遠程後，會發現RSS已經自動出現，效果圖如下：

手機端訂閱圖

手機端訂閱效果展示：

添加搜索功能

筆者採用的是local search。

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

$ npm install hexo-generator-searchdb --save

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

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

編輯 主題配置文件 （主題目錄下），啟用本地搜索功能：

# Local searchlocal_search: enable: true

之後部署到遠程即可。

Hexo博客提交百度和Google收錄

這篇文章寫得很詳細，我就不詳細說了：

Hexo博客收錄百度和谷歌-基於Next主題

添加打賞功能

參考這篇文章：hexo的next主題打賞

博文置頂

我在之後會專門寫一篇文章介紹這個。先放上我的博客中的鏈接：Hexo博客徹底解決置頂問題。

目前按照上述方法，安裝新工具之後，只需要在需要置頂文章上面加上top: true欄位即可。

比如說置頂這篇文章：

---title: hexo搭建的Github博客之優化date: 2017-09-09 10:27:20categories: 博客搭建系列tags: - 博客top: true---

參考資料

【乾貨】2個小時教你hexo博客添加評論、打賞、RSS等功能
GitHub+Hexo+NexT搭建個人博客
hexo博客的背景設置
html設置字體背景色的標籤或代碼