关于升级Hexo和Next主题踩过的坑

前言

前几天逛 Hexo 官网发现 Hexo 有新版本4.2.0了,看升级日志编译速度提升挺大的,就升级了,结果没成想这一升级,就带出了一大堆的问题

问题一

Hexo 升级成功后,查看博客站发现一切如故无错误,就放心的不管了,直到几天后,我发现博客站点页脚的 上一页下一页 按钮显示的是 html 标签代码,如下所示这种

1
<i class="fa fa-angle-left" aria-label="上一页"></i>

我心里就是一突,赶紧检查一下,虽然上下页按钮显示有问题但是功能正常,但是这并不能使我安心,回想改过的代码,除了进行 Hexo 的升级并没有动过 Next 主题代码,猜想可能是主题与新版 Hexo 不兼容所致,那就只能升级主题了。

Github找到 Next 的最新 releases 版本(7.7.1),然后放到博客,进行简单配置,然后查看,问题解决了,看来确实是旧主题与新版本的 Hexo 有兼容问题

问题二

主题进行了升级,那就需要改下新主题的配置,新主题与旧主题配置没有太多改变,配置项基本一致。直接 Copy 然后简单改改就行。

因为对旧主题做过大量的样式修改,所以现在需要把修改的样式文件迁移到新主题中。新主题对部分样式结构进行了重写,修改的样式有部分失效了,查找到以后进行了修正,问题也算是解决了。这里说下对样式的修改

首先在 themes\next-7.7.1\source\ 文件夹下创建目录 _custom 并在创建的目录下创建文件 custom.styl ,这文件里面就写你需要修改的样式,然后在 themes\next-7.7.1\source\css\main.styl 文件的最后一行添加代码 @import "_custom/custom.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
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
290
291
// Custom styles.

// 网站最顶部条线的颜色
.headband {
height: 3px;
background: #06A2E4;
}

// 设置背景图片
body{
background:url(/images/bg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

// 设置侧边栏左上角网站标题和副标题区颜色
.site-meta {
background: #06A2E4;
}

// 设置侧边栏网站标题样式
.site-title {

}

// 设置侧边栏网站标题鼠标悬浮样式
.site-title:hover {
letter-spacing: 0.1rem;
}

// 侧边栏网站副标题样式
.site-subtitle {
color:#fff;
}

// 文章标题鼠标悬浮下划线样式
.posts-expand .post-title-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #06A2E4;
visibility: hidden;
transform: scaleX(0);
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}

// 文章标题颜色
.posts-expand .post-title-link {
color:#06A2E4;
}

// 阅读全文按钮样式
.btn {
border:2px solid #06A2E4;
color:#06A2E4;
}

// 阅读全文按钮鼠标悬浮样式
.btn:hover {
border-color: #06A2E4;
color: #fff;
background: #06A2E4;
}

// 设置文章和侧边栏中链接样式
a:hover,
span.exturl:hover {
color: #06A2E4;
border-bottom-color: #06A2E4;
}

// 修改文章页侧边栏文章目录下面的第一个标题的鼠标悬浮样式
// 真的有毒,文章目录第一个标题的样式还是单独设置的...一开始还没发现
.post-toc .nav .active-current > a:hover {
color: #06A2E4;
}

// 文章页面左边文章标题颜色
.post-toc ol a:hover {
color: #06A2E4;
border-bottom-color: #06A2E4;
}

// 文章页面左边文章标题active时颜色
.post-toc .nav .active > a {
color: #06A2E4;
border-bottom-color: #06A2E4;
}

// 文章页侧边栏文章目录和站点概况鼠标悬浮样式
.sidebar-nav li:hover {
color: #06A2E4;
}

// 文章页侧边栏文章目录和站点概况active时鼠标悬浮样式
.sidebar-nav .sidebar-nav-active:hover {
color: #06A2E4;
}

// 文章页侧边栏文章目录和站点概况active时样式
.sidebar-nav .sidebar-nav-active {
color: #06A2E4;
border-bottom-color: #06A2E4;
}

// 社交栏鼠标悬浮样式
#sidebar div.links-of-author.motion-element a:hover {
color: #06A2E4;
background: rgba(255, 255, 255, 0);
}

