如何让 Blog 与众不同

发表于 更新于 分类于 ， 阅读次数： 本文字数： 19k 阅读时长 ≈ 17 分钟

1. 介绍

来到这里的你，可能早已阅尽全网各种博客；有中规中矩的样式，专注内容输出的；也有花里胡哨，内容蹩脚的（这不就是我吗？嘿嘿 ╮๑₃๑╭ ）。为了与众不同，可以添加各种样式，于是记录如下：

本博客是基于 HEXO+Theme-Next 创建的，Theme-Next 是一款可定制、操作性强、生态良好、更新稳定、黑白简约的博客主题，主题初始化主体以黑白两色为主，超级简约；配置专门的个性化样式配置，可以打造与众不同的博客。

此外，Hexo 是通过 Markdown 渲染插件将提前编辑好的 .md 文件按照固定的主题样式转换成静态网页文件，也就是说博客中的每一个页面都对应着一个 html 文件。展现的是前端设计，这里并没有后端，可直接托管于 Github Pages，方便省事（更重要的还是免费）。

既然提到了博客编写需要用到 Markdown 语法，这里推荐一款实时渲染的 markdown 笔记软件 — Typora

参考链接：史上最完美的 Typora 教程

2. 安装 Node.js 和 Git

Node.js 下载链接： Node.js

直接下载 长期维护版 无脑安装即可。

Git 下载链接： Git

同样选择合适的版本安装即可。

3. 安装 HEXO

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

1
npm install -g hexo-cli

关于 HEXO 详细的介绍： Hexo-Documentation

中文文档： Hexo-文档

关于 HEXO 的一些常用命令可参考：Hexo 基本使用

运行成功之后，可以查看 hexo 的版本号来验证是否安装成功：

1
hexo --version

我的是这样的：

安装成功啦

4. 创建博客工作路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
hexo init $blog-name
cd $blog-name
npm install hexo-theme-next  ## 安装最新版本的 Theme-Next
## or
npm install hexo-theme-next@8.10.1  ## 可以选择需要的版本，但 8.10.1 支持的 jsdelivr 失效。
## 记得修改 _config.yml 内的 theme 标签。

