记Icarus博客主题升级

记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插件
文件目录结构说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 新增(修改)了以下文件,文件所在目录如下:
# 如果有遗漏,那可能是我真忘记改过什么了...但是聪明的你们,肯定能自己搞定!
# 其实有些样式文件没在这里列出来,实在是感觉没必要吧
-themes/icarus
|-include
| |-schema
| |-widget
| | |-aplayer.json
| |-config.json
|-layout
| |-widget
| |-aplayer.jsx
|-source
| |-music
| |-*
|-_config.yml
|-_config.post.yml
aplayer.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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抄就好了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"$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
1
2
3
4
5
6
# widget配置新增如下内容:
widget:
# APlayer music
-
position: left
type: aplayer
  • 鼠标点击特效
文件目录结构说明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 目录结构其实跟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
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
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 | 感觉没必要放出来,算了,还是放吧
1
2
3
4
5
6
7
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "/plugin/fireworks.json",
"description": "click to show fireworks",
"type": "boolean",
"default": true
}
_config.yml
1
2
3
# 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
* 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
1
2
3
4
5
# CDN provider settings
providers:
cdn: my_lib
fontcdn: my_font
iconcdn: my_icon

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

作者

Trainoo

发布于

2020-05-31

更新于

2020-06-02

许可协议