博客升级记录（2020.05.13）

发表于 更新于 分类于 > 热度：
本文字数： 4.3k 阅读时长 ≈ 4 分钟

前言

NexT 更新 v8.0.0-rc.2 （Release Candidate）版本，本博客在大更新一个月后再次更新，本次 Next 主题更新更换了新的仓库地址。
由于 NexT 以前使用的 swig 模版引擎停止维护，去年迁移到了 Nunjucks，但是 layout 目录下的模版文件后缀名没有更改。原因是修改后缀名影响太广，会使用户在执行 git pull 进行更新时产生大量的冲突。这次更换仓库就是为了解决这些历史遗留问题。

更新总览

  • 更新前版本：Hexo-4.2.0 NexT-7.8.0
  • 更新前版本：Hexo-4.2.0 NexT-8.0.0-rc.2

NexT 主题自 8.0.0 版本开始，将自带的 Font Awesome 5 图标由 4.7.0 版本升级为了 5.13.0 版本。此次升级并不向下兼容。v8.0.0 版本计划在 Hexo 5.0 版本后发布。
本次更新主要修复了一些 BUG 以及更新了主题明暗模式的不同highlight style，这也是本次更新的目的。
由于更换了仓库地址，本次更新需要重新git clone，好在我上次的大更新使用了数据文件（ Data File )，所以很多的自定义设置几乎没有受到影响，只是一两个样式需要重新修改以适配新主题。

主要更新内容

highlight style

增加了highlight.js文件以支持主题明暗模式的不同highlight style

位置：主题\scripts\events\lib\highlight.js
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
const fs = require('fs');

function parse(file) {
  let css = fs.readFileSync(file).toString();
  let rule = '';
  let background = '';
  let foreground = '';
  css.replace(/\.hljs([^\S]+|,[^\{]+)\{(.*?)\}/sg, (match, $1, content) => {
    rule += content;
    return match;
  });
  rule.split('\n').forEach(line => {
    if (line.includes('background:')) background = line.split('background:')[1];
    else if (line.includes('background-color:')) background = line.split('background-color:')[1];
    else if (line.includes('color:')) foreground = line.split('color:')[1];
  });
  return {
    file,
    background,
    foreground
  };
}

module.exports = hexo => {
  hexo.config.highlight.hljs = false;
  let file = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.highlight_theme}.css`;
  hexo.theme.config.highlight = parse(file);
};
位置：主题\_config.yml
1
2
3
4
5
6
7
8
9
codeblock:
  ...
-  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
-  # See: https://github.com/chriskempson/tomorrow-theme
-  highlight_theme: normal
+  # See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
+  theme:
+    light: default
+    dark: dark

本博客的 highlight style[1]

位置：博客\source\_data\styles.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
// ```代码块diff样式
pre .hljs-addition {
    transition: color 1s,background 1s;
    transition-timing-function: ease-in-out;
    color: #6eff6e;
    background: #4e4e4e;
}
pre .hljs-deletion {
    transition: color 1s,background 1s;
    transition-timing-function: ease-in-out;
    color: #ff8181
    background: #4e4e4e;
}
// ```代码块顶部样式
.highlight figcaption {
    font-family: "ZCOOL KuaiLe";
    font-weight: bold;
}
// ```代码块
.highlight {
    box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
}
// ```代码块文字
.highlight, .highlight figcaption, .highlight .code pre, .highlight .gutter pre {
    transition: color 1s,background 1s;
    transition-timing-function: ease-in-out;
}
// ```代码块复制按钮样式
.copy-btn {
    right: 6px;
    &:hover {
        font-size: 2em;
        color: #969696;
    }
}
// ```代码块选中样式
.highlight ::selection {
    background: #ffffff;
    color: #000000;
}
// 暗主题
@media (prefers-color-scheme: dark)
    // ```代码块顶部样式
    .highlight figcaption {
        border-bottom: 2px solid #747474;
        color: #bcbcbc;
        background-color: #121212
    }
    // ```代码块左侧样式
    .highlight .gutter pre {
        background-color: #121212
        color: #bcbcbc;
    }
    .highlight, .highlight .code pre {
        background-color: #252525
    }
    // ```代码块
    .highlight {
        opacity: 0.8;
        box-shadow: 0 0 13px 3px rgba(0, 0, 0, 0.5);
        &:hover {
            opacity: 1;
        }
    }
// 亮主题
@media (prefers-color-scheme: light)
    // ```代码块顶部样式
    .highlight figcaption {
        border-bottom: 2px solid #bcbcbc;
        color: #777
    }
    // ```代码块diff样式
    pre .hljs-addition {
        background: #eaeaea;
        color: #49ab49;
    }
    pre .hljs-deletion {
        background: #eaeaea;
    }
    // ```代码块选中样式
    .highlight ::selection {
        background: #b6b6b6;
    }

更新 Valine 设置

位置：主题\_config.yml
1
2
3
4
5
6
7
8
9
10
11
valine:
-  appid: # Your leancloud application appid
-  appkey: # Your leancloud application appkey
+  appId: # Your leancloud application appid
+  appKey: # Your leancloud application appkey
  ...
-  guest_info: nick,mail,link # Custom comment header
+  meta: # Custom comment header
+    - nick
+    - mail
+    - link

允许空菜单

位置：主题\_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
-override: false

menu:
-  home: / || fa fa-home
+  #home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
-  archives: /archives/ || fa fa-archive
+  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  1. 1.暗/亮：agate / github-gist ↩
  2. 2.参考：next-8-0-0-rc-2-released ↩