## 目录结构
.
|-- _config.next.yml    	## Theme-Next 配置文件
|-- _config.yml		## 博客的常规配置文件
|-- db.json			## hexo g/s 生成的缓存文件
|-- node_modules		## 插件目录
|-- package-lock.json	## 记录插件的详细信息; package-lock.json 会固化当前安装的每个软件包的版本，当运行 npm install时，npm 会使用这些确切的版本。
|-- package.json		## 插件的版本信息
|-- scaffolds			## 模板文件夹
|-- source				## 存放用户资源
`-- themes			## 主题文件夹

4 directories, 5 files

当我们创建了一个新的 blog 环境，其工作路径下的 _config.yml 的 theme: 默认为 landscape；所以当我们修改博客主题时，需要告诉 hexo 需要调用的主题是什么；故修改 _config.yml 的 theme: landscape 为 theme: next。

这时，当我们清理缓存文件(hexo clean)之后，重新启用服务(hexo server)，就能看到替换成了新的主题。

注意： 并不是所有的主题都能通过命令 npm 安装，需查看对应的帮助文档，确定配置方式；一般都是直接克隆主题的github仓库到 themes 文件夹下，并替换 _config.yml 下的主题选择。

除了 Theme-Next ，HEXO 还有很多好看、且完善的主题，但是不能保证还能兼容最新的 hexo ，因为其他的主题并没有像 Theme-Next 那样拥有完善的开发团队，能够保证 每月一更 的节奏，基本都是博客爱好者自发分享的，其中也有很多好看，功能齐全的主题；如有需要，也能前往挑选自己喜欢的，再配置到个人博客中。

Hexo 精美主题链接：Hexo-Theme

5. 关于 Theme-Next 主题配置

创建了工作环境并将 hexo-theme-next 相关文件安装好之后，接下来就需要对博客进行个性化替换，如博客名称、组成、图标等信息。

为此，之前专门出了一篇帖子：Hexo + hexo-theme-next 配置 Blog

有需要的伙伴，可以自行前往查看。

7. 尝试的两种定制较高的主题

一开始，我也尝试了两款精美的主题，但是后来发现这些主题想要再 自定义 ，就很难了。因为这已经算是其他前端大佬开发的成熟模板，能做的也就只有图片替换，文章内容的不同，大体的框架固定，对于新手小白来说也是不错的选择。

Hexo-Theme-LiveMyLife

具体的下载安装与主题 Demo ： Hexo-Theme-LiveMyLife

Hexo-Theme-LiveMyLife 预览

Hexo-Theme-Shoka

详情请移步：Hexo-Theme-Shoka

Hexo-Theme-Shoka 预览

8. 不同的点

接下来，对比一下，在 Theme-Next 基础上添加个性化样式之后，博客能变成什么样子？

Theme-Next 提供了完善的个性化添加机制，具体可参考 Next 主题自定义

8.1. 添加轮播背景

具体的背景添加，专门写了一篇文章，可移步：自定义背景轮播

JQuery 插件下载链接： jquery.backstretch.min.js

body-end.njk 添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="/js/jquery.backstretch.min.js" type="text/javascript"></script>
<body>
<script type="text/javascript">
$.backstretch([
        '/images/background-leave.png',
        '/images/background1.jpg',
        '/images/background.jpg',
    ], {
        fade : 3000, // 动画时长
        duration : 30000 // 切换延时
});
</script>
</body>

8.2. 侧边栏上方添加背景图片

styles.styl 添加以下代码：

1
2
3
4
5
6
7
.site-brand-container {
 background: url(/images/background14.jpg); 
//  background-repeat: no-repeat;
//  background-attachment: fixed; //不重复
 background-size: cover;      //填充
 background-position: 50% 50%;
}

8.3. 设置字体

styles.styl 添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// 文章主体字体设置
.post-body {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 1.325em;
  color: black;
  }
.posts-expand .post-title-link {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: black;
  }
.posts-expand .post-title {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: black;
  font-size: 2em;
  }

.menu .menu-item a {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: black;
  font-size: 1em;
  }

.site-description {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  // color: black;
  font-size: 0.9em;
  }

.post-copyright ul {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: black;
  font-size: 1.15em;
  }

.sidebar-inner {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: black;
  }

.search-popup .search-result-container {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  // color: black;
  font-size: 1.2em;
  }

.search-popup .search-input-container {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }

8.4. 文章小标题前添加图标

styles.styl 添加以下代码：

1
2
3
4
5
6
7
8
9
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
  font-family: Times New Roman, cursive, Trebuchet MS, Times New Roman, Lato, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  // border-bottom-color: #d3d2d2;
  border-bottom-color: #0c302e;
  background: url("/images/feather-alt-solid.svg") no-repeat;
  padding-left: 48px;
  // list-style: none;
  // list-style-image: url("/images/feather-alt-solid.svg");
}

8.5. 导航栏、侧边栏、文章顶部设置

styles.styl 添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// 侧边栏中向上箭头方框圆角
.back-to-top {
  border-radius: 100px;
}

// 阅读按钮 透明设置
.btn {
  background: rgba(255,255,255,0.5);
}

//  文章内容上方留白
.main-inner {
  margin-top: 40px;
}

//  导航栏留白，上方圆角，下层白色
.header-inner {
  margin-top: 20px;
  border-radius: 25px 25px 20px 20px;
}

// 导航栏上方留白，上层黑色
.site-brand-container {
  border-radius: 20px 20px 0px 0px;
  padding-top: 20px;
}

//侧边框的透明度设置
.sidebar {
  background-color: transparent;
  opacity: 0.9;
  border-radius: 0px 0px 20px 20px;
}
//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}
//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

8.6. 侧边栏下添加粒子钟

侧边栏添加粒子钟具体的添加方法可以参考：添加 Canvas 粒子钟样式

sidebar.njk 添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<div style="margin-top: 10px">
  <canvas id="canvas" style="width:58%;"></canvas>
</div>
<script>
(function(){

   var digit=
    [
        [
            [0,0,1,1,1,0,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,0,1,1,0],
            [0,0,1,1,1,0,0]
        ],//0
        [
            [0,0,0,1,1,0,0],
            [0,1,1,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [1,1,1,1,1,1,1]
        ],//1
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [1,1,1,1,1,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//3
        [
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,0],
            [0,0,1,1,1,1,0],
            [0,1,1,0,1,1,0],
            [1,1,0,0,1,1,0],
            [1,1,1,1,1,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,1,1]
        ],//4
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,1,1,1,1,0],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//5
        [
            [0,0,0,0,1,1,0],
            [0,0,1,1,0,0,0],
            [0,1,1,0,0,0,0],
            [1,1,0,0,0,0,0],
            [1,1,0,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//6
        [
            [1,1,1,1,1,1,1],
            [1,1,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,0,0,1,1,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0],
            [0,0,1,1,0,0,0]
        ],//7
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,1,1,0]
        ],//8
        [
            [0,1,1,1,1,1,0],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [1,1,0,0,0,1,1],
            [0,1,1,1,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,0,1,1],
            [0,0,0,0,1,1,0],
            [0,0,0,1,1,0,0],
            [0,1,1,0,0,0,0]
        ],//9
        [
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0],
            [0,0,0,0,0,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,1,1,1,0,0],
            [0,0,0,0,0,0,0]
        ]//:
    ];

var canvas = document.getElementById('canvas');

if(canvas.getContext){
    var cxt = canvas.getContext('2d');
    //声明canvas的宽高
    var H = 100,W = 700;
    canvas.height = H;
    canvas.width = W;
    cxt.fillStyle = '#f00';
    cxt.fillRect(10,10,50,50);

    //存储时间数据
    var data = [];
    //存储运动的小球
    var balls = [];
    //设置粒子半径
    var R = canvas.height/20-1;
    (function(){
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
    })();

    /*生成点阵数字*/
    function renderDigit(index,num){
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    cxt.beginPath();
                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);
                    cxt.closePath();
                    cxt.fill();
                }
            }
        }
    }

    /*更新时钟*/
    function updateDigitTime(){
        var changeNumArray = [];
        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
        var NewData = [];
        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);
        for(var i = data.length-1; i >=0 ; i--){
            //时间发生变化
            if(NewData[i] !== data[i]){
                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
                changeNumArray.push(i+'_'+(Number(data[i])+1)%10);
            }
        }
        //增加小球
        for(var i = 0; i< changeNumArray.length; i++){
            addBalls.apply(this,changeNumArray[i].split('_'));
        }
        data = NewData.concat();
    }

    /*更新小球状态*/
    function updateBalls(){
        for(var i = 0; i < balls.length; i++){
            balls[i].stepY += balls[i].disY;
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY;
            if(balls[i].x > W + R || balls[i].y > H + R){
                balls.splice(i,1);
                i--;
            }
        }
    }

    /*增加要运动的小球*/
    function addBalls(index,num){
        var numArray = [1,2,3];
        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];
        for(var i = 0; i < digit[num].length; i++){
            for(var j = 0; j < digit[num][i].length; j++){
                if(digit[num][i][j] == 1){
                    var ball = {
                        x:14*(R+2)*index + j*2*(R+1)+(R+1),
                        y:i*2*(R+1)+(R+1),
                        stepX:Math.floor(Math.random() * 4 -2),
                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],
                        color:colorArray[Math.floor(Math.random()*colorArray.length)],
                        disY:1
                    };
                    balls.push(ball);
                }
            }
        }
    }

    /*渲染*/
    function render(){
        //重置画布宽度，达到清空画布的效果
        canvas.height = 100;
        //渲染时钟
        for(var i = 0; i < data.length; i++){
            renderDigit(i,data[i]);
        }
        //渲染小球
        for(var i = 0; i < balls.length; i++){
            cxt.beginPath();
            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);
            cxt.fillStyle = balls[i].color;
            cxt.closePath();
            cxt.fill();
        }
    }

    clearInterval(oTimer);
    var oTimer = setInterval(function(){
        //更新时钟
        updateDigitTime();
        //更新小球状态
        updateBalls();
        //渲染
        render();
    },50);
}

})();
</script>

<div class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
<div class="site-overview">
    

{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
    <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
    </div>
    <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date') %}
        {% for post in posts.slice('0', '5') %}
        <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
        </li>
        {% endfor %}
    </ul>
    </div>
{% endif %}

</div>
</div>

8.7. 侧边栏添加音乐播放

APlayer 参考链接： APlayer 音乐播放器插件

sidebar.njk 添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
{# 侧边栏设置音乐播放 #}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>

<div id="aplayer" style="border-radius: 20px; margin-top: 20px;"></div>

<script>
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        autoplay: false,                 // 是否自动播放
        fixed: false,                //是否附着页面底部，否为false
        volume: 0.3,                //初始音量（0~1）
        lrcType: 3,                 //歌词模式（1、HTML模式 2、js模式 3、lrc文件模式）
        mutex: true,                //互斥模式：阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        order: 'list',            //音频循环顺序（'list'：顺序, 'random'：随机）
        preload: 'auto',            //预加载（'none'：不预加载, 'metadata'：元数据, 'auto'：自动）
        loop: 'all',
        listFolded: true,          //列表默认折叠，开启为true
        theme: '#ee8243',           //主题颜色
        audio: [{ //1
            name: '十年如烟',           //歌曲名称
            artist: '郁可唯',       //歌曲作者
            url: '/music/郁可唯 - 十年如烟.mp3',         //歌曲源文件地址
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/十年如烟.lrc',    // 添加歌词
        },
        {//2
            name: '独家记忆 (Live)',           //歌曲名称
            artist: '郁可唯',       //歌曲作者
            url: '/music/郁可唯 - 独家记忆 (Live).mp3',         //歌曲源文件地址
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/独家记忆 (Live).lrc',    // 添加歌词
        },
        {//3
            name: '很受伤 (Live)',           //歌曲名称
            artist: '郁可唯',       //歌曲作者
            url: '/music/郁可唯 - 很受伤 (Live).mp3',         //歌曲源文件地址
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/很受伤 (Live).lrc',    // 添加歌词
        },
        {//4
            name: '离人 (Live)',           //歌曲名称
            artist: '郁可唯',       //歌曲作者
            url: '/music/郁可唯 - 离人 (Live).mp3',         //歌曲源文件地址
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/离人 (Live).lrc',    // 添加歌词
        },
        {//5
            name: '路过人间',
            artist: '郁可唯',
            url: '/music/郁可唯 - 路过人间 (Live).mp3',
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/路过人间.lrc',    // 添加歌词
        },
        {//6
            name: '时光正好',
            artist: '郁可唯',
            url: '/music/郁可唯 - 时光正好.mp3',
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/时光正好.lrc',    // 添加歌词
        },
        {//7
            name: '他不懂 (Live)',
            artist: '郁可唯',
            url: '/music/郁可唯 - 他不懂 (Live).mp3',
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/他不懂 (Live).lrc',    // 添加歌词
        },
        {//8
            name: '水中花 (Live)',
            artist: '郁可唯',
            url: '/music/郁可唯 - 水中花 (Live).mp3',
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/水中花.lrc',    // 添加歌词
        },
        {//9
            name: '倒流',
            artist: '郁可唯',
            url: '/music/郁可唯 - 倒流.mp3',
            cover: '/music/郁可唯.jpg',     //歌曲封面地址
            theme: '#eeeeee',        //主题颜色（优先）
            lrc: '/music/倒流.lrc',    // 添加歌词
        }
        ]
    });
</script>

8.8. 添加搞怪网页标题

head.njk 添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{# 搞怪网页标题 #} 
{% if theme.title_trick.enable %}
<script>
  var OriginTitile = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function() {
    if (document.hidden) {
      document.title = "{{ theme.title_trick.leave }}" + OriginTitile;
      clearTimeout(titleTime);
    } else {
      document.title = "{{ theme.title_trick.enter }}" + OriginTitile;
      titleTime = setTimeout(function() {
        document.title = OriginTitile;
      }, 2000);
    }
  });
</script>
{% endif %}

_config.next.yml 在合适的位置添加以下内容：

1
2
3
4
5
6
7
8
# a trick on website title
title_trick:
  enable: true
  leave: "(つェ⊂)我藏好了哦~"
  enter: "(*´∇｀*) 被你发现啦~"
  	
## 这里可以根据个人喜好设置

8.9. 设置置顶文章

可以参考另一篇文章：添加 top 文章置顶

8.10. 文章末尾添加 The END 结束语

具体可参考：添加结束语

post-body-end.njk 添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size: x-large; padding-top: 10px;"> --------- The End ---------  </div>
    {% endif %}
</div>

8.11. 其他各种插件的使用

还有很多其他插件可以通过 npm 安装，在生成静态网页时实现自动调用。本博客使用的部分插件详情可移步：插件使用

9. 部署到 Github Pages

Hexo 官方也有关于这方面的介绍，详细可查阅 将 Hexo 部署到 GitHub Pages 和 一键部署

关于 Github Pages 项目，更多详情可以前往：Github pages

9.1 创建 Github 仓库

首先，我们需要注册一个 Github 账号，并创建一个以 用户名 为前缀，严格以 .github.io 为后缀的公开仓库（毕竟是需要分享给大家看的，私有仓库是访问不了的）

举个例子：

用户名：zerobio

仓库名：zerobio.github.io 【.github.io 是必须得有的，这也是你部署成功之后，博客访问的地址，若后期有专属的域名，也可以绑定自己的域名】

9.2 添加密钥

在 Git 安装成功之后，将 Git 与 Github 账号 绑定并生成 ssh 密钥：

1
2
3
4
5
6
## 配置用户名与邮箱
git config --global user.name "Github 用户名"
git config --global user.email "Github 邮箱地址（注册）"

## 生成 ssh 密钥
ssh-keygen -t rsa -C "github 注册邮箱"

生成密钥之后，可以在 home 目录下找到 .ssh/id_rsa.pub 文件，接着复制其中的密钥至你在 Github 创建的仓库。

为新建仓库添加密钥

9.3 修改主题配置文件 _config.yml

打开博客工作路径下的 _config.yml，修改 deploy: 配置信息；填写自己的仓库地址即可。

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/<yourAccount>/<repo> 
  branch: master

9.4 一键部署

需要安装插件 hexo-deployer-git。

1
npm install hexo-deployer-git --save

这样，在本地就能将生成好的静态博客文件通过 hexo d 命令部署到指定的仓库中。

10. 部署到服务器

由于个人还未拥有专属的服务器，故没法整理如何部署到服务器的一些注意事项，不过可能过两三月就有了呢！

【**待续**】

11. Bing 收录

通过上面的部署，博客已经能够通过 你的用户名.github.io 访问，但是这也仅限于地址访问，各大搜索引擎是找不到这个博客的（因为没有收录），只有那些知道博客地址的人才能访问；所以为了向更多的人分享自己精心准备的博客，就需要让搜索引擎收录你的博客。

要知道引擎是否收录自己的网站，可以在各个搜索引擎中这么检索一下：site:你的网址

首先，我们可以去尝试一下，看看能不能在搜索引擎上找到自己的博客：

百度没收录

百度上找不到，那是因为个人没有在百度提交网址；仅在 Bing 搜索引擎中收录：

Bing 收录

具体怎么让搜索引擎收录自己的网站，我就不再造轮子了；网络上也有很多厉害的大佬整理的相关博客，有需要的伙伴可以自行检索（容许让我偷个懒，嘿嘿！）。

这里呢，推荐几个参考链接：

  • https://ywang-wnlo.github.io/posts/abac0c46.html
  • https://asurada.zone/post/Blog-Search-Engine-Index/

12. 文章加密

官方 Demo： 文章加密预览

官方介绍文档： 文章加密插件

有的时候呢，有些文章不想让所有人都能看见，但又特别想跟某人分享；那就给文章加把锁，需要密码才能打开。于是可以安装这个插件 hexo-blog-encrypt，功能很强大。据我目前使用来看，加密文章安全性还是很高的。有兴趣的伙伴可以自行了解，也可以与我交流（下方可以评论哦！！！）。

其中你可以对加密的文章进行隐藏，在主页或者存档中找不到该文章，但是可以通过链接进行访问，且不会被搜索引擎收录，这样安全性更高些（只有知道 链接+密码 的人才能访问）。

13. 向大佬学习

总体而言，需要自己编写代码的地方并不多，基本都是在配置；各式各样的主题都是前端大佬呕心沥血打造出来的轮子，像我这种小白只能组装大佬们的轮子。也许，不久的将来，也能称为造轮子的扛把子，但是这需要长期的学习积累；所以，向大佬们看齐，向大佬们学习。

此外，博客用到了很多大佬们开源的工具（插件），向大佬致敬！！！

14. 参考链接

[1] http://home.ustc.edu.cn/~liujunyan/blog/hexo-next-theme-config/

[2] https://hexo.io/zh-cn/docs/github-pages.html

[3] https://zhuanlan.zhihu.com/p/370635512

[4] http://nodejs.cn/learn/the-package-lock-json-file

[5] https://hexo.io/zh-cn/docs/one-command-deployment.html

[6] http://theme-next.iissnan.com/

[7] https://hexo.io/zh-cn/docs/commands.html

[8] https://blog.csdn.net/Night__breeze/article/details/117607049