1嚼蚀、前言
上篇文章已經(jīng)在Windows上將個人博客個搭建好了(如果還不知道怎么搭建的，可以戳這里管挟，可是大家有沒有發(fā)現(xiàn)轿曙，搭建的Hexo博客使用的是默認(rèn)主題，而且不咋好看，跟那些大神們的個人博客相比导帝，還差了很多守谓，不過不要緊，看完這篇文章您单，你也可以擁有那些炫酷吊炸天的效果斋荞。廢話少說，那就直接開始吧虐秦。
2平酿、設(shè)置主題
Hexo給我們提供了很多的主題供我們選擇，你可以在更多主題里選擇一款你喜歡的悦陋，我選來選去選了一個比較經(jīng)典的Next主題蜈彼，你想看下效果的話可以戳這里。下面就已設(shè)置Next主題為例來看看怎么安裝和設(shè)置主題俺驶。
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送矩、設(shè)置主題
這樣就安裝完了，不過不要以為這樣就可以了哦哪替，我們還需要啟用Next主題栋荸，所以需要到站點配置文件里去設(shè)置一把，找到 theme 字段凭舶，并將其值更改為 next晌块。
theme: next
說明：在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml帅霜。 其中匆背，一份位于站點根目錄下，主要包含 Hexo 本身的配置身冀；另一份位于主題目錄下钝尸，這份配置由主題作者提供，主要用于配置主題相關(guān)的選項搂根。為了描述方便珍促，所以一般在描述的時候，將前者稱為 站點配置文件剩愧， 后者稱為 主題配置文件猪叙。
2.3、驗證主題
設(shè)置完了，沒有看到效果總是不放心對不對穴翩，那就先在本地預(yù)覽一下吧犬第。
先輸入
hexo clean
清除下 Hexo 的緩存。然后再輸入
hexo g && hexo s
接著你就可以打開http://localhost:4000/驗證效果了芒帕。是不是已經(jīng)有效果了歉嗓？
到此為止，你已經(jīng)成功安裝并啟用了 NexT 主題副签。
3遥椿、修改Hexo 站點配置文件
我們找到上次生成的Hexo目錄，找到站點配置文件_config.yml淆储，可以用notepad++或者sublime Text打開(上次部署到Github上的時候冠场，已經(jīng)改過這個文件的，還記得嗎本砰？)碴裙。
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 網(wǎng)站
title: hydcoder's blog #網(wǎng)站標(biāo)題
subtitle: 愛好游戲的碼農(nóng) #網(wǎng)站副標(biāo)題
description: 以夢為馬，明日天涯点额。舔株。。 #網(wǎng)站描述
author: hydcoder #博主的名字
language: zh-Hans #網(wǎng)站使用的語言
timezone: #網(wǎng)站時區(qū)还棱。Hexo 默認(rèn)使用您電腦的時區(qū)
# 側(cè)邊欄頭像設(shè)置
avatar: http://q1.qlogo.cn/g?b=qq&nk=493654134&s=5
先對網(wǎng)站的一些設(shè)置進(jìn)行設(shè)置载慈，至于其他的設(shè)置，等說到再貼珍手。(因為整個文件確實有點長办铡。。琳要。)
4寡具、Hexo 主題配置文件
其實這個文件的配置才是重點，因為你們想要的吊炸天的效果差不多都與這個文件有關(guān)稚补。
打開Hexo目錄/themes/next/_config.yml文件,
4.1童叠、開啟側(cè)邊欄社交鏈接
# 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
反正我就只設(shè)置了這兩個，你們有多少可以設(shè)置多少哈课幕。厦坛。。
4.2乍惊、開啟打賞功能
reward_comment: 堅持原創(chuàng)技術(shù)分享粪般，您的支持將鼓勵我繼續(xù)創(chuàng)作！
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亭姥、設(shè)置側(cè)邊欄設(shè)置圓形可旋轉(zhuǎn)頭像
找到生成的Hexo目錄\themes\next\source\css_common\components\sidebar下的sidebar-author.styl，將里面的css樣式內(nèi)容全部替換為：
.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顾稀、設(shè)置首頁不顯示全文(只顯示預(yù)覽)
打開主題配置文件_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改為對應(yīng)的false改為true静秆，length就是預(yù)覽顯示的文字長度粮揉，你可以根據(jù)你的需要進(jìn)行更改，然后重新部署抚笔，再進(jìn)主頁扶认，你就發(fā)現(xiàn)你首頁的文章多了一個閱讀全文的按鈕。
7殊橙、添加動態(tài)背景
先上張圖
記得第一次在別人的博客里看到這個動態(tài)背景的時候覺得好好玩辐宾，當(dāng)時覺得自己可以玩一天，哈哈膨蛮。叠纹。〕ǜ穑現(xiàn)在你只需要稍微設(shè)置一下誉察，你的博客也能馬上擁有這個效果咯。
打開生成的Hexo目錄\themes\next/layout/_layout.swig文件惹谐，
在 < /body>上面添加代碼(注意不要放在< /head>的后面)
{% 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 %}
打開主題配置文件持偏，在里面添加如下代碼：(可以放在最后面)
# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true
就這么簡單，再運(yùn)行 hexo clean豺鼻，然后運(yùn)行 hexo g,然后運(yùn)行 hexo s，最后打開瀏覽器在瀏覽器的地址欄輸入 localhost:4000 就能看到效果了款慨。是不是很好玩儒飒。。檩奠。
什么桩了？線條太多了？沒事埠戳，來看看怎么讓線條變少點
在上一步修改的主題配置文件中井誉，把剛才的那些代碼改成下面這樣：
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="http://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% e
怎么樣，是不是少了很多了整胃？沒事颗圣，你開心就好(▽)
配置項說明
color ：線條顏色, 默認(rèn): '0,0,0'；三個數(shù)字分別為(R,G,B)
opacity: 線條透明度（0~1）, 默認(rèn): 0.5
count: 線條的總數(shù)量, 默認(rèn): 150
zIndex: 背景的z-index屬性，css屬性用于控制所在層的位置, 默認(rèn): -1
8在岂、分類和標(biāo)簽設(shè)置
這里主要說的是在編寫文章的時候奔则，怎么給文章設(shè)置標(biāo)簽和分類。
首先通過hexo n "name"命令來新建一個頁面蔽午，在source/_posts目錄下找到剛才新建的name.md文件易茬，用notepad++或者sublime text打開。
title: name
date: 2014-08-05 11:15:00
tags:
---
頁面默認(rèn)就是長這樣的及老，可以編輯標(biāo)題抽莱、日期、標(biāo)簽和內(nèi)容骄恶，但是沒有分類的選項食铐。我們可以手動加入categories:項,但是下次創(chuàng)建新的頁面的時候還是沒有，所以我們直接打開scaffolds/post.md文件叠蝇，在tages:上面加入categories:,保存后璃岳，重新執(zhí)行hexo n 'name'命令，會發(fā)現(xiàn)新建的頁面里有categories:項了悔捶。
scaffolds目錄下铃慷，是新建頁面的模板，執(zhí)行新建命令時蜕该，是根據(jù)這里的模板頁來完成的犁柜，所以可以在這里根據(jù)你自己的需求添加一些默認(rèn)值。
8.1堂淡、設(shè)置分類列表
在我們編輯文章的時候馋缅，直接在categories:項填寫屬于哪個分類，但如果分類是中文的時候绢淀，路徑也會包含中文萤悴。
比如分類我們設(shè)置的是：
categories: 開車
那在生成頁面后，分類列表就會出現(xiàn)開車這個選項皆的，他的訪問路徑是：
*/categories/開車
我們都知道覆履，有時候中文路徑可能會出現(xiàn)一些奇奇怪怪的問題，所以我們需要路徑名和分類名分別設(shè)置费薄。
打開站點配置文件_config.yml硝全，找到如下位置做更改：
# Category & Tag
default_category: uncategorized
category_map:
開車: drive
生活: life
其他: other
tag_map:
在這里category_map:是設(shè)置分類的地方，每行一個分類楞抡，冒號前面是分類名稱伟众，后面是訪問路徑。
可以提前在這里設(shè)置好一些分類召廷，當(dāng)編輯的文章填寫了對應(yīng)的分類名時凳厢，就會自動的按照對應(yīng)的路徑來訪問账胧。
8.2、設(shè)置標(biāo)簽
在編輯文章的時候数初，tags:后面是設(shè)置標(biāo)簽的地方找爱，如果有多個標(biāo)簽的話，可以用下面兩種辦法來設(shè)置：
第一種：
tages: [標(biāo)簽1,標(biāo)簽2,...標(biāo)簽n]
第二種：
tages:
- 標(biāo)簽1
- 標(biāo)簽2
...
- 標(biāo)簽n
9泡孩、最后
Hexo和Next主題的一些常用設(shè)置差不多就是這么多了车摄，下篇將會說一下在Hexo博客里集成一些第三方的服務(wù)，下面你可以去你自己的博客里開車了仑鸥，哈哈吮播。。眼俊。
一寫就沒忍住寫了這么長意狠，其實很多都是參考了很多篇文章總結(jié)下來的，真的感謝那些大神們的分享疮胖，也希望我的文章能幫到你环戈。謝謝您的閱讀！
