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

本文是在本地用markdown寫的，轉移到簡書過程中難免疏漏。文章中若有任何錯誤，歡迎指出。

搭建基本Hexo博客

Hexo博客基本搭建參考：《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/

在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: Mist
scheme: Pisces
#scheme: Gemini

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

設置預覽摘要

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

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

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

添加評論功能

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

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

注冊友言賬號

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

獲取uid

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

設置uid

打開主題配置文件，在其中找到屬性youyan_uid，然后在: 后添加之前復制的uid。

提醒一下，: 冒號后面一定要有一個空格

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

youyan.jpg

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

設置側邊欄顯示效果

在主題配置文件中，找到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：

LeanCloud_id_key.png

然后預覽，如圖：

view_count.png

添加社交鏈接

筆者希望在個人博客中加入自己的微博、知乎和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的圖標來代替知乎圖標。

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

效果展示

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

social.png

添加友情鏈接功能

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

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

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

友情鏈接示意圖

設置博文內鏈接為藍色

修改原因

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

鏈接的默認顏色

修改方法

通過路徑：

F:Hexo\themes\next\source\css\_common\components\post\

打開post.styl文件，在文件中添加，如下字段：

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

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

效果預覽

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

鏈接顏色為藍色

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

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

實現方法

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

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

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

passage-end-tag

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

然后在路徑\themes\next\layout\_macro\下找到并打開post.swig文件，在 post-body 之后， post-footer 之前添加如下代碼（post-footer之前兩個DIV）：

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

具體位置如下圖所示：

post.swig文件中的具體位置

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

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 posts
post_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\themes\next\layout\_partials找到head.swig文件并打開，在其末尾添加，如下字段：

<link  rel="stylesheet">

并在路徑themes\next\source\css\_common\components\sidebar\下找到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

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

網站圖標展示

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

添加留言版塊

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

實現方法

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

hexo n page guestbook

然后通過路徑F:\Hexo\source\guestbook找到并打開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:\Hexo\source下手動新建README.mdown注意這里的后綴是.mdown，Mardownpad可以將文件保存為.mdown后綴文件；然后再在這個新建文件中寫README即可。再之后hexo g會把它復制到public文件夾，而不會被解析成html文件，發布在博客中。

實現效果圖

預覽效果，如圖：

README效果圖

實現fork me on github

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

實現方法

點擊這里挑選自己喜歡的樣式，并復制代碼。例如，我是復制如下代碼：

fork me代碼圖

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

fork me具體位置

實現效果圖

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

fork me效果圖

實現點擊出現桃心效果

實現方法

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

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

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

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

實現效果圖

love效果圖

修改文章底部的#號標簽

實現方法

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

實現效果圖

新標簽符號圖

添加動態背景

實現方法

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

# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false

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

實現效果圖

動態背景效果圖

代碼塊樣式自定義

實現方法

打開\themes\next\source\css_custom\custom.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>

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

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

實現首行縮進

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

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

直接寫:

半方大的空白?或?
全方大的空白?或?
不斷行的空白格 或

親測可行。

Hexo博客提交百度和Google收錄

TODO 最后這幾個由于感覺暫時沒有必要，就先擱置了，有空補。

添加RSS

TODO

添加搜索功能

TODO

添加打賞功能

TODO

博文置頂

TODO

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

hexo搭建的Github博客之優化

搭建基本Hexo博客

Hexo博客綁定域名

更換Hexo主題

設置Hexo主題模式

設置預覽摘要

添加評論功能

設置側邊欄顯示效果

添加菜單選項

添加閱讀次數統計

添加社交鏈接

添加友情鏈接功能

設置博文內鏈接為藍色

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

顯示每篇文章字數

顯示站點文章總字數

文章末尾添加版權說明

設置個人頭像

設置頭像動態特效

設置網站圖標

添加留言版塊

項目主頁添加README

實現fork me on github

實現點擊出現桃心效果

修改文章底部的#號標簽

添加動態背景

代碼塊樣式自定義

文章加密訪問

添加jiathis分享

自定義鼠標樣式

支持mathjax公式

修改部分字體的顏色，大小

實現首行縮進

Hexo博客提交百度和Google收錄

添加RSS

添加搜索功能

添加打賞功能

博文置頂

參考文獻

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频