本文旨在介绍Hexo的简单美化和自定义定制，博客搭建教程可以另行查阅Hexo官方文档，另外也有网上很多教程。
同时，接触一个新的技术要多看看文档，文档可以帮助你很快熟悉整个项目。
Nodejs
Hexo
NexT主题
为了描述方便，在以下说明中，将前者称为<span class="inline-span blue">站点配置文件</span>， 后者称为<span class="inline-span purple">主题配置文件</span>。
为文章设置头部背景图片和边框
编辑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
// 当视窗超过 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);
}
由于手机端的浏览器不支持background-attachment: fixed;属性，所以我们需要在移动端把背景换一下。
@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;
}
}
美化链接样式
正如本文开头的几个链接，样式要好看一些，下面是美化的步骤：
编辑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时生成的代码会包含大量的无用空白，所以我们使用Hexo-neat插件对其进行优化。
首先安装Hexo-neat插件
npm install hexo-neat --save
然后在<span class="inline-span blue">站点配置文件</span>里加入
npm install hexo-neat --save
美化内容文章
可以通过增加CSS，并在文章内容里增加html标签可以使文章更美观，例如：
有颜色的块
<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="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>
实现代码：
<div class="div-border left-red">
这是边框带颜色的文本段落
位置可选: left | right | top
颜色可选: red | blue | yellow | green | purple
</div>
实现方法
编辑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;
}
合并分类和标签到一页
命令行先运行
hexo new page categories-tags
需要在<span class="inline-span purple">主题配置文件</span>配置新页面，
并且在yoursite/themes/next/layout/page.swig文件中配置相关设置。
以上改动部分来自于以下博客，在此表示感谢：
网友评论