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

前言

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

问题一

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

<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"; 引用我们创建的样式文件即可

样式代码如下：

// 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 ，找了一堆博客文章，写的要用三个包

gulp-babel
babel-core
babel-preset-es2015

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

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

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

babel-core 的新包叫 @babel/core

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

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

"devDependencies": {
    "@babel/core": "^7.8.6",
    "@babel/preset-env": "^7.8.6",
    "gulp-babel": "^8.0.0"
}

直接安装就行

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

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

// 使用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 文件代码进行修改，让其不压缩这一类已经压缩过一遍的文件。

最后代码修改如下

// 压缩 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'));
});

然后再运行命令

hexo clean
hexo g
gulp build
hexo d
hexo s

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