前言

本篇文章是在已經(jīng)搭建好gitpage+hexo的博客的前提下（不懂怎么搭建的可以參考我的另一篇博文：了解githubPages+hexo搭建博客的原理 或者利用Gitpage+hexo開發(fā)自己的博客，這兩篇博文都比較詳細(xì)的教大家最基礎(chǔ)的怎么將博客搭建起來。本篇博文是使用next主題的進擊版本，主要是有以下內(nèi)容

• 域名綁定，將github博客和你的獨有域名綁定
• 添加更多的menu內(nèi)容
• 添加頭像
• 定義網(wǎng)站個性logo
• 自定義樣式，重寫默認(rèn)樣式，個性化定制你的博客
• 炫酷動態(tài)背景制作
• 添加網(wǎng)易云音樂
• 添加網(wǎng)易云跟帖
• 添加leancloud閱讀次數(shù)統(tǒng)計功能
• 添加wordcount頁面字?jǐn)?shù)統(tǒng)計
• 添加fork me on github功能

要想最快的知道這些功能的效果，請移步我的個人博客：http://cherryblog.site/ ，順便求個fork，大爺們看過可以評論一下，試一下新加上的網(wǎng)易云跟帖效果怎么樣ヽ(●′ε｀●)ノ
首先要說一下我使用的版本，這個是很重要的，我的博客最先創(chuàng)建于2016年的9月份，距離現(xiàn)在已經(jīng)有大半年了，所以好多版本都已經(jīng)進行了更新，特別是next主題集成了更多的插件，簡直不要太爽＼（＠￣?￣＠）／

hexo v3.2.2
next v5.1.0
node v4.5.0

在改成自己想要的效果之后，對整體的hexo的next主題我有了一個大概的了解，其實next主題的最新版（5.1）已經(jīng)集成了大部分我們需要的插件，只需要在主題配置文件中將默認(rèn)的false改為true即可，但是我們也仍然需要知道都有哪些新的功能，最有效的方法是直接去查看官網(wǎng)的api：next官網(wǎng)

這里寫圖片描述

授之于魚不如授之于漁
希望我們都能夠理解其源碼，制作出屬于自己專屬的個性化博客(?????)

我們需要改的文件其實也就那么幾個，大部分是不需要更改，next都已經(jīng)幫我們配置好了~
默認(rèn)目錄結(jié)構(gòu)：

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json

• deploy：執(zhí)行hexo deploy命令部署到GitHub上的內(nèi)容目錄
• public：執(zhí)行hexo generate命令，輸出的靜態(tài)網(wǎng)頁內(nèi)容目錄
• scaffolds：layout模板文件目錄，其中的md文件可以添加編輯
• scripts：擴展腳本目錄，這里可以自定義一些javascript腳本
• source：文章源碼目錄，該目錄下的markdown和html文件均會被hexo處理。該頁面對應(yīng)repo的根目錄，404文件、favicon.ico文件，CNAME文件等都應(yīng)該放這里，該目錄下可新建頁面目錄。
• drafts：草稿文章
• posts：發(fā)布文章
• themes：主題文件目錄
• _config.yml：全局配置文件，大多數(shù)的設(shè)置都在這里
• package.json：應(yīng)用程序數(shù)據(jù)，指明hexo的版本等信息，類似于一般軟件中的關(guān)于按鈕

我們最先修改的應(yīng)該是在hexo根目錄下的配置文件_config.yml文件，這里是配置整個站點的配置信息，在文章的最后貼出我的配置文件，有興趣的朋友可以參考一下~
其次就是我們的主題配置文件
在對應(yīng)的主題下的_config.yml 因為我使用的是next主題，所以目錄的路徑為C:\Hexo\themes\next\_config.yml 這里配置的是使用主題的配置文件，這個配置文件的東西就有點多了，我們大部分的修改也是在這個文件下完成的。比如說使用集成的第三方插件，默認(rèn)為false，我們需要將其改為true并且配置相應(yīng)的app_key就可以使用該插件了~有木有很方便(^ ??? ^)
然后我們需要修改樣式的話是需要設(shè)置css和甚至是修改模板，
頁面展現(xiàn)的全部邏輯都在每個主題中控制，源代碼在hexo\themes\你使用的主題\中，以next主題為例：

