nexT主题v5升级至v8记录


更新之前

昨天写搭建记录的时候发现自己的Hexo和Node.js还有Git都是最新版本,但nexT版本还停留在5.1.4,看了一下官网最新版本都已经8.4.0了,遂决定手动跨版本更新。

这是nexT的历代版本仓库。

版本号 仓库地址
2014~2017 v5 https://github.com/iissnan/hexo-theme-next
2018~2019 v6~v7 https://github.com/theme-next/hexo-theme-next
2020 v8 https://github.com/next-theme/hexo-theme-next

下载主题就相当于从仓库下载代码,这就是为什么明明跟着教程走却只能安装到v5版本的原因。可v5升级到v8在网上的教程少得可怜,看了官方的介绍还是一知半解……还是走一步算一步,出了错再随机应变吧。

以下是我的更新步骤。

需要准备的

  1. 下载一个文件对比软件,比如BeyondCompare
  2. 一个备份文件夹,用来装之前的v5版本
  3. GitBash,所有的基础

准备以上材料,我们开始进行更新。


第一步 安装

  • 将themes中的next文件夹转移至备份文件夹内。

  • 之后用GitBash定位到站点文件夹,通过npm安装最新版本。

    1
    npm install hexo-theme-next
  • 下载完成后,在站点文件夹的node_modules里找到一个名为hexo-theme-next的文件夹,这就是最新版的主题文件。把它复制到themes文件夹内,并重新命名为next-v8。(只是个例子)

  • 打开站点配置文件,把themes: next后面的内容改成next-v8

  • 在GitBash中输入hexo version查看当前版本号,出现一个巨大NEXT和最新版本号即成功安装。

恭喜!你已经完成一半的内容了!

第二步 配置

因为是v5刚刚起步的缘故,官网上所说的迁移方法对我来说并没有什么用处。这里我选择单独配置:

  • 把这个还没有动过的主题配置文件复制出来,重命名为_config.next.yml,放在站点文件夹里。

  • 运行BeyondCompare,打开旧主题配置和新主题配置,进行一个比较和修改。

    注意!最开始的主题设置,如果想启用之前的Gemini,请关闭默认主题选项!!!

  • 然后可以试着运行一下hexo s,查看是否可以正常显示。建议一边改一边检查,新主题配置文件的内容比起v5还是有很大的区别的,具体设置跟着注释走,不要无脑修改。

至此,你已经完成了v5至v8的升级。

第三步 自定义

自定义所消耗的时间最长。原因在于我很想还原v5的配置,但内部文件改动太大,加上针对v8的自定义的教程比更新的教程还少,无从下手,只得摸索。

Font Awesome

v8更新之后,所有的有关图标的配置都得改成fa fa-xxx格式才能正常显示。具体的图标样式和格式在官网上可以查看引用。Font Awesome

代码样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light:
dark:
prism:
light:
dark:
# Add copy button on codeblock
copy_button:
enable: False
# Available values: default | flat | mac
style:

这里的代码模块样式可以在这里找到即时预览,把样式名直接输入进themeprism栏即可。把copy_button设置为True可以打开一键复制按钮,很方便。

此处我把底部的style设置成了flat,也有不少人选择mac(这款也很好看推荐大家尝试)

自定义CSS目录

v8更新之后很多文件都找不到了,而要自定义CSS得在站点文件夹的/source/_data/styles.styl里改。没有_data的话就创一个。

然后在主题配置里将custom_file_path里的style启用即可。

这里是我的配置:

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
// 图片阴影
.medium-zoom-image {
box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.4);
}
// 短代码颜色
code {
background: #E3E1E8;
color: #383a42;
}
// 隐藏顶部黑线条
.headband {
display: none;
}

//底部文字颜色
.footer-inner {
color: #494948;
}

// 代码滑块
.table-container {
scrollbar-width: thin;
}
.table-container::-webkit-scrollbar {
width: 0.5em;
height: 0.5em;
}
.table-container::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #00af91;
}
.table-container::-webkit-scrollbar-track {
background: none;
}

//透明化:自定义opacity的值。范围为0~1的小数
//文章内容透明
.main-inner {
opacity: 0.95;
}
//侧边框透明
.sidebar {
opacity: 0.95;
}

//菜单栏透明
.header-inner {
margin-top: 18px;
background: rgba(255,255,255,0.95);
}

//搜索框透明
.popup {
opacity: 0.95;
}

// 添加顶部边距
.main {
margin: 4px auto 0;
}

.header {
+mobile() {
padding: 4px;
}
}
// 圆角计划
.header-inner {
border-radius: 50px 50px 18px 18px;
}
.site-brand-container {
border-radius: 18px 18px 0 0;
+mobile() {
border-radius: 18px;
}
}
.sidebar-inner {
border-radius: 18px;
}
.back-to-top {
border-radius: 0 0 18px 18px;
}
.post-block {
border-radius: 18px !important;
margin-top: 18px;
}
.pagination {
border-radius: 18px !important;
}
.comments {
border-radius: 18px !important;
}
// 字体大小
.post-body {
font-size: 15px;
}

里面的数值可以根据自己的想法修改。这里我启用了圆角化,这样页面看起来可爱又舒服。

Canvas_nest

v8更新之后动态背景只剩下canvas_ribbon一个选项了,但我又很想要还原以前的风格,于是找到了官方地址,跟着README一步一步配置即可。

再次进入主题配置文件,找到custom_file_path,将footer启用。

还需要注意的一点:v8升级之后swig文件已经替换成了njk,因此官方所说的

Create a file named footer.swig in hexo/source/_data directory (create _data directory if it does not exist).

应该将footer.swig改成footer.njk

最后在配置文件里新增一段canvas_nest: true就可以运行了。

Animation Settings

1
2
3
4
5
6
7
8
9
10
11
motion:
enable: true
async: false
transition:
# All available transition variants: https://theme-next.js.org/animate/
post_block: fadeIn
post_header: fadeInDown
post_body: fadeInDown
coll_header: fadeInLeft
# Only for Pisces | Gemini.
sidebar: bounceInUp

这里可以看到所有的动画设置和名称,根据想要的样式修改即可。

自动打开编辑器

这与更新无关,但加上之后可以提升一些写作的速度。

在站点目录下新建scripts文件夹,里面添加一个js脚本:

1
2
3
4
var spawn = require('child_process').exec;
hexo.on('new', function(data){
spawn('start "Typora.exe" ' + data.path);
});

此处的start "Typora.exe"里面应该填写编辑器所在的路径。此处我用的是Typora,因此这里应该指向Typora.exe所在的文件路径。

配置好后,之后每次执行完hexo new后都会自动弹出编辑器,不用再去_post路径下寻找文章了。


至此,你已经完成了此次更新!恭喜!

其他问题和更新相关的说明请查看官方文档