// 友链鼠标悬浮样式
.sidebar a:hover,
.sidebar span.exturl:hover {
border-bottom-color: #06A2E4;
color: #06A2E4;
}

// RSS文字颜色
//#sidebar div.feed-link.motion-element > a {
// color: #06A2E4;
//}

// RSS图标颜色
//#sidebar div.feed-link.motion-element > a i{
// color: #06A2E4;
//}

// 侧边栏日志、分类、标签 上面的数字的颜色
.site-state-item-count {
color: #06A2E4;
}

// 设置底部文章分页数字鼠标悬浮上划线颜色
.pagination .prev:hover,
.pagination .next:hover,
.pagination .page-number:hover {
border-top-color: #06A2E4;
}

// 设置文章页上一篇文章和下一篇文章鼠标悬浮样式
.post-nav-item a:hover {
color: #06A2E4;
border-bottom: none;
}

// 修改鼠标选中字符的颜色
/* webkit, opera, IE9 */
::selection {
background: #06A2E4;
color: #f7f7f7;
}
/* firefox */
::-moz-selection {
background: #06A2E4;
color: #f7f7f7;
}

// 侧边栏返回顶部按钮鼠标悬浮样式
.back-to-top:hover {
background: #eee;
color: #06A2E4;
}

// 当页面处于 首页、标签、分类、归档、关于页面其中之一时,处于哪个页面哪个选项就变蓝
#menu > li.menu-item-active > a {
color: #06A2E4;
}

// 侧边栏导航小圆点颜色
.menu-item-active a:after,
.menu .menu-item a:hover:after,
.menu .menu-item span.exturl:hover:after {
background-color: #06a2e4;
}

// 侧边栏上半部分设置为透明
.menu-item-active a,
.menu .menu-item a:hover,
.menu .menu-item span.exturl:hover {
background: rgba(255, 255, 255, 0);
border-bottom-color: rgba(255, 255, 255, 0);;
}

// 侧边栏下半部分设置为透明
.sidebar{
background: rgba(255, 255, 255, 0);
}
.sidebar-inner{
background: rgba(255, 255, 255, 0.8);
}

// 设置底部文章分页部分为透明
.pagination{
background: rgba(255, 255, 255, 0.8);
}
.pagination .page-number.current {
color: #fff;
background: #06a2e4;
}

// 导航栏底部百分比透明
.back-to-top,
.back-to-top:hover
{
background: rgba(255, 255, 255, 0);
}

// 设置文章背景透明度
.post-block{
background: rgba(255, 255, 255, 0.8);
}

// 这里需要完全透明,不然就会在上面的0.7基础上再进行透明度计算
.btn{
background: rgba(255, 255, 255, 0);
}

.header-inner{
background: rgba(255, 255, 255, 0.8);
}
.main-inner {
background: rgba(255, 255, 255, 0.8);
}

// 代码高亮背景透明
.table-container{
background: rgba(29, 31, 33, 0.8);
}
table > tbody > tr:nth-of-type(odd) {
background-color: rgba(29, 31, 33, 0);
}
table > tbody > tr:hover {
background-color: rgba(29, 31, 33, 0);
}
pre,
.highlight {
background: rgba(29, 31, 33, 0);
}
.highlight .gutter pre {
background: rgba(29, 31, 33, 0.8);
}
.highlight .code pre {
background: rgba(29, 31, 33, 0);
}

// 评论
.comments {
background: rgba(255, 255, 255, 0.8);
}

// 文章页内作者信息
.post-copyright {
border-left: 3px solid #06A2E4;
background: rgba(255, 255, 255, 0.3);
}

/* 行内代码块的自定义样式 */
code {
color: #FFFFFF;
background: rgba(6, 162, 228, 0.8);
margin: 2px;
border: 1px solid #06a2e4;
}

// 底部动态的叶子图标
.with-love{
color: green;
}

// 去掉文章白色背景
.main-inner {
background: rgba(255,255,255,0);
}

// 标签页链接下划线颜色
a,
span.exturl {
border-bottom: 1px solid #06a2e4;
}

// 标签页链接鼠标悬浮颜色
.tag-cloud a:hover {
color: #06a2e4 !important;
}
问题三

你以为这就完了?no no no,真正的问题还没到啊。上面的东西全改好了,运行无错,一切正常啊。

但是,但是!当我使用 gulp 对代码进行压缩的时候,遇到问题了。