├── .github            #git信息
├── languages          #多語言
|   ├── default.yml    #默認(rèn)語言
|   └── zh-Hans.yml      #簡體中文
|   └── zh-tw.yml      #繁體中文
├── layout             #布局，根目錄下的*.ejs文件是對主頁，分頁，存檔等的控制
|   ├── _custom        #可以自己修改的模板，覆蓋原有模板
|   |   ├── _header.swig    #頭部樣式
|   |   ├── _sidebar.swig   #側(cè)邊欄樣式
|   ├── _macro        #可以自己修改的模板，覆蓋原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打賞模板
|   |   ├── sidebar.swig   #側(cè)邊欄模板
|   ├── _partial       #局部的布局
|   |   ├── head       #頭部模板
|   |   ├── search     #搜索模板
|   |   ├── share      #分享模板
|   ├── _script        #局部的布局
|   ├── _third-party   #第三方模板
|   ├── _layout.swig   #主頁面模板
|   ├── index.swig     #主頁面模板
|   ├── page           #頁面模板
|   └── tag.swig       #tag模板
├── scripts            #script源碼
|   ├── tags           #tags的script源碼
|   ├── marge.js       #頁面模板
├── source             #源碼
|   ├── css            #css源碼
|   |   ├── _common    #*.styl基礎(chǔ)css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字體
|   ├── images         #圖片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代碼
├── _config.yml        #主題配置文件
└── README.md          #用GitHub的都知道

綁定域名

綁定域名的思路如下：

• 在萬網(wǎng)購買自己喜歡的域名（.com的會貴一點，.site和.xyz的相對便宜一些，有的只需要幾塊錢一年就可以）
• 解析DNS
• 在hexo中添加CNAME文件

購買域名

之前沒有買域名的時候我想使用網(wǎng)易云跟帖，發(fā)現(xiàn)在注冊網(wǎng)易云跟帖的時候使用原來的域名提示“url已被使用”，這是因為網(wǎng)易云跟帖不認(rèn)可二級域名，所以要自己買域名。
我選擇的是萬網(wǎng)，阿里下面的。我選擇了一個.site的域名，原價8元，使用阿里云app支付還優(yōu)惠5元，等于3元到手一個域名（一年）~
按照官網(wǎng)的步驟一步一來就可以了~

解析DNS

購買完域名之后我們需要解析DNS地址，在管理控制臺中的左側(cè)有域名選項，然后找到你的域名，點擊后面的“解析”

這里寫圖片描述

點擊添加解析，記錄類型選A或CNAME，

A記錄的記錄值就是ip地址，github(官方文檔)提供了兩個IP地址，192.30.252.153和192.30.252.154，這兩個IP地址為github的服務(wù)器地址，兩個都要填上，
解析記錄設(shè)置兩個www和@，線路就默認(rèn)就行了，CNAME記錄值填你的github博客網(wǎng)址。如我的是sunshine940326.github.io。

在hexo中添加CNAME文件

接下來在你的hexo文件夾下source文件夾下新建一個CANME文件,里面加上你剛剛購買的域名比如我的cherryblog.site

如果直接填寫cherryblog.site的話直接訪問www.cherryblog.site 和 cherryblog.site 都可以訪問到我們的網(wǎng)站，但是如果填寫www.cherryblog.site 的話只能通過www.cherryblog.site 訪問，不能通過cherryblog.site 訪問

這里寫圖片描述

然后你就可以hexo clean,hexo g，hexo d 發(fā)布你的博客看看效果啦~

這里寫圖片描述

添加菜單頁

添加菜單頁的思路（添加菜單頁就是添加一個頁面，有兩種方式）：第一種是使用git命令hexo new page "photo" 就直接創(chuàng)建了C:\Hexo\source\photo\index.md文件，然后編輯index.md 文件就可以了~

這里寫圖片描述

• 在主題的配置文件添加menu索引路徑（根路徑是hexo\source,所以你如果想要更改頁面的內(nèi)容就去hexo\source下找到對應(yīng)的文件夾，默認(rèn)內(nèi)容是在其index.md文件下)
• 在hexo的source文件下添加對應(yīng)的文件夾
• 在主題的配置文件添加menu_icon字段設(shè)置對應(yīng)的icon
• 修改language文件下zh-hans語言包
• 在發(fā)表文章的時候添加對應(yīng)的menu字段就可以看到

