hexo博客搭建过程(一)

本文旨在介绍Hexo的简单美化和自定义定制，博客搭建教程可以另行查阅Hexo官方文档，另外也有网上很多教程。

同时，接触一个新的技术要多看看文档，文档可以帮助你很快熟悉整个项目。

Nodejs

Download | Node.js

Hexo

NexT主题

NexT 使用文档

为了描述方便，在以下说明中，将前者称为站点配置文件，后者称为主题配置文件。

为文章设置头部背景图片和边框

编辑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

首先安装Hexo-neat插件

npm install hexo-neat --save

然后在站点配置文件里加入

npm install hexo-neat --save

美化内容文章

可以通过增加CSS，并在文章内容里增加html标签可以使文章更美观，例如：

有颜色的块

redblueyellowgreenpurple

实现代码：

red
blue
yellow
green
purple

有颜色的文本段落

实现代码：


这是边框带颜色的文本段落
位置可选: left | right | top
颜色可选: red | blue | yellow | green | purple

实现方法

编辑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

需要在主题配置文件配置新页面，

并且在yoursite/themes/next/layout/page.swig文件中配置相关设置。

以上改动部分来自于以下博客，在此表示感谢：

Hexo+NexT主题配置备忘 | 量子广告

[Hexo] Next主题自定义样式 | lazyBoy.site