摘要：我選擇的是萬(wàn)網(wǎng)，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說(shuō)還是很人性化的，你可以個(gè)性化定制你的網(wǎng)站，你所有的改動(dòng)需要放在主題文件的文件中，會(huì)

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

域名綁定，將github博客和你的獨(dú)有域名綁定

添加更多的menu內(nèi)容

添加頭像

定義網(wǎng)站個(gè)性logo

自定義樣式，重寫默認(rèn)樣式，個(gè)性化定制你的博客

炫酷動(dòng)態(tài)背景制作

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

添加網(wǎng)易云跟帖

添加leancloud閱讀次數(shù)統(tǒng)計(jì)功能

添加wordcount頁(yè)面字?jǐn)?shù)統(tǒng)計(jì)

添加fork me on github功能

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

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

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

授之于魚不如授之于漁

希望我們都能夠理解其源碼，制作出屬于自己專屬的個(gè)性化博客(?????)

我們需要改的文件其實(shí)也就那么幾個(gè)，大部分是不需要更改，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)頁(yè)內(nèi)容目錄

scaffolds：layout模板文件目錄，其中的md文件可以添加編輯

scripts：擴(kuò)展腳本目錄，這里可以自定義一些javascript腳本

source：文章源碼目錄，該目錄下的markdown和html文件均會(huì)被hexo處理。該頁(yè)面對(duì)應(yīng)repo的根目錄，404文件、favicon.ico文件，CNAME文件等都應(yīng)該放這里，該目錄下可新建頁(yè)面目錄。

drafts：草稿文章

posts：發(fā)布文章

themes：主題文件目錄

_config.yml：全局配置文件，大多數(shù)的設(shè)置都在這里

package.json：應(yīng)用程序數(shù)據(jù)，指明hexo的版本等信息，類似于一般軟件中的關(guān)于按鈕

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

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

綁定域名的思路如下：

在萬(wàn)網(wǎng)購(gòu)買自己喜歡的域名（.com的會(huì)貴一點(diǎn)，.site和.xyz的相對(duì)便宜一些，有的只需要幾塊錢一年就可以）

解析DNS

在hexo中添加CNAME文件

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

購(gòu)買完域名之后我們需要解析DNS地址，在管理控制臺(tái)中的左側(cè)有域名選項(xiàng)，然后找到你的域名，點(diǎn)擊后面的“解析”

點(diǎn)擊添加解析，記錄類型選A或CNAME，

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

接下來(lái)在你的hexo文件夾下source文件夾下新建一個(gè)CANME文件,里面加上你剛剛購(gòu)買的域名比如我的cherryblog.site

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

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

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

第二種：手動(dòng)創(chuàng)建上面的文件= =

在主題的配置文件添加menu索引路徑（根路徑是hexosource,所以你如果想要更改頁(yè)面的內(nèi)容就去hexosource下找到對(duì)應(yīng)的文件夾，默認(rèn)內(nèi)容是在其index.md文件下)

在hexo的source文件下添加對(duì)應(yīng)的文件夾

在主題的配置文件添加menu_icon字段設(shè)置對(duì)應(yīng)的icon

修改language文件下zh-hans語(yǔ)言包

在發(fā)表文章的時(shí)候添加對(duì)應(yīng)的menu字段就可以看到

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

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

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

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

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

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

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

如果只是上面的步驟，那么你可能會(huì)創(chuàng)建出一個(gè)新的頁(yè)面，但是顯示的效果會(huì)是這樣：

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

這時(shí)候你想要換一個(gè)自己喜歡的icon怎么辦，這就需要自己動(dòng)手，豐衣足食了，你需要自己到FontAwsome官網(wǎng)，然后鼠標(biāo)往下拉，在圖標(biāo)集中選擇自己喜歡的icon，然后記住名字，保存在上面的menu_icon字段中就可以啦~
tips ：在字段中只需要填寫icon-name后面跟的name即可，不需要加上前面的"icon-"

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

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

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

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

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

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

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

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

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

{% if theme.canvas_nest %}

{% endif %}

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

 # Canvas-nest
canvas_nest: true

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

所以我們需要在layout下面的_layout.swig 添加一個(gè)canvas

然后使用原生js寫一個(gè)仿知乎頁(yè)面

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

然后可以根據(jù)你得設(shè)置生成相應(yīng)的html代碼，將獲得的html代碼插入到你想要插入的位置即可

我放在了側(cè)邊欄，所以對(duì)應(yīng)的修改layout\_macrosidebar.swig 文件

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

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

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

wordcount可以實(shí)現(xiàn)字?jǐn)?shù)統(tǒng)計(jì)，閱讀時(shí)常還有總字?jǐn)?shù)的統(tǒng)計(jì)功能
只需要npm install hexo-wordcount --save 就可以安裝wordcount插件，
主要功能
字?jǐn)?shù)統(tǒng)計(jì):WordCount
閱讀時(shí)長(zhǎng)預(yù)計(jì):Min2Read
總字?jǐn)?shù)統(tǒng)計(jì): TotalCount
安裝完插件之后在主題的配置文件中開啟該功能就可以~

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

next也集成了leancloud，在leancloud官網(wǎng)
中注冊(cè)賬號(hào)等一步一步的操作就不說(shuō)了哈~，我們主要是為了拿到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的控制臺(tái)中的存儲(chǔ)添加一個(gè)counter的class就可以檢測(cè)到我們的瀏覽量了，同時(shí)在你文章的副標(biāo)題也可以看到有閱讀次數(shù)的顯示

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

# Site   站點(diǎn)信息
title: Cherry"s Blog    #站點(diǎn)名字
subtitle: To Be a Batter Me  #副標(biāo)題
description: 做更好的自己   #站點(diǎn)描述，在側(cè)邊欄顯示
author: Cherry   #博主名字
email: 991939332@qq.com #聯(lián)系郵箱
language: zh-Hans   #使用的語(yǔ)言包，語(yǔ)言包在主題文件的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  #新建一個(gè)頁(yè)面后自動(dòng)生成一個(gè)同名文件夾（默認(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