剛開始的時候不理解怎么添加分類頁和添加文章的區(qū)別，公司有一個項目用到了wordpress，然后發(fā)現(xiàn)兩者有相似的地方，不同的就是wordpress是有可視化的操作后臺，而hexo是需要git bash自己創(chuàng)建
首先我們要分清什么是頁面，什么是文章，
在hexo中menu下的內(nèi)容都是新的頁面我們可以通過hexo new page "pagename" 創(chuàng)建，hexo默認(rèn)的頁面只有home,archives,tags 三個，之后我們寫的博文就是文章，通過hexo new "name" 創(chuàng)建的name.md 文件在根目錄的source\_posts 下，在每一個文章的頭部，我們可以配置其tags或者categories內(nèi)容，相當(dāng)于文章是頁面的下一級

在配置文件中添加menu索引路徑

我們可以在主題配置的_config文件下找到相應(yīng)的字段，字段前加# 表示被注釋掉，我們也可以自己添加menu的內(nèi)容，比如我又新增了兩個menulife 和photo

這里寫圖片描述

這里添加的字段其實是加上文件索引的路徑，這里hexo設(shè)置的根路徑是hexo/source 接下來我們在這個根路徑下建立相應(yīng)的文件夾就可以實現(xiàn)點擊mune跳轉(zhuǎn)到相應(yīng)的頁面上了

這里寫圖片描述

,
沒有明白什么意思的同學(xué)看下圖

圖片描述

在source文件添加menu文件夾

我們需要在這個路徑下自己建立對應(yīng)的頁面，比如說我新建了menulife 和photos，然后再source文件夾下面新建兩個名字為life 和photo 的文件夾，里面添加一個index.md markdown文件，內(nèi)容是類似這樣的

---
title: photo
date: 2017-04-04 22:14:07
type: "photo"
comments: false
---
啦啦啦~

這里寫圖片描述

這是一個markdown文件，你可以自己編寫，但是我還不知道怎么把添加html文件= =，回來研究一下

給menu添加icon

這里寫圖片描述

怎么icon沒有換？？？其實hexo中換icon是一個很簡單的事情，因為hexo集成了FontAwsome 所以我們只需要在主題的配置文件中加入相應(yīng)的icon名字即可

這里寫圖片描述

查找FontAwsome icon

這時候你想要換一個自己喜歡的icon怎么辦，這就需要自己動手，豐衣足食了，你需要自己到FontAwsome官網(wǎng)，然后鼠標(biāo)往下拉，在圖標(biāo)集中選擇自己喜歡的icon，然后記住名字，保存在上面的menu_icon字段中就可以啦~

這里寫圖片描述

在language添加zh-hans翻譯字段

上面的步驟完成之后你會發(fā)現(xiàn)，在你的博客首頁顯示的仍然是英文名，而我們想要有一個中文的名字，并且想要個性化定制我們的頁面，我們可以在主題的language文件下的zh-hans（中文）語言包下增加相應(yīng)的字段（做過翻譯的童鞋應(yīng)該都知道什么意思_{）還可以修改其他的字段，這樣就可以定制我們的博客了呢}

這里寫圖片描述

在發(fā)表文章的時候添加對應(yīng)的menu字段

在我們寫文章的時候只要在頭部信息添加相應(yīng)的字段就在tags頁面和categories中顯示相應(yīng)的分類，例如:

---
title: Git使用中的報錯情況
date: 2017-03-11 23:54:11
tags: [git,實戰(zhàn)經(jīng)驗] 
categories: git
---

tags、categories都是支持?jǐn)?shù)組的形式的，可以添加多個tags、categories。這樣我們在tags、categories頁面就可以看見相應(yīng)的分類了

這里寫圖片描述

添加頭像

我使用的主題頭像是位于側(cè)邊欄，顯示的效果如下，

這里寫圖片描述

要添加一個這個的頭像要怎么操作呢，其實思路就是將你要上傳的頭像放在你的文件夾中，然后再配置文件中引用正確的路徑即可，當(dāng)然也可以上傳絕對路徑。在你的主題配置文件找到avatar字段，然后將你得圖片路徑寫在后面，我是新建了一個uploads文件夾，將圖片放在下面

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

這里寫圖片描述

