升级博客,我太难了

题图 用Hexo和Next主题搭建博客已经两年多了,前段时间浏览一些其他小伙伴的博客,发现页面比我的好看许多。很多插件也都不适应了,遂更新一波。

咋升级

准备

首先,来想一想都要更新什么。
第一个肯定是Hexo了。其次就是主题,我用的是Next。由于之前不仅更改了主题配置,还有一些插件和自定义配置改了源文件。最致命的是我已经忘记在哪改,改了啥了。所以:

升级之前,先把博客备份一下,这样即使更新过程中出了问题,也不用怕。

升级Hexo

博客根目录的package.json文件里,列出了hexo和一些依赖的版本(这是我已经升级过的):

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
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "4.0.0" ##当前Hexo版本
},
"dependencies": { ##各种插件版本
"hexo": "^4.0.0",
"hexo-algolia": "^1.3.1",
"hexo-deployer-git": "^2.1.0",
"hexo-filter-emoji": "^2.0.2",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-baidu-sitemap": "^0.1.6",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^2.1.1",
"hexo-generator-index": "^1.0.0",
"hexo-generator-searchdb": "^1.2.0",
"hexo-generator-sitemap": "^2.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-helper-live2d": "^3.1.1",
"hexo-leancloud-counter-security": "^1.4.1",
"hexo-next-share": "github:theme-next/hexo-next-share",
"hexo-renderer-ejs": "^1.0.0",
"hexo-renderer-marked": "^2.0.0",
"hexo-renderer-stylus": "^1.1.0",
"hexo-server": "^1.0.0",
"hexo-symbols-count-time": "^0.7.0",
"hexo-wordcount": "^6.0.1",
"live2d-widget-model-hijiki": "^1.0.5"
}
}

打开博客根目录,输入命令:

1
npm outdated

就会看到有哪些依赖和插件需要更新:

1
2
3
4
Package              Current  Wanted  Latest  Location
hexo-filter-emoji 2.0.2 2.1.0 2.1.0 hexo-site
hexo-generator-feed 2.1.1 2.2.0 2.2.0 hexo-site
hexo-next-share 1.0.0 git git hexo-site

修改package.json中对应条目的版本到最新版,比如将 “hexo-filter-emoji”: “^2.0.2” 改成: “hexo-filter-emoji”: “^2.1.0”
然后保存修改,再输入命令保存更新并下载:

1
npm install --save

之后运行:

1
hexo --version

就可以看到当前hexo的版本已经到最新啦

升级Next

之前Next的版本是v5.x, 而搜了下最新版已经到v7.x了。。。不过不慌,还是慢慢来😎

官方文档

为了避免踩坑,先看官方文档肯定是个明智的选择。

跟随大佬的指示,Next主题v5.x之后更换了代码库。之前是原作者 iissnan’s 的个人仓库,由于Next比较火,后来就成立了一个专门维护它的组织。是一个很大的进步了,大佬们真棒。

代码库换了,那就不能用Git常规操作pull代码了。文档里给的建议是先不改动原有主题文件夹,将主题最新版本代码作为 next-reloaded 单独克隆到themes/下边。在博客配置文件中,把主题设置为next-reloaded 。然后就可以随时切换两个版本。

但我不是要切换呀,我是要更新啊,所以说之前所有的配置都得我自己手动去加去改了😭 可问题是我完全不记得自己都做了啥,万一改坏了怎么办😱于是Google一下,看看其他小伙伴有什么更好的操作,结果并没有发现更简单的方法,只能手动改了。

更改配置文件完成基础设置

新版本的配置文件里,将之前许多格式做了改动,所以要按照新的格式来。
对比V5.x版本,新的Next主题将之前许多个性化的设置全都加到了配置文件里,只需打开开关即可,很好用。。
这样改完之后,博客基本上与之前一致了。

个性化设置

评论系统

之前一直用的来必力,加载速度还可以。而且有评论时也会给我发邮件。直接在主题配置文件搜索“# LiveRe comments system”然后加上id就好了。

文章浏览次数

