Hexo-NexT版本更新记录

本博客之前的主题版本是NexT-7.1.2,如今最新的版本已经是7.7.0了,为了能用上最新的特性,前几天对主题进行了升级,也踩了不少坑。本文主要记录升级过程。

  • 更新前的版本:Hexo-3.8.0、NexT-7.1.2
  • 更新后的版本:Hexo-4.2.0、NexT-7.7.0

说明:本文升级过程中没有修改主题源代码,同时保留了除主页轮播图外基本所有自定义布局、样式

为什么要更新?

当时选择NexT主题就是看中它的维护者多、用户量大,基本一个月左右的时间就会有一个版本更新,直接跟着官方就可以用到最新的特性。

但由于我之前对NexT主题做了不少自定义修改,这也使得更新主题变得比较麻烦,没有办法通过git pull平滑更新,这也违背了我选择NexT主题的初衷。同时,现在可以通过数据文件(Data File)将配置与主题分离,同时也可以把自定义布局、样式放到数据文件中,不用再修改主题源码,便于后续主题更新。

因此,为了以后可以方便的更新,我准备花点时间把NexT升级一下。

插件更新

插件更新见:本博客当前使用的插件总结

数据文件

自从NexT-7.3.0开始,官方推荐采用数据文件将配置与主题分离,这样我们可以在不修改主题源码的同时完成选项配置、自定义布局、自定义样式,便于后续NexT版本更新。

next.yml

我们可以将所有主题配置放在一个位置(hexo/source/_data/next.yml)。这样就无需编辑主题配置文件(next/_config.yml)。

具体步骤:

  1. hexo/source/_data 目录中创建 next.yml(如果_data不存在,则创建目录)。
  2. next.yml 设置 override 选项为 true。
  3. 所有 NexT 主题选项从主题配置文件复制到hexo/source/_data/next.yml中。

然后我们只需要根据自己的需求配置next.yml即可。

languages.yml

我们原来是通过配置主题下的languages目录中的zh-CN.yml文件来对菜单等进行中文翻译的,现在我们可以通过在hexo/source/_data/下新建数据文件languages.yml,配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
zh-CN: 
menu:
home: 首页
top: 热榜
archives: 归档
categories: 分类
tags: 标签
about: 关于
links: 友情链接
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益 404
movies: 观影
books: 阅读
gallery: 画廊

reward:
donate: <i class="fa fa-qrcode fa-2x" style="line-height:35px;"></i>
wechatpay: 微信支付
alipay: 支付宝
bitcoin: 比特币

styles.styl

我们只需要把原来的hexo/next/source/css/_custom/_custom.styl中的全部自定义样式放到hexo/source/_data/styles.styl即可。

然后在NexT的配置文件next.yml中取消styles.styl的注释:

1
2
3
4
custom_file_path:

- #style: source/_data/styles.styl
+ style: source/_data/styles.styl

variables.styl

圆角设置

在自定义样式文件variables.styl中添加:

1
2
3
// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;

然后在NexT的配置文件next.yml中取消variables.styl的注释:

1
2
3
4
custom_file_path:

- #variables: source/_data/variables.styl
+ variables: source/_data/variables.styl

中文字体设置

首先修改主题配置文件next.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
font:
- enable: false
+ enable: true

# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
- host:
+ host: https://fonts.loli.net

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: xx`. Use `px` as unit.

# Global font settings used for all elements in <body>.
global:
external: true
- family:
+ family: Noto Serif SC
size:

修改配置文件variables.styl,增加如下代码:

1
2
3
// 中文字体
$font-family-monospace = consolas, Menlo, monospace, $font-family-base;
$font-family-monospace = get_font_family('codes'), consolas, Menlo, monospace, $font-family-base if get_font_family('codes');

body-end.swig

打字特效、鼠标点击特效

之前版本:Hexo-NexT 添加打字特效、鼠标点击特效中,以下代码是放在hexo/next/_layout/_custom/custom.swig文件中的,现在这部分代码需要放到hexo/source/_data/body-end.swig文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{# 鼠标点击特效 #}
{% if theme.cursor_effect == "fireworks" %}
<script async src="/js/cursor/fireworks.js"></script>
{% elseif theme.cursor_effect == "explosion" %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script async src="/js/cursor/explosion.min.js"></script>
{% elseif theme.cursor_effect == "love" %}
<script async src="/js/cursor/love.min.js"></script>
{% elseif theme.cursor_effect == "text" %}
<script async src="/js/cursor/text.js"></script>
{% endif %}

{# 打字特效 #}
{% if theme.typing_effect %}
<script src="/js/activate-power-mode.min.js"></script>
<script>
POWERMODE.colorful = {{ theme.typing_effect.colorful }};
POWERMODE.shake = {{ theme.typing_effect.shake }};
document.body.addEventListener('input', POWERMODE);
</script>
{% endif %}

然后在NexT的配置文件next.yml中取消body-end.swig的注释:

1
2
3
4
custom_file_path:

- #bodyEnd: source/_data/body-end.swig
+ bodyEnd: source/_data/body-end.swig

然后我们在next.yml中增加如下配置项:

1
2
3
4
5
6
7
8
9
# 鼠标点击特效
# mouse click effect: fireworks | explosion | love | text
cursor_effect: fireworks

# 打字特效
# typing effect
typing_effect:
colorful: true # 礼花特效
shake: false # 震动特效

友链添加

从第一种友链方式改用第二种友链方式,因为第二种瀑布流友链样式是不用修改NexT主题源文件的。

近期文章

在之前的版本中(NexT-7.1.2),我们只需要将以下代码贴在next/layout/_macro/sidebar.swig中的if theme.links对应的endif后面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
{% set posts = site.posts.sort('-date') %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

为了配置方便,在主题的_config.yml中添加了几个变量,如下:

1
2
3
recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

现在我们把上面的代码放到hexo/source/_data/sidebar.swig文件中,并且做以下更改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if theme.recent_posts %}
<div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout }}">
<div class="links-of-blogroll-title">
<!-- modify icon to fire by szw -->
<i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
{{ theme.recent_posts_title }}
</div>
<ul class="links-of-blogroll-list">
- {% set posts = site.posts.sort('-date') %}
+ {% set posts = site.posts.sort('-date').toArray() %}
{% for post in posts.slice('0', '5') %}
<li>
<a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

这是因为 NexT 已经更换 Nunjucks 作为模板引擎。

然后在NexT的配置文件next.yml中取消sidebar.swig的注释:

1
2
3
4
custom_file_path:

- #sidebar: source/_data/sidebar.swig
+ sidebar: source/_data/sidebar.swig

注意:上面所有特效的JS代码文件都放在站点的source目录下(即hexo/source/js/)而不是主题目录下,如果没有js目录,则新建一个。

粒子时钟特效

之前版本设置方法见:Hexo-NexT 增加 canvas 粒子时钟

现在我们只需要把粒子时钟的js代码直接放入到hexo/source/_data/sidebar.swig文件即可。

post-meta.swig

置顶文章标志

首先我们需要安装hexo-generator-index-pin-top这个插件,具体过程详见:本博客当前使用的插件总结

然后将以下代码放入hexo/source/_data/post-meta.swig文件

1
2
3
4
5
6
{% if post.top %}
<span class="post-meta-divider">|</span>
<i class="fa fa-thumb-tack"></i>
<font color=7D26CD>置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}

然后在NexT的配置文件next.yml中取消post-meta.swig的注释:

1
2
3
4
custom_file_path:

- #post-meta: source/_data/post-meta.swig
+ post-meta: source/_data/post-meta.swig

简体/繁体一键切换

之前版本设置方法见:Hexo-NexT 支持简体繁体一键切换

现在我们只需要把显示简繁转换按钮的swig代码直接放入到hexo/source/_data/footer.swig文件即可。

注意:简体/繁体一键切换的JS代码文件放在站点的source目录下(即hexo/source/js/)而不是主题目录下,如果没有js目录,则新建一个。

至此,主题升级完成。

新启用的功能

  • NexT主题支持多评论系统,现在我同时开启了Valine、Disqus两个评论系统
  • NexT主题增加了Mac风格代码块样式,非常漂亮,果断切换

----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