設(shè)置網(wǎng)站logo

跟設(shè)置頭像其實是一個思路，都是在配置文件中引入正確的地址就可以了，不過網(wǎng)站的logo是對圖片有要求的，我們需要在Favicon在線制作工具中制作32*32的.ico圖片，然后放在source/images下面。然后在主題配置文件下添加主題配置文件中添加：favicon: images/favicon.ico

自定義樣式

不得不說next還是很人性化的，你可以個性化定制你的網(wǎng)站，你所有的改動（css）需要放在主題文件的source/css/_costum/costum.styl文件中，會覆蓋原來的css，所以只要你不想要你修改的樣式，只需要刪除這個文件夾就可以了，再也不用擔(dān)心還原不回去了~

這里寫圖片描述

炫酷動態(tài)背景

之前做過一個類似的canvas-nest的效果。新版本的next已經(jīng)支持canvas-nest了，但是效果不怎么樣，就不用了，但是也介紹一下，畢竟簡單，只有兩步就可以了。
添加修改代碼next\layout\_layout.swig在</body>之前加上

{% if theme.canvas_nest %}
<script type="text/javascript" src="http://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打開next\_config.yml，添加以下代碼就可以了：

 # Canvas-nest
canvas_nest: true

這種雖然簡單，但是我認(rèn)為效果不夠好，于是我決定添加原生的js來仿知乎的登錄界面做背景，這就需要修改模板來實現(xiàn)了。只要我們知道了next文件的結(jié)構(gòu)，我們想改什么只需要找到對應(yīng)的位置就好（在前言中有next的目錄結(jié)構(gòu)）~

這里寫圖片描述

<div class="bg_content">
    <canvas id="canvas"></canvas>
</div>

然后使用原生js寫一個仿知乎頁面

  <script>
class Circle {
    //創(chuàng)建對象
    //以一個圓為對象
    //設(shè)置隨機的 x，y坐標(biāo)，r半徑，_mx，_my移動的距離
    //this.r是創(chuàng)建圓的半徑，參數(shù)越大半徑越大
    //this._mx,this._my是移動的距離，參數(shù)越大移動
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.r = Math.random() * 10 ;
        this._mx = Math.random() ;
        this._my = Math.random() ;

    }

    //canvas 畫圓和畫直線
    //畫圓就是正常的用canvas畫一個圓
    //畫直線是兩個圓連線，為了避免直線過多，給圓圈距離設(shè)置了一個值，距離很遠(yuǎn)的圓圈，就不做連線處理
    drawCircle(ctx) {
        ctx.beginPath();
        //arc() 方法使用一個中心點和半徑，為一個畫布的當(dāng)前子路徑添加一條弧。
        ctx.arc(this.x, this.y, this.r, 0, 360)
        ctx.closePath();
        ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
        ctx.fill();
    }

    drawLine(ctx, _circle) {
        let dx = this.x - _circle.x;
        let dy = this.y - _circle.y;
        let d = Math.sqrt(dx * dx + dy * dy)
        if (d < 150) {
            ctx.beginPath();
            //開始一條路徑，移動到位置 this.x,this.y。創(chuàng)建到達(dá)位置 _circle.x,_circle.y 的一條線：
            ctx.moveTo(this.x, this.y);   //起始點
            ctx.lineTo(_circle.x, _circle.y);   //終點
            ctx.closePath();
            ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
            ctx.stroke();
        }
    }

    // 圓圈移動
    // 圓圈移動的距離必須在屏幕范圍內(nèi)
    move(w, h) {
        this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
        this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
        this.x += this._mx / 2;
        this.y += this._my / 2;
    }
}
//鼠標(biāo)點畫圓閃爍變動
class currentCirle extends Circle {
    constructor(x, y) {
        super(x, y)
    }

    drawCircle(ctx) {
        ctx.beginPath();
        //注釋內(nèi)容為鼠標(biāo)焦點的地方圓圈半徑變化
        //this.r = (this.r < 14 && this.r > 1) ? this.r + (Math.random() * 2 - 1) : 2;
        this.r = 8;
        ctx.arc(this.x, this.y, this.r, 0, 360);
        ctx.closePath();
        //ctx.fillStyle = 'rgba(0,0,0,' + (parseInt(Math.random() * 100) / 100) + ')'
        ctx.fillStyle = 'rgba(255, 77, 54, 0.3)'
        ctx.fill();

    }
}
//更新頁面用requestAnimationFrame替代setTimeout
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let w = canvas.width = canvas.offsetWidth;
let h = canvas.height = canvas.offsetHeight;
let circles = [];
let current_circle = new currentCirle(0, 0)

