hexo-theme-icarus 3 食用经验分享

昨天晚上 Icarus 主题的 RC 版本发布,离正式版不远了,我自 3.0.0-beta.1 一路使用到现在,把自己的使用经验分享一下。

魔改迁移

由于主题作者换掉了 ejs 语言,全部重写了一遍,迁移这块的难度是最大的。

拉 dev 分支,冲突实在是太多了,我的办法是,把在旧版上的魔改的整个 diff 导出,然后直接从 dev 签出一个新的分支,参考 diff 对每个文件都重新修改,花了不到2个小时搞定。

魔改 hexo-component-inferno 组件

主题中部分可重用的 JS 和 JSX 代码已经被移到另一个项目 hexo-component-inferno 中,我们如何对这些组件魔改?此时要分2种情况——

  1. widgets 的魔改
  2. 其它 JS 和 JSX 的魔改

对于已经移除代码的 widgets

直接从 hexo-component-inferno 把 JSX 复制到主题目录下的 layout/widget,再进行魔改即可。

例如:我需要修改 subscribe_email widget,在组件根 DOM 上加一个 id 以实现 live2d 交互,需要复制 hexo-component-inferno/src/view/widget/subscribe_email.jsxthemes/icarus/layout/widget/subscribe_email.jsx,再进行修改。

当然,如果你有自己写的 widget,也可以统统丢到 layout/widget 里去。

对于其它 JS 和 JSX 的魔改

需要全局搜索引用处,修改引用路径为主题路径下改好的文件。

例如:我需要修改 paginator.jsx 以改变分页的 delta 值,可以复制 hexo-component-inferno/src/view/misc/paginator.jsxthemes/icarus/layout/misc/paginator.jsx,再进行魔改,修改完成后,需要全局搜索 hexo-component-inferno/lib/view/misc/paginator 并替换为 ./misc/paginator(注意,这里我写的是相对路径,请在替换后确认每处引用的相对路径正确)。

1
2
- const Paginator = require('hexo-component-inferno/lib/view/misc/paginator');
+ const Paginator = require('./misc/paginator');

魔改 CSS

不建议直接修改原来的 CSS 文件,而是覆盖样式,由于 3.0 中已经对 CSS 代码进行细分,建议把魔改的 CSS 也抽成单独的文件,方便管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
icarus
└─source
└─css
│ cyberpunk.styl
│ default.styl
+ │ imaegoo.styl // 个人魔改
+ │ night.styl // 夜间模式
│ style.styl
└─live2d
│ flat-ui-icons-regular.eot
│ flat-ui-icons-regular.svg
│ flat-ui-icons-regular.ttf
│ flat-ui-icons-regular.woff
│ waifu.css

自己建立的 styl 文件,需要在 style.styl 中引入。

style.styl
1
2
@import "imaegoo"
@import "night"

代码压缩

我曾经使用 gulp 来压缩 Hexo 生成的静态 HTML, CSS, JS 文件,但 3.0 对所有的 JS 使用了 ES6 重写,这造成了压缩插件不工作。

我尝试过把所有使用 ES6 语法的地方手工改回 ES5 语法,但最终放弃了,为什么要倒退呢?这反倒会增加未来升级的难度。

我放弃了对存在 ES6 的 JS 压缩,把它们全部丢进忽略列表吧!

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
// 压缩 js 文件
gulp.task('minify-js', function () {
return gulp.src([
'./public/**/*.js',
'!./public/js/algolia.js', // ignore es6 js file
'!./public/js/animation.js', // ignore es6 js file
'!./public/js/back_to_top.js', // ignore es6 js file
'!./public/js/insight.js', // ignore es6 js file
'!./public/js/main.js' // ignore es6 js file
])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

评论