摘要：我選擇的是萬網，阿里下面的。然后在主題配置文件下添加主題配置文件中添加自定義樣式不得不說還是很人性化的，你可以個性化定制你的網站，你所有的改動需要放在主題文件的文件中，會

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

域名綁定，將github博客和你的獨有域名綁定

添加更多的menu內容

添加頭像

定義網站個性logo

自定義樣式，重寫默認樣式，個性化定制你的博客

炫酷動態背景制作

添加網易云音樂

添加網易云跟帖

添加leancloud閱讀次數統計功能

添加wordcount頁面字數統計

添加fork me on github功能

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

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

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

授之于魚不如授之于漁

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

我們需要改的文件其實也就那么幾個，大部分是不需要更改，next都已經幫我們配置好了~
默認目錄結構：

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

deploy：執行hexo deploy命令部署到GitHub上的內容目錄

public：執行hexo generate命令，輸出的靜態網頁內容目錄

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

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

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

drafts：草稿文章

posts：發布文章

themes：主題文件目錄

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

package.json：應用程序數據，指明hexo的版本等信息，類似于一般軟件中的關于按鈕

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

├── .github            #git信息
├── languages          #多語言
|   ├── default.yml    #默認語言
|   └── zh-Hans.yml      #簡體中文
|   └── zh-tw.yml      #繁體中文
├── layout             #布局，根目錄下的*.ejs文件是對主頁，分頁，存檔等的控制
|   ├── _custom        #可以自己修改的模板，覆蓋原有模板
|   |   ├── _header.swig    #頭部樣式
|   |   ├── _sidebar.swig   #側邊欄樣式
|   ├── _macro        #可以自己修改的模板，覆蓋原有模板
|   |   ├── post.swig    #文章模板
|   |   ├── reward.swig    #打賞模板
|   |   ├── sidebar.swig   #側邊欄模板
|   ├── _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基礎css
|   |   ├── _custom    #*.styl局部css
|   |   └── _mixins    #mixins的css
|   ├── fonts          #字體
|   ├── images         #圖片
|   ├── uploads        #添加的文件
|   └── js             #javascript源代碼
├── _config.yml        #主題配置文件
└── README.md          #用GitHub的都知道

綁定域名的思路如下：

在萬網購買自己喜歡的域名（.com的會貴一點，.site和.xyz的相對便宜一些，有的只需要幾塊錢一年就可以）

解析DNS

在hexo中添加CNAME文件

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

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

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

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

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

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

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

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

第二種：手動創建上面的文件= =

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

在hexo的source文件下添加對應的文件夾

在主題的配置文件添加menu_icon字段設置對應的icon

修改language文件下zh-hans語言包

在發表文章的時候添加對應的menu字段就可以看到

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

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

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

,
沒有明白什么意思的同學看下圖

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

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

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

如果只是上面的步驟，那么你可能會創建出一個新的頁面，但是顯示的效果會是這樣：

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

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

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

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

---
title: Git使用中的報錯情況
date: 2017-03-11 23:54:11
tags: [git,實戰經驗] 
categories: git
---

tags、categories都是支持數組的形式的，可以添加多個tags、categories。這樣我們在tags、categories頁面就可以看見相應的分類了

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

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

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

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

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

{% if theme.canvas_nest %}

{% endif %}

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

 # Canvas-nest
canvas_nest: true

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

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

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

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

然后可以根據你得設置生成相應的html代碼，將獲得的html代碼插入到你想要插入的位置即可

我放在了側邊欄，所以對應的修改layout\_macrosidebar.swig 文件

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

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

去網址https://github.com/blog/273-g... 挑選自己喜歡的樣式，并復制代碼，添加到themesnextlayout_layout.swig的body標簽之內即可
記得把里面的url換成自己的!

wordcount可以實現字數統計，閱讀時常還有總字數的統計功能
只需要npm install hexo-wordcount --save 就可以安裝wordcount插件，
主要功能
字數統計:WordCount
閱讀時長預計:Min2Read
總字數統計: TotalCount
安裝完插件之后在主題的配置文件中開啟該功能就可以~

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

next也集成了leancloud，在leancloud官網
中注冊賬號等一步一步的操作就不說了哈~，我們主要是為了拿到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就可以檢測到我們的瀏覽量了，同時在你文章的副標題也可以看到有閱讀次數的顯示

 # 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  #副標題
description: 做更好的自己   #站點描述，在側邊欄顯示
author: Cherry   #博主名字
email: 991939332@qq.com #聯系郵箱
language: zh-Hans   #使用的語言包，語言包在主題文件的language文件夾下，可以更改網站顯示出的文案
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  #新建一個頁面后自動生成一個同名文件夾（默認為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