let draw = function () {
    ctx.clearRect(0, 0, w, h);
    for (let i = 0; i < circles.length; i++) {
        circles[i].move(w, h);
        circles[i].drawCircle(ctx);
        for (j = i + 1; j < circles.length; j++) {
            circles[i].drawLine(ctx, circles[j])
        }
    }
    if (current_circle.x) {
        current_circle.drawCircle(ctx);
        for (var k = 1; k < circles.length; k++) {
            current_circle.drawLine(ctx, circles[k])
        }
    }
    requestAnimationFrame(draw)
}

let init = function (num) {
    for (var i = 0; i < num; i++) {
        circles.push(new Circle(Math.random() * w, Math.random() * h));
    }
    draw();
}
window.addEventListener('load', init(60));
window.onmousemove = function (e) {
    e = e || window.event;
    current_circle.x = e.clientX;
    current_circle.y = e.clientY;
}
window.onmouseout = function () {
    current_circle.x = null;
    current_circle.y = null;

};
</script>

添加網(wǎng)易云音樂

在知道了頁面的結(jié)構(gòu)之后，你就可以將你的播放器添加在頁面的任意位置，開始我是放在了首頁，然后發(fā)現(xiàn)一上來就自動播放太吵了，于是就放在了側(cè)邊欄，想要聽得朋友可以手動點擊播放，
我們可以直接在網(wǎng)易云音樂中搜索我們想要插入的音樂，然后點擊生成外鏈播放器

這里寫圖片描述

這里寫圖片描述

<div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="http://music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
    </iframe>
</div>

然后就可以在側(cè)邊欄看見我的播放器了~

這里寫圖片描述

網(wǎng)易云跟帖

之前用的是多說，但是多說在2017年6月1日就關(guān)閉評論服務(wù)了= =，很憂傷，于是轉(zhuǎn)到了網(wǎng)易云跟帖。由于最新版（5.1）版本的next已經(jīng)集成了網(wǎng)易云跟帖，所以只需要在主題的設(shè)置文件中配置你的productKey就可以了。獲取productKey也很簡單，在官網(wǎng)網(wǎng)易云跟帖中注冊，然后在獲取代碼>通用代碼中拿到productKey，之后在你的主題配置文件中的gentie_productKey字段后添加即可~

添加Fork me on GitHub

去網(wǎng)址https://github.com/blog/273-github-ribbons 挑選自己喜歡的樣式，并復(fù)制代碼，添加到themes\next\layout_layout.swig的body標(biāo)簽之內(nèi)即可
記得把里面的url換成自己的!

hexo-wordcount實現(xiàn)統(tǒng)計功能

這里寫圖片描述

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

leancloud閱讀次數(shù)統(tǒng)計

next也集成了leancloud，在leancloud官網(wǎng)
中注冊賬號等一步一步的操作就不說了哈~，我們主要是為了拿到app_key和app_id,然后在主題配置文件做一下配置

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: yourapp_id
  app_key: yourapp_key

然后再leancloud的控制臺中的存儲添加一個counter的class就可以檢測到我們的瀏覽量了，同時在你文章的副標(biāo)題也可以看到有閱讀次數(shù)的顯示

這里寫圖片描述

個人網(wǎng)站地址：http://cherryblog.site/，順便求個fork

附錄1：站點配置文件

 # Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site   站點信息
title: Cherry's Blog    #站點名字
subtitle: To Be a Batter Me  #副標(biāo)題
description: 做更好的自己   #站點描述，在側(cè)邊欄顯示
author: Cherry   #博主名字
email: 991939332@qq.com #聯(lián)系郵箱
language: zh-Hans   #使用的語言包，語言包在主題文件的language文件夾下，可以更改網(wǎng)站顯示出的文案
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true  #新建一個頁面后自動生成一個同名文件夾（默認(rèn)為false）
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/sunshine940326/sunshine940326.github.io.git
  #repository: ssh://git@github.com/sunshine940326/sunshine940326.github.io