首先,迎接第一条报错: GulpUglifyError: unable to minify JavaScript

看到这我都傻了都,赶紧冷静冷静,仔细想想,首先我修改过的代码应该没问题,因为 hexo clean&&hexo g&&hexo d 走了一遍,本地和线上查看都没有任何问题,无报错,无显示异常。

那是 gulp 的问题?可我没动过 gulp 的文件啊,报错的文件是主题的 js 文件,那就更不可能是我的问题了,我压根就没改过主题的 js 文件啊。没办法了,百度走起。百度查出来应该是 es5 项目用了 es6 语法,没有进行转换所导致的,点开报错的 js 文件看一眼,好吧,一眼就看到了代码中的箭头函数,那应该就这问题没跑了

然后百度 gulp 怎么转换 es6 ,找了一堆博客文章,写的要用三个包

1
2
3
gulp-babel
babel-core
babel-preset-es2015

并且要对 gulpfile.js 中处理 js 文件的代码进行修改

然后安了包改了代码发现没一个可用,崩溃。查了半天资料,然后结合报错信息。初步确定了是包的问题,版本不兼容所导致的。他们没给包的版本号啊,安了都不兼容不能用!!!

后面各种查资料,发现 gulp-babel 是8版本的话,其他两个包需要换下

1
2
3
babel-core 的新包叫 @babel/core

babel-preset-es2015 的新包叫 @babel/preset-env

如上安了新包后,能用的组合如下

1
2
3
4
5
"devDependencies": {
"@babel/core": "^7.8.6",
"@babel/preset-env": "^7.8.6",
"gulp-babel": "^8.0.0"
}

直接安装就行

1
cnpm install @babel/core @babel/preset-env gulp-babel

包的问题解决了,那么还要对 gulpfile.js 的代码进行修改让其能编译 es6es5 ,只需要对处理 js 的那段代码进行修改即可,完整代码请查看文章《对Hexo博客静态资源进行压缩》

1
2
3
4
5
6
7
8
9
// 使用babel转换es6代码,否则报错(貌似next7.7.1有地方使用了es6语法)
gulp.task('minify-js', function () {
return gulp.src(['./public/**/*.js')
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

修改完成,对代码进行压缩试试,运行命令 gulp build ,压缩成功,没有报错,本地运行博客查看效果,正常

问题四

看似一切美好,完美解决了升级带来的一切问题,然后推送到仓库进行部署,线上浏览,哦豁,左边侧边栏下半部分没了,如下图所示

惊了,我本地正常啊。然后各种换浏览器、 ctrl+F5 、开无痕窗口,都是线上没侧边栏下半部分,本地一切正常。真是让人火大,本以为问题都解决完了,没想到到了最后一步还有惊喜

然后浏览器打开开发者工具,查看 Console 窗口,本地无报错,线上有两条报错

点开这个 anime.min.js 文件看到里面有某处代码有红下划线报错,点开 next-boot.js 文件,发现报错位置是使用 anime.min.js 出现的,那总得来说就是 anime.min.js 这一个文件有问题了。

看到是 js 文件,还是 *.min.js 这种命名文件,这种文件都是压缩过一遍的。猜测是在我这儿进行二次压缩出了问题,先不对代码进行压缩,直接推送到线上,浏览,正常了!好了,就是压缩这个文件出了问题。看来需要对 gulpfile.js 文件代码进行修改,让其不压缩这一类已经压缩过一遍的文件。

最后代码修改如下

1
2
3
4
5
6
7
8
9
10
11
// 压缩 public/js 目录 js文件
// 使用babel转换es6代码,否则报错(貌似next7.7.1有地方使用了es6语法)
// 注意,一定要排除min.js这类文件,不然主题侧边栏下半部分会神秘消失
gulp.task('minify-js', function () {
return gulp.src(['./public/**/*.js','!./public/**/*.min.js'])
.pipe(babel({
presets: ['@babel/preset-env']
}))
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

然后再运行命令

1
2
3
4
5
hexo clean
hexo g
gulp build
hexo d
hexo s

浏览器打开本地服务 http://localhost:4000 ,正常。打开线上网站,正常。呼,终于解决了,真就升级个 Hexo 引发了一连串的问题啊,下次打死不升级了。