1、前言
上篇文章已經在Windows上將個人部落格個搭建好了(如果還不知道怎麼搭建的，可以戳這裡，可是大家有沒有發現，搭建的Hexo部落格使用的是預設主題，而且不咋好看，跟那些大神們的個人部落格相比，還差了很多，不過不要緊，看完這篇文章，你也可以擁有那些炫酷吊炸天的效果。廢話少說，那就直接開始吧。
2、設定主題
Hexo給我們提供了很多的主題供我們選擇，你可以在更多主題裡選擇一款你喜歡的，我選來選去選了一個比較經典的Next主題，你想看下效果的話可以戳這裡。下面就已設定Next主題為例來看看怎麼安裝和設定主題。
2.1、安裝主題
首先你需要開啟你上次生成的Hexo目錄，然後右鍵開啟Git Bash here,輸入：
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼如果你選擇的是別的主題的話，只需要把URL換一下，和themes/next換成themes/你的主題名稱 (themes/next是安裝目錄，themes/next代表安裝在你的Hexo目錄下的themes目錄下的next資料夾下)
2.2、設定主題
這樣就安裝完了，不過不要以為這樣就可以了哦，我們還需要啟用Next主題，所以需要到站點配置檔案裡去設定一把，找到 theme 欄位，並將其值更改為 next。
theme: next
複製程式碼說明：在 Hexo 中有兩份主要的配置檔案，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。為了描述方便，所以一般在描述的時候，將前者稱為 站點配置檔案， 後者稱為 主題配置檔案。
2.3、驗證主題
設定完了，沒有看到效果總是不放心對不對，那就先在本地預覽一下吧。 先輸入
hexo clean
複製程式碼清除下 Hexo 的快取。然後再輸入
hexo g && hexo s
複製程式碼接著你就可以開啟http://localhost:4000/驗證效果了。是不是已經有效果了？
到此為止，你已經成功安裝並啟用了 NexT 主題。
3、修改Hexo 站點配置檔案
我們找到上次生成的Hexo目錄，找到站點配置檔案_config.yml，可以用notepad++或者sublime Text開啟(上次部署到Github上的時候，已經改過這個檔案的，還記得嗎？)。
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 網站
title: hydcoder's blog #網站標題
subtitle: 愛好遊戲的碼農 #網站副標題
description: 以夢為馬，明日天涯。。。 #網站描述
author: hydcoder #博主的名字
language: zh-Hans #網站使用的語言
timezone: #網站時區。Hexo 預設使用您電腦的時區
# 側邊欄頭像設定
avatar: http://q1.qlogo.cn/g?b=qq&nk=493654134&s=5
複製程式碼先對網站的一些設定進行設定，至於其他的設定，等說到再貼。(因為整個檔案確實有點長。。。)
4、Hexo 主題配置檔案
其實這個檔案的配置才是重點，因為你們想要的吊炸天的效果差不多都與這個檔案有關。 開啟Hexo目錄/themes/next/_config.yml檔案,
4.1、開啟側邊欄社交連結
# Social links
social:
GitHub: https://github.com/hydcoder
Weibo: https://weibo.com/3180967953/profile?rightmod=1&wvr=6&mod=personinfo
# 等等
social_icons:
enable: true
# Icon Mappings.
GitHub: github
Weibo: weibo
複製程式碼反正我就只設定了這兩個，你們有多少可以設定多少哈。。。
4.2、開啟打賞功能
reward_comment: 堅持原創技術分享，您的支援將鼓勵我繼續創作！
wechatpay: 你的微信收款碼連結
alipay: 你的支付寶收款碼連結
複製程式碼4.3、開啟友情連結
links_title: Links
links:
MacTalk: http://macshuo.com/
Title: http://example.com/
複製程式碼4.4、開啟訂閱微信公眾號
wechat_subscriber:
enabled: true
qcode: /uploads/wechat-qcode.jpg
description: 歡迎您掃一掃上面的微信公眾號，訂閱我的部落格！
複製程式碼4.5、選擇 Scheme
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
複製程式碼更多請參考next主題文件
5、設定側邊欄設定圓形可旋轉頭像
找到生成的Hexo目錄\themes\next\source\css_common\components\sidebar下的sidebar-author.styl，將裡面的css樣式內容全部替換為：
.site-author-image {
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
transition: 1.4s all;
}
.site-author-image:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-transform: rotate(360deg);
}
.site-author-name {
margin: $site-author-name-margin;
text-align: $site-author-name-align;
color: $site-author-name-color;
font-weight: $site-author-name-weight;
}
.site-description {
margin-top: $site-description-margin-top;
text-align: $site-description-align;
font-size: $site-description-font-size;
color: $site-description-color;
}
複製程式碼6、設定首頁不顯示全文(只顯示預覽)
開啟主題配置檔案_config.yml，ctrl + F搜尋找到"auto_excerpt"，可以看見
# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
複製程式碼把enable改為對應的false改為true，length就是預覽顯示的文字長度，你可以根據你的需要進行更改，然後重新部署，再進主頁，你就發現你首頁的文章多了一個閱讀全文的按鈕。
7、新增動態背景
先上張圖
記得第一次在別人的部落格裡看到這個動態背景的時候覺得好好玩，當時覺得自己可以玩一天，哈哈。。。現在你只需要稍微設定一下，你的部落格也能馬上擁有這個效果咯。
開啟生成的Hexo目錄\themes\next/layout/_layout.swig檔案， 在 < /body>上面新增程式碼(注意不要放在< /head>的後面)
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
複製程式碼開啟主題配置檔案，在裡面新增如下程式碼：(可以放在最後面)
# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true
複製程式碼就這麼簡單，再執行 hexo clean，然後執行 hexo g,然後執行 hexo s，最後開啟瀏覽器在瀏覽器的位址列輸入 localhost:4000 就能看到效果了。是不是很好玩。。。
什麼？線條太多了？沒事，來看看怎麼讓線條變少點
在上一步修改的主題配置檔案中，把剛才的那些程式碼改成下面這樣：
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% e
複製程式碼怎麼樣，是不是少了很多了？沒事，你開心就好(^▽^)
配置項說明
color ：線條顏色, 預設: '0,0,0'；三個數字分別為(R,G,B)
opacity: 線條透明度（0~1）, 預設: 0.5
count: 線條的總數量, 預設: 150
zIndex: 背景的z-index屬性，css屬性用於控制所在層的位置, 預設: -1
8、分類和標籤設定
這裡主要說的是在編寫文章的時候，怎麼給文章設定標籤和分類。
首先通過**hexo n "name"**命令來新建一個頁面，在source/_posts目錄下找到剛才新建的name.md檔案，用notepad++或者sublime text開啟。
title: name
date: 2014-08-05 11:15:00
tags:
---
複製程式碼頁面預設就是長這樣的，可以編輯標題、日期、標籤和內容，但是沒有分類的選項。我們可以手動加入categories:項,但是下次建立新的頁面的時候還是沒有，所以我們直接開啟scaffolds/post.md檔案，在tages:上面加入categories:,儲存後，重新執行hexo n 'name'命令，會發現新建的頁面裡有categories:項了。
scaffolds目錄下，是新建頁面的模板，執行新建命令時，是根據這裡的模板頁來完成的，所以可以在這裡根據你自己的需求新增一些預設值。
8.1、設定分類列表
在我們編輯文章的時候，直接在categories:項填寫屬於哪個分類，但如果分類是中文的時候，路徑也會包含中文。
比如分類我們設定的是：
categories: 開車
複製程式碼那在生成頁面後，分類列表就會出現開車這個選項，他的訪問路徑是：
*/categories/開車
複製程式碼我們都知道，有時候中文路徑可能會出現一些奇奇怪怪的問題，所以我們需要路徑名和分類名分別設定。
開啟站點配置檔案_config.yml，找到如下位置做更改：
# Category & Tag
default_category: uncategorized
category_map:
開車: drive
生活: life
其他: other
tag_map:
複製程式碼在這裡category_map:是設定分類的地方，每行一個分類，冒號前面是分類名稱，後面是訪問路徑。
可以提前在這裡設定好一些分類，當編輯的文章填寫了對應的分類名時，就會自動的按照對應的路徑來訪問。
8.2、設定標籤
在編輯文章的時候，tags:後面是設定標籤的地方，如果有多個標籤的話，可以用下面兩種辦法來設定：
第一種：
tages: [標籤1,標籤2,...標籤n]
複製程式碼第二種：
tages:
- 標籤1
- 標籤2
...
- 標籤n
複製程式碼9、最後
Hexo和Next主題的一些常用設定差不多就是這麼多了，下篇將會說一下在Hexo部落格裡整合一些第三方的服務，下面你可以去你自己的部落格裡開車了，哈哈。。。
一寫就沒忍住寫了這麼長，其實很多都是參考了很多篇文章總結下來的，真的感謝那些大神們的分享，也希望我的文章能幫到你。謝謝您的閱讀！