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:

这里的代码模块样式可以在这里找到即时预览，把样式名直接输入进theme和prism栏即可。把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路径下寻找文章了。

至此，你已经完成了此次更新！恭喜！

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