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 / src / view 把需要修改的 JSX 复制到主题目录下的 layout/widget，再进行魔改即可。

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

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

对于其它 JS 和 JSX 的魔改

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

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

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

魔改 CSS

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

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

@import "imaegoo"
@import "night"

代码压缩

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

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

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

gulpfile.js

// 压缩 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'));
});