NexT 主题的一些问题

我的 Blog 采用的是 GitHub 提供的空间,利用 Hexo 生成静态博客文件。NexT 是Hexo 排名第一的主题,不仅界面美观,文档也很详细,看的出来作者是用心了。

即使如此,我在使用 NexT 时并不顺利,接连出现了几个问题:

生成静态文件时报系统错误

在命令行上输入 hexo g 生成静态文件的过程中,报了以下错误:

1
2
3
4
5
6
7
8
9
10
11
12
ERROR Asset render failed: lib/canvas-ribbon/canvas-ribbon.js
Error
at new JS_Parse_Error (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:195:18)
at js_error (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:203:11)
at croak (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:679:9)
at token_error (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:687:9)
at unexpected (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:693:9)
at expr_atom (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:1200:9)
at maybe_unary (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:1362:19)
at expr_ops (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:1397:24)
at maybe_conditional (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:1402:20)
at maybe_assign (/Users/qiya/Blog/node_modules/uglify-js/lib/parse.js:1426:20)
在以上错误提示中我们可以看到错误发生在 uglify-js 的 parse.js 中。uglify 是一个用于压缩 js 文件的库,Hexo 在编译文件时利用它对主题中的 js 文件进行压缩。错误提示的第一行表明 uglify 是在对 canvas-ribbon.js 进行压缩时出错,但具体什么错误并没有说明。不过我们可以通过 uglify 命令对 canvas-ribbon.js 处理来得到具体的错误原因,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
>> uglifyjs themes/next/source/lib/canvas-ribbon/canvas-ribbon.js > test.js
Parse error at /Users/qiya/Blog/themes/next/source/lib/canvas-ribbon/canvas-ribbon.js:5,47
document.addEventListener("touchstart", (e) => {
^
ERROR: Unexpected token: operator (>)
at JS_Parse_Error.get (eval at <anonymous> (/usr/local/lib/node_modules/uglify-js/tools/node.js:21:1), <anonymous>:79:23)
at fatal (/usr/local/lib/node_modules/uglify-js/bin/uglifyjs:268:52)
at run (/usr/local/lib/node_modules/uglify-js/bin/uglifyjs:225:9)
at Object.<anonymous> (/usr/local/lib/node_modules/uglify-js/bin/uglifyjs:155:5)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Function.Module.runMain (module.js:609:10)

出错原因已经非常清楚了,uglify 对 canvas-ribbon.js 进行压缩时遇到了语法问题。canvas-ribbon.js 内容如下:

1
2
3
4
5
6
7
8
9
10
11
!function() {
document.addEventListener("touchstart", e => {
targetA = true;
});
document.addEventListener("touchmove", e => {
targetA = false
})
document.addEventListener("click", e => {
targetA = true
})
...

原来 canvas-ribbon.js 中使用了 ES6 的语法,而 uglify 并没有兼容 ES6 语法结构,导致出现错误。最简单的解决方案是将 canvase-ribbon.js 中 ES6 的语法改为 ES5 即可。具体如下:

1
2
3
4
5
6
7
8
9
10
!function() {
document.addEventListener("touchstart", function(e) {
targetA = true;
});
document.addEventListener("touchmove", function(e) {
targetA = false
})
document.addEventListener("click", function(e) {
targetA = true
})

修改并保存后再次执行 hexo g 命令,恢复正常。

界面打开速度慢

正常通过浏览器打开首页时,长时间无法打开。利用 Chrome 的检查工具发现线程全部卡在以下这句代码上:

1
<link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">

这句代码的意思是加载 Google 提供的外部字体样式。我们都知道 Google 是被墙掉的,浏览器无法访问到该资源直到访问超时。其实 next 主题已经提供了关闭加载外部字体的功能配置,打开主题的 _config.yml 文件,将 font.enable 或 font.global.external 改为 false 即可。如下图:

不想关闭,那么可以使用 Google 字体的替代方案,将配置 font.host 改为国内可访问的 //fonts.cat.net 即可。

分享到