Icarus主题修改记录

前言

用了几个月的 Butterfly 主题,逐渐对Butterfly的花里胡哨没了兴趣。最近看到Icarus主题迎来大更新,于是当即抛弃Butterfly,换回了比较简约风格的Icarus。

重大升级

Icarus 主题v3.0版本发布,变化如下:

  • 使用 JSX 和 Inferno.js 完全重写布局
  • 添加对特定于布局的配置的支持
  • 添加沉浸式消息框
  • 可自定义侧边栏
  • 响应式布局
  • 可设置文章头图片

主题源码地址: https://github.com/ppoffice/hexo-theme-icarus

主题配置

布局方式

主题默认为三栏,并且主体区域总宽度略显狭窄,改成两栏后Widget栏与Article内容栏宽度分配不合理,影响视觉。因为Icarus采用bulma框架的12格布局,即将整个网页的宽度分为了12份。为了更简便的布局和细微的调整,于是我弃用了12网格布局,直接使用百分比布局。

icarus/source/css创建layout.styl文件,添加内容如下:

1
2
3
4
5
6
7
@media screen and (min-width: 1280px)
.column.is-8-widescreen
flex: none
width: 78% !important #Article栏宽度占78%
.column.is-4-widescreen
flex: none
width: 22% !important #Widget栏宽度占22%

修改完之后在icarus/source/css/style.styl中引入该文件即可。

总体区域放宽

原本网页是12格布局,在icarus/source/css创建layout.styl文件,添加内容如下:

1
2
3
4
@media screen and (min-width: 1472px)
.is-2-column .container
max-width: 1320px !important
width: 1320px !important

修改完之后在icarus/source/css/style.styl中引入该文件即可。

添加图库

想要创建图库,首先在主题的_config.yml中开启画廊功能:

1
2
plugins:
gallery: true

添加画廊图片:

1
2
3
4
5
6
7
8
9
10
11
<div class="justified-gallery">

![Elephant](https://image.leeio.cn/Picture/1.png)
![Dog](https://image.leeio.cn/Picture/2.png)
![Birds](https://image.leeio.cn/Picture/3.png)
![Cat](https://image.leeio.cn/Picture/4.png)
![Fox](https://image.leeio.cn/Picture/5.png)
![Horse](https://image.leeio.cn/Picture/6.png)
![Leopard](https://image.leeio.cn/Picture/7.png)

</div>

自定义widget侧边栏

由于需求,我们想在侧边栏展示更多的东西,但Icarus主题并未提供自定义widget的功能,于是我们需要自己手动修改代码添加。
首先,在icarus\layout\widget目录下新建WidgetTest.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
const { URL } = require('url');
const { Component } = require('inferno');
const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');

class WidgetTest extends Component {
render() {
const { title, contents } = this.props;
return <div class="card widget">
<div class="card-content">
<h3 class="menu-label">{title}</h3>
<div id="xxx">
<span>{contents}</span> //此处可自定义
</div>
</div>
</div>;
}
}
module.exports = cacheComponent(WidgetTest, 'widget.WidgetTest', props => {
const { helper, widget } = props;
if (!(widget.contents).length) {
return null;
}
return {
title: helper.__('widget.WidgetTest'),
contents: widget.contents
};
});

然后在icarus\include\schema\widget目录下新建说明文件WidgetTest.json,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "/widget/WidgetTest.json", //注意文件名
"description": "Notice links widget configurations",
"type": "object",
"properties": {
"type": {
"type": "string",
"const": "WidgetTest"
},
"contents": {
"type": "string",
"description": "WidgetTest contents",
"nullable": true
}
},
"required": [
"type"
]
}

然后打开icarus\include\schema\common\widgets.json,修改如下:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "/common/widgets.json",
"description": "Sidebar widget configurations\nhttp://ppoffice.github.io/hexo-theme-icarus/categories/Widgets/",
"type": "array",
"items": {
"type": "object",
"properties": {
"position": {
"type": "string",
"description": "Where should the widget be placed, left sidebar or right sidebar",
"default": "left"
}
},
"oneOf": [
{
"$ref": "/widget/profile.json"
},
{
"$ref": "/widget/toc.json"
},
{
"$ref": "/widget/links.json"
},
{
"$ref": "/widget/categories.json"
},
{
"$ref": "/widget/recent_posts.json"
},
{
"$ref": "/widget/archives.json"
},
{
"$ref": "/widget/subscribe_email.json"
},
{
"$ref": "/widget/adsense.json"
},
+ {
+ "$ref": "/widget/WidgetTest.json"
+ }
],
"required": [
"position"
]
}
}

基础配置完成,最后在主题的_config.yml中新增以下内容:

1
2
3
4
5
widgets:
-
position: left
type: WidgetTest
contents: 这里是WidgetTest的内容。

添加顶置功能

icarus主题默认是没有顶置功能的,有需求的话得自己动手添加。

安装插件

首先先卸载已安装的索引插件

1
npm uninstall hexo-generator-index

安装有顶置功能的插件

1
npm install hexo-generator-index-pin-top

然后在文章的Front-matter中加上 top: true 即可实现顶置功能。

1
2
3
4
5
6
7
8
---
title: Icarus主题修改记录
categories:
- - Icarus主题
- - Hexo
date: 2020-08-22
top: true
---

操作到此,顶置功能是实现了,但是被顶置的文章却没有任何标记。

添加顶置标签

如果你想添加一个顶置标签来区别其他文章,你可以进行如下操作:
打开文件 /themes/icarus/layout/common/article.jsx ,在你想要显示顶置标签的位置插入如下代码:

1
{page.top ? <div style="background: #ff6b6b; padding: 5px">顶置</div> : null}

到目前为止,顶置功能和顶置标签均已实现。效果如下:

文章内容有误?立即反馈
2020 年 9 月 3 日巧用 LeanCloud 实现在线留言板功能
2020 年 8 月 27 日利用腾讯云 COS 存储 Hexo 静态文件
2020 年 3 月 9 日Hexo 网站部署到云服务器全流程