本文旨在介紹Hexo的簡(jiǎn)單美化和自定義定制击儡，博客搭建教程可以另行查閱Hexo官方文檔塔沃，另外也有網(wǎng)上很多教程。
同時(shí)阳谍，接觸一個(gè)新的技術(shù)要多看看文檔蛀柴，文檔可以幫助你很快熟悉整個(gè)項(xiàng)目。
Nodejs
Hexo
NexT主題
為了描述方便矫夯，在以下說(shuō)明中鸽疾，將前者稱(chēng)為<span class="inline-span blue">站點(diǎn)配置文件</span>， 后者稱(chēng)為<span class="inline-span purple">主題配置文件</span>训貌。
為文章設(shè)置頭部背景圖片和邊框
編輯yoursite/themes/next/source/css/_custom/custom.styl文件制肮，加入如下代碼
.header {
background-image: url("../images/header.jpg");
background-position: center center;
background-size: cover;
}
.posts-expand .post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(200,210,220,.75);
-moz-box-shadow: 0 0 5px rgba(200,210,220,.75)
}
增加文章的寬度
編輯yoursite/themes/next/source/css/_variables/custom.styl文件，加入如下代碼：
// 修改成你期望的寬度
$content-desktop = 800px
// 當(dāng)視窗超過(guò) 1600px 后的寬度
$content-desktop-large = 1000px
為博客添加背景圖片
編輯yoursite/themes/next/source/css/_custom/custom.styl文件，加入如下代碼：
#main {
background-image: url("../images/background.png");
background-position: center center;
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
}
.footer-inner {
background: rgba(255,255,255,.75);
}
.posts-expand .post {
background: rgb(224,224,224);
}
由于手機(jī)端的瀏覽器不支持background-attachment: fixed;屬性弄企，所以我們需要在移動(dòng)端把背景換一下。
@media screen and (max-width: 400px) {
#main {
background-image: url("../images/background_mobile.jpg");
background-position: auto;
background-repeat: repeat;
background-size: auto;
background-attachment: scroll;
}
}
美化鏈接樣式
正如本文開(kāi)頭的幾個(gè)鏈接区拳，樣式要好看一些拘领，下面是美化的步驟：
編輯yoursite/themes/next/source/css/_custom/custom.styl文件，加入如下代碼即可：
a[href][target="_blank"][rel="external"] {
padding: 0 20px;
border: 2px solid #555;
text-decoration: none;
display: inline-block;
overflow: hidden;
color: #555;
font-size: 14px;
background: #fff;
border-radius: 2px;
transition: all 0.3s ease;
}
a[href][target="_blank"][rel="external"]:hover {
color: white;
background-color: black;
border-color: black;
}
a[href][target="_blank"][rel="external"] i {
margin-right: 5px;
}
壓縮代碼
Next主題在Hexo引擎解析md時(shí)生成的代碼會(huì)包含大量的無(wú)用空白樱调，所以我們使用Hexo-neat插件對(duì)其進(jìn)行優(yōu)化约素。
首先安裝Hexo-neat插件
npm install hexo-neat --save
然后在<span class="inline-span blue">站點(diǎn)配置文件</span>里加入
npm install hexo-neat --save
美化內(nèi)容文章
可以通過(guò)增加CSS，并在文章內(nèi)容里增加html標(biāo)簽可以使文章更美觀笆凌，例如：
有顏色的塊
<span class="inline-span red">red</span><span class="inline-span blue">blue</span><span class="inline-span yellow">yellow</span><span class="inline-span green">green</span><span class="inline-span purple">purple</span>
實(shí)現(xiàn)代碼：
<span class="inline-span red">red</span>
<span class="inline-span blue">blue</span>
<span class="inline-span yellow">yellow</span>
<span class="inline-span green">green</span>
<span class="inline-span purple">purple</span>
有顏色的文本段落
<span class="div-border left-red">這是邊框帶顏色的文本段落
位置可選: left | right | top
顏色可選: red | blue | yellow | green | purple
</span>
實(shí)現(xiàn)代碼：
<div class="div-border left-red">
這是邊框帶顏色的文本段落
位置可選: left | right | top
顏色可選: red | blue | yellow | green | purple
</div>
實(shí)現(xiàn)方法
編輯yoursite/themes/next/source/css/_custom/custom.styl文件圣猎，加入如下代碼即可：
span.inline-span {
display:inline;
padding:.3em .4em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:.2em;
margin: auto .5em;
}
span.yellow {
background-color: #f0ad4e;
}
span.green {
background-color: #5cb85c;
}
span.blue {
background-color: #2780e3;
}
span.purple {
background-color: #9954bb;
}
span.red {
background-color: #df3e3e;
}
div.div-border {
display: block;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
div.left-red {
border-left-width: 5px;
border-left-color: #df3e3e;
}
div.left-yellow {
border-left-width: 5px;
border-left-color: #f0ad4e;
}
div.left-green {
border-left-width: 5px;
border-left-color: #5cb85c;
}
div.left-blue {
border-left-width: 5px;
border-left-color: #2780e3;
}
div.left-purple {
border-left-width: 5px;
border-left-color: #9954bb;
}
div.right-red {
border-right-width: 5px;
border-right-color: #df3e3e;
}
div.right-yellow {
border-right-width: 5px;
border-right-color: #f0ad4e;
}
div.right-green {
border-right-width: 5px;
border-right-color: #5cb85c;
}
div.right-blue {
border-right-width: 5px;
border-right-color: #2780e3;
}
div.right-purple {
border-right-width: 5px;
border-right-color: #9954bb;
}
div.top-red {
border-top-width: 5px;
border-top-color: #df3e3e;
}
div.top-yellow {
border-top-width: 5px;
border-top-color: #f0ad4e;
}
div.top-green {
border-top-width: 5px;
border-top-color: #5cb85c;
}
div.top-blue {
border-top-width: 5px;
border-top-color: #2780e3;
}
div.top-purple {
border-top-width: 5px;
border-top-color: #9954bb;
}
合并分類(lèi)和標(biāo)簽到一頁(yè)
命令行先運(yùn)行
hexo new page categories-tags
需要在<span class="inline-span purple">主題配置文件</span>配置新頁(yè)面，
并且在yoursite/themes/next/layout/page.swig文件中配置相關(guān)設(shè)置乞而。
以上改動(dòng)部分來(lái)自于以下博客送悔，在此表示感謝：