这个以前用的是leancloud,也只需要加上id就好,不过这次加上之后并没有显示效果,而且console log报错:
error
不知道怎么解决,准备在github提issue,所以先弃用了。

Daovoice在线联系

有很多小伙伴时通过Daovoice直接联系我的,这个也可以关注微信公众号接收消息。然而这次加上之后,导致博客页面空白,直接访问不了,console log也报错:
error
开始没定位到是这个的问题,找了好久。。。在网上搜也没找到解决办法,反正博客也有评论系统可以联系小伙伴,遂先弃用。

博客宠物

就是右下角萌萌的小黑啦。
之前也已经下载 “hexo-helper-live2d” 和 “live2d-widget-model-hijiki”这两个依赖,在图中路径加上标记:
config
然后在博客(非主题)配置文件加上下面的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#pet
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: true
debug: false
model:
use: live2d-widget-model-hijiki ## 宠物依赖包的名字
display:
position: right ## 出现位置
width: 150
height: 300
mobile:
show: true

之前小黑猫没显示,就是因为没有下载对应的宠物依赖包。所以要仔细看 live2d 的 README 呀。

文章分享

新加入了分享文章的插件AddThis, 挺好用的。按照这里的说明配置就好了。然后把id加在配置文件里。

网站底部运行时间

个人认为加上网站的运行时间还是很有意义的,看着博客已经运行这么多天,有种自豪感嘿嘿。
参考这篇文章完成的。

酷炫标签云

根据插件github说明配置就好了。
下载:

1
npm install hexo-tag-cloud

之后操作:

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width:100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}

背景图片

给博客加上一个背景图片。
网上很多教程都是在_custom.styl文件设置的,但新版本已经没有这个文件了,后来看了更新说明,里面有提到怎么把旧版本的所有自定义设置迁移到新版本,所以跟着人家说的设置就好了。
先在博客根目录下的Source文件夹里新建_data文件夹,然后再创建styles.styl文件,添加内容:

1
2
3
4
5
body {
background:url(你想加的背景图片url);
background-attachment: fixed; //固定图片位置
opacity: 0.9; //透明度设置
}

之后在博客配置文件搜索关键字custom_file_path去掉 style 的注释就好啦。

侧边栏和首页文章圆角显示

“在大部分人的审美中,有弧度的圆角总是比没弧度的直角好看许多”

打开themes/hexo-theme-next/source/css/_variables/对应的scheme.styl文件,作如下修改:

1
2
3
4
5
6
7
8
9
10
11
// 修改主题页面布局为圆角
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

// 阅读全文按钮为圆角
$btn-default-radius = 16px
$btn-default-bg = white
$btn-default-color = $text-color
$btn-default-border-color = $text-color
$btn-default-hover-color = white
$btn-default-hover-bg = $black-deep

友情链接页面

参照 这篇文章设置的。

在 /themes/next/layout/ 目录下新建一个 links.swig 文件,内容和之前一样。

改了下button的样式

button css button css

站点概览加了个音乐链接

Path: themes/next/layout/_partials/sidebar/site-overview.swig

右上角站点背景改颜色

Path: themes/next/source/css/_schemes/Pisces/_header.styl
颜色可以自己改

1
2
3
.site-meta {
background-image: linear-gradient(to right, #db7093, #20B2AA, #4169E1);
}

还需要改一下padding值:

手机端样式优化:


网站底部颜色修改

修改主题页面宽度

路径:next/source/css/_schemes/Gemini/index.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
//page width start
header{ width: 70% !important; }
header.post-header {
width: auto !important;
}
.container .main-inner { width: 70%; }
.content-wrap { width: calc(100% - 260px); }

.header {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.container .main-inner {
+tablet() {
width: auto !important;
}
+mobile() {
width: auto !important;
}
}

.content-wrap {
+tablet() {
width: 100% !important;
}
+mobile() {
width: 100% !important;
}
}
//page width end

后续的更新

以后的更新应该就能用Git进行操作啦,毕竟换库太可怕了。

参考文章