Hexo NexT 主题 7.x 版本的使用配置与美化
0. 前述
一年多的时间了，Hexo NexT 主题升级到了 7.7，在 6.x 版本我进行了相当多的操作与修改，做了一个很完善的自用版本。但在阅读了 7.x 的版本的官方文档后，还是很心动。相比于 6.x 版本，NexT 7 主要由如下更新：
- 将众多特性合并到主题当中，例如：顶部展示加载进度条，头像滚动，工信部、公安部备案信息等。尤其是备案信息，当初为了满意的样式改了很久
- 支持了更多特色，但也移除了一些特性
- 支持文章内 tag 标签，图片组，相关文章等新样式
相比于当初魔改 Next 6 主题，Next 7 主题显然更加好用，且样式也较为好看。寒假过年适逢疫情不便出门，在家就将博客的主题升级了下。具体的改动介绍如下，做一个备忘，也希望能够给大家帮助。
1. 安装与使用
安装好 Hexo 后，将 NexT 主题文件克隆或者拷贝到 hexo/theme 目录下即可。因为我在 NexT 6 中做了很多修改，这里用到是全新安装
1 | cd hexo |
2. 配置功能
- 可以直接使用的特性
Next 7 中有许多特性，具体的用法与特点官方文档写的很详细，请自行对照查看。 - 自动节选
自 Next 7.6 中已经移除了auto_excerpt这一特性，官方推荐使用hexo-excerpt插件完成。
插件的 github 仓库，以及安装方法：1
$ npm install hexo-excerpt --save
- 媒体播放器
Hexo 是静态博客，不支持媒体文件的播放。之前一直是使用网易云音乐和哔哩哔哩提供的 ifream 作为媒体播放器，但网易云音乐支持的歌越来越少了。而且用 ifream 引用也会遇到因为加载速度不一致报错的问题。因此在去年的新年贺词中，就首先使用了 Aplayer 播放器，不过mmedia插件也不错，综合了 Aplayer 和 Dplayer（一款插入 B 站视频的脚本），后期会进行迁移。
安装方法：1
2
3
4
5
6
7
8// 安装aplayer，https://github.com/MoePlayer/APlayer
npm install --save hexo-tag-aplayer
// 安装mmedia, https://github.com/MonoLogueChi/hexo-tag-mmedia
// 如果安装了aplayer或者dplayer,需要先卸载
npm uninstall hexo-tag-dplayer
npm uninstall hexo-tag-aplayer
// 安装
npm install hexo-tag-mmedia --save3. 我做的修改
1. 文章结束处添加感谢阅读的提示
打开
themes/next/_config.yml，添加1
2
3
4
5
6# At the end of the article, show thanks for reading
end_info:
enable: true
start_info: -------The end of this article
icon: paw
end_info: Thank you for your reading-------在
themes/next7/layout/_partials/post下新建passage-end-tag.swig，写入如下内容，保存。1
2
3
4
5<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">{{theme.end_info.start_info}} <i class="fa fa-{{ theme.end_info.icon }}"></i> {{theme.end_info.end_info}}</div>
{% endif %}
</div>打开
themes\next6\_macro\post.swig，在您如下代码 (相关文章) 之前，1
2
3{% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
{% include 'post-related.swig' with { post: post } %}
{% endif %}加入
1
2
3
4
5<div>
{% if not is_index and theme.end_info.enable %}
{{ partial('_partials/post/passage-end-tag.swig') }}
{% endif %}
</div>（这里的语法和 Next 6 不同）
结束，刷新网页查看效果
2. 文章中添加对应的多语言版本的链接
这个功能需要手动设置对应文章的 abbrlink 一致。建议在本地先编译一个语言版本的文件，然后手动修改另一个版本的文章的链接。
- 打开
themes/next/_config.yml，添加1
2
3
4
5
6
7# Go to another language Page
translation:
enable: true
language: English # language name
icon: globe
info: 英文版本
url: https://en.xian6ge.cn # Destination URL - 在
themes\next6\_partials\下新建post-tran.swig，写入如下内容，保存。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<div>
<ul class="post-copyright">
<li class="post-copyright-link">
<strong><i class="fa fa-{{ theme.translation.icon }}"></i> {{ theme.translation.language + __('symbol.colon') }}</strong>
<span id="url" style="display:none">{{theme.translation.url}}</span>
<span id="path" style="display:none">{{post.permalink}}</span>
<span id="info" style="display:none">{{theme.translation.info}}</span>
<span id="goto"></span>
</li>
</ul>
//我不知道怎么整理链接，所以只能用JavaScript重写。
<script language=javascript>
var url = document.getElementById("url").innerHTML;
var path = document.getElementById("path").innerHTML;
var info = document.getElementById("info").innerHTML;
path=GetUrlRelativePath(path);
if(info.length==0){
infos= url+path;
}
else{
infos=info;
}
var str = "<a href='"+url+path+"'>"+infos+"</a>"
console.log(str);
document.getElementById("goto").innerHTML=str;
function GetUrlRelativePath()
{
var url = document.location.toString();
var arrUrl = url.split("//");
var start = arrUrl[1].indexOf("/");
var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符
if(relUrl.indexOf("?") != -1){
relUrl = relUrl.split("?")[0];
}
return relUrl;
}
</script> - 打开
themes\next6\_macro\post.swig，在 POST BODY 之前，加入1
2
3
4
5
6{% if theme.translation.enable and not is_index %}
<div>
{{ partial('_partials/post/post-tran.swig') }}
<br/>
</div>
{% endif %} - 结束，重新编译运行，查看效果。
3. 不蒜子统计提示语
NexT 走简洁风格，许多地方只展示图标而略去了文字说明。但因为我在网站底部添加了太多信息，最低端的访客数提示未免显得头重脚轻。
打开 theme\next6\layout\_third-party\analytics\busuanzi-counter.swig，修改如下
1 | {% if theme.busuanzi_count.total_visitors %} |
其他小修改
1. 解决左边工具栏上无法跳转到外部链接的问题
由于 NexT6 做了设置，左边工具栏上的所有链接将会自动在前面添加上当前域名。对于，“首页”，“关于” 这样的链接没有问题。但如果要添加上外链，例如英文页面：https:\\en.xian6ge.cn，会被自动编译为 https:\\xian6ge.cn\https\en.xian6ge.cn，造成跳转出错。为此，我们可以采用一个折中的办法。
在 hexo\source 下建立一个 en.html 文件，在里面通过 JavaScript 代码跳转。但这样会遇到一个问题，Hexo 会编译所有文件，造成其中的 Js 代码失效。因此，在前面添加 layout: false 设置，告诉编译器不要编译该 HTML 文件。具体代码如下。
1 | layout: false |
2. 修改背景，颜色样式等
- 打开
themes/next/_config.yml，找到custom_file_path，打开style处的注释 - 打开
themes/hexo-theme-next/source/css/_data/style.styl，添加如下代码。(没有_data目录自行新建)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//添加背景图片
body { background:url(/images/backGround.jpg)}
//改掉题头颜色
.site-meta {
background: #F0D784; //修改为自己喜欢的颜色
}
//主标题颜色
.brand{
color: #2f9833
}
//副标题颜色
.site-subtitle{
color: #47b54a
}
//页脚统计文字颜色
.footer{
color: #F0D784
}
//修改页脚备案链接颜色
.footer a{
color: #F0D784
}
//修改页脚统计人数的颜色
.footer .with-love{
color: #F0D784
} - 如果出现编译出错，关闭
1.中的style，然后打开themes/next7/source/css/main.styl，末尾添加1
@import "_data/styles.styl";
- 结束，重新编译运行，查看效果。
3. 增加网站运行时间统计
这次没有在页脚处增加统计，避免过多的 js 代码拖累网站速度，将这段统计的代码放到关于中。但这个页面是由 markdown 文件编译的，无法执行 js 代码。又不像单独重写这一页面，于是使用 ifream 的技术方法。
- 在
about/文件夹下新建timer.html，写入如下内容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
77layout: false
title: "网站运行计时器"
comments: false
permalink:
---
<html lang="en">
<style type="text/css">
*{margin:0;padding:0}
.post-body{overflow-wrap:break-word;line-height:2;text-align:justify;font-size:1.125em}
@media(min-width:992px){
.post-body{text-align:justify}}
@media(min-width:1200px){
.post-body{font-size:1.125em}}
div{display:block}
.note{margin-bottom:20px;position:relative;border-radius:3px;padding:15px;border-width:1px;border-style:solid;border-image:initial}
.success{color:#3c763d;background:#dff0d8;border-color:#d0e6be}
.primary{background:#f3daff;border-color:#e1c2ff;color:#6f42c1}
p{letter-spacing:normal;margin:0 0 20px}
p:last-child{margin-bottom:0}
p:first-child{margin-top:0}
</style>
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
year - 作为date对象的年份，为4位年份值
month - 0-11之间的整数，做为date对象的月份
day - 1-31之间的整数，做为date对象的天数
hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
minutes - 0-59之间的整数，做为date对象的分钟数
seconds - 0-59之间的整数，做为date对象的秒数
microseconds - 0-999之间的整数，做为date对象的毫秒数 */
var year = 2018//document.getElementById("year").innerHTML;
var month = 02//document.getElementById("month").innerHTML;
var day = 13//document.getElementById("day").innerHTML;
var hour = 00//document.getElementById("hour").innerHTML;
var minute = 00//document.getElementById("minute").innerHTML;
var second = 00//document.getElementById("second").innerHTML;//北京时间2018-2-13 00:00:00
var t1 = Date.UTC(year,month,day,hour,minute,second);
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
if(diffYears==0){
document.getElementById("sitetime").innerHTML=/*+diffYears+" year "*/+diffDays+" 日 "+diffHours+" 小时 "+diffMinutes+" 分 "+diffSeconds+" 秒";
} else{
document.getElementById("sitetime").innerHTML=diffYears+" 年 "+diffDays+" 日 "+diffHours+" 小时 "+diffMinutes+" 分 "+diffSeconds+" 秒";
}
}
//siteTime(document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,document.getElementById("year").innerHTML,0);
siteTime();
</script>
</head>
<body class="post-body">
<div class="note primary">
<p>『贤柳阁』已经运行了 <span id="sitetime">已经运行了一年多了</span></p>
</div>
</body>
</html> - 打开
about\index.md，在需要展示的地方增加其中，1
2
3<span style="width:100%; height:260;border:none;text-align:center">
<iframe allowtransparency="yes" frameborder="0" width="100%" height="88" src="/about/timer.html"/>
</span>iframe的src标签中指向的是需要展示的 Html 文件，注意文件中要添加layout: false，避文件被编译。