记Icarus博客主题升级

后知后觉，前几天才发现icarus主题已经更新到3.0版本了。
本着能不升级就觉不升级的原则，点进了主题作者的博客看了下升级内容。嗯，真香！
虽然没学过react，但是程序员嘛，照着抄还是没什么难度…升级开始！

其实在样式上，本博客更新前后的区别并不大，主要更新内容如下：

1. icarus主题从v2升级到v3（这部分主要是主题源码上的升级，v3版本jsx代码看起来比v2的ejs清爽。）
2. 新增了黑夜模式主题切换（参考：Icarus 夜间模式支持 3.0 了）
3. 新增了友情链接（参考：博客源码分享）
4. 模块化了APlayer插件（v2版本时，我是直接把APlayer直接加在Link模块上的，现在独立了）
5. 其他细节改动（包括：还原本博客在v2时的一些改动。参考：hexo-theme-amazing）

以下自己做的一些小小的改动

说明下，博客修改过的主题没有单独抽出来一个库（因为我并不擅长这个，都是在前人的基础上改的）
但是在博客备份中可以获取到，仓库下有几个分支，都是以前用过的主题，最新的分支是icarus-v3

• 模块化APlayer插件

文件目录结构说明

# 新增(修改)了以下文件，文件所在目录如下：
# 如果有遗漏，那可能是我真忘记改过什么了...但是聪明的你们，肯定能自己搞定！
# 其实有些样式文件没在这里列出来，实在是感觉没必要吧
-themes/icarus
           |-include
           |    |-schema
           |       |-widget
           |       |   |-aplayer.json
           |       |-config.json
           |-layout      
           |   |-widget    
           |       |-aplayer.jsx
           |-source      
           |   |-music
           |       |-*
           |-_config.yml 
           |-_config.post.yml

aplayer.jsx

const { Component } = require('inferno');
const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');

class APlayer extends Component {
    render() {
        const {APlayerCssUrl, APlayerJsUrl, musicJsUrl } = this.props;
        return <div class="card widget">
            <link href={APlayerCssUrl}/>
            <div id="aplayer" style="margin: 0 auto;"/>
            <script src={APlayerJsUrl}/>
            <script src={musicJsUrl}/>
        </div>;
    }
}

module.exports = cacheComponent(APlayer, 'widget.links', props => {
    const { helper } = props;
    return {
        APlayerCssUrl: helper.url_for('/music/APlayer.min.css'),
        APlayerJsUrl: helper.url_for('/music/APlayer.min.js'),
        musicJsUrl: helper.url_for('/music/APlayer_Music.js'),
    };
});

aplayer.json | json其实照着其他widget抄就好了

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "/widget/aplayer.json",
    "description": "aplayer music",
    "type": "object",
    "properties": {
        "type": {
            "type": "string",
            "const": "aplayer"
        }
    },
    "required": [
        "type"
    ]
}

_config.yml

# widget配置新增如下内容：
widget:
    # APlayer music
    -
      position: left
      type: aplayer

• 鼠标点击特效

文件目录结构说明

# 目录结构其实跟APlayer差不多，改动思路也一样，这次是加在plugin下面
-themes/icarus
           |-include
           |    |-schema
           |       |-plugin
           |       |   |-fireworks.json
           |       |-config.json
           |-layout      
           |   |-plugin    
           |       |-fireworks.jsx
           |-source      
           |   |-js
           |       |-anime.min.js
           |       |-fireworks.js
           |-_config.yml

fireworks.jsx

const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');

class FireWorks extends Component {
    render() {
        const { animJsUrl, fireworksJsUrl } = this.props;

        return <Fragment>
            <canvas className="fireworks" width="100%" height="100%"
                    style="position: fixed; left: 0; top: 0; z-index: 99999999; pointer-events: none;"/>
            <script src={animJsUrl} defer={true}/>
            <script src={fireworksJsUrl} defer={true}/>
        </Fragment>;

    }
}

FireWorks.Cacheable = cacheComponent(FireWorks, 'plugin.fireworks', props => {
    const { helper, head } = props;
    if (head) {
        return null;
    }
    return {
        animJsUrl: helper.url_for('/js/anime.min.js'),
        fireworksJsUrl: helper.url_for('/js/fireworks.js')
    };
});

module.exports = FireWorks;

fireworks.json | 感觉没必要放出来，算了，还是放吧

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "/plugin/fireworks.json",
    "description": "click to show fireworks",
    "type": "boolean",
    "default": true
}

_config.yml

# plugins新增如下内容：
plugins:
    fireworks: true

• 关于CND加速

之前我的博客都是把一些google-font之类的下载到本地引用的，因为某些原因，这些样式可能加载不出来或者特别慢。
v3版的icarus新增了多个cdn支持，可以自由选择cdn，还是很值的点赞的。
但是有时候吧，感觉还是慢了些，所以折腾着又把样式下载到了本地。
因为icarus好多东西都被抽到了hexo-component-inferno中，更改起来还是挺麻烦的。
这里提供个思路：断网，把所有经过cdn的js,css等文件记录下来；然后联网，下载到本地；修改CND.js，引用本地资源

source/cdn/cdn.js | 这里只展示了部分内容，并非完整的CDN.js

/**
 *  1. 修改此js, 替换到 hexo-component-inferno 模块中, 路径：lib/hexo/helper/cdn.js
 *  2. 提前把cdn加载的 js、css、icon 等文件下载保存到当前目录[theme/icarus/source/cdn/]下 (很麻烦的~~)
 *  3. 本地引用，_config.yml 中 CDN provider settings 修改成 my_xxx
 */
const PROVIDERS = {
    LIBRARY: {
        cdnjs: '[cdnjs]https://cdnjs.cloudflare.com/ajax/libs/${ package }/${ version }/${ filename }',
        loli: '[cdnjs]https://cdnjs.loli.net/ajax/libs/${ package }/${ version }/${ filename }',
        jsdelivr: 'https://cdn.jsdelivr.net/npm/${ package }@${ version }/${ filename }',
        unpkg: 'https://unpkg.com/${ package }@${ version }/${ filename }',
        my_lib: '/cdn/js/${ filename }'
    },
    FONT: {
        google: 'https://fonts.googleapis.com/${ type }?family=${ fontname }',
        loli: 'https://fonts.loli.net/${ type }?family=${ fontname }',
        my_font: '/cdn/css/css2.css'
    },
    ICON: {
        loli: 'https://cdnjs.loli.net/ajax/libs/font-awesome/5.12.0/css/all.min.css',
        fontawesome: 'https://use.fontawesome.com/releases/v5.12.0/css/all.css',
        my_icon: '/cdn/css/fontawesome.all.css'
    }
};

_config.yml

# CDN provider settings
providers:
    cdn: my_lib  
    fontcdn: my_font
    iconcdn: my_icon

后续可能会继续优化博客的加载速度，什么时候优化就不一定了，再会~