常见的一些配置见_config.icarus.yml，英文不差都能看懂，或者去看icarus文档。本文主要就是一些网上很少的配置。
Icarus: 4.0.0
文章页面两栏布局
在_config.icarus.yml目录下，创建_config.post.yml文件，该文件内容与_config.icarus.yml文件一样，用于单独加载post界面布局。注意，双栏需要将widgets内容的position都设置为同一边。
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
|
widgets:
-
position: left
type: profile
author: zhaommmmomo
author_title: fahaxiki!
location: Yantai,China
avatar: /img/logo.jpg
avatar_rounded: false
follow_link: 'https://zhaommmmomo.cn'
social_links:
Github:
icon: fab fa-github
url: 'https://github.com/zhaommmmomo'
-
position: left
type: toc
index: true
sidebar:
left:
sticky: false
right:
sticky: false
|
增加两栏布局下文章的宽度
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
| # layout/layout.jsx
module.exports = class extends Component {
render() {
......
<Head site={site} config={config} helper={helper} page={page} />
# <body class={`is-${columnCount}-column`}> 修改为下面一行
<body class={`is-3-column`}>
......
# 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2
# 修改为下面一行
'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
})} dangerouslySetInnerHTML={{ __html: body }}></div>
......
}
};
# layout/common/widgets.jsx
function getColumnSizeClass(columnCount) {
switch (columnCount) {
case 2:
# return 'is-4-tablet is-4-desktop is-4-widescreen'; # 修改为下面一行
return 'is-4-tablet is-4-desktop is-3-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
| # include/style/responsive.styl
+widescreen()
# 增加
.is-3-column .container
max-width: $widescreen - $gap
width: $widescreen - $gap
+fullhd()
# 增加
.is-3-column .container
max-width: $fullhd - 2 * $gap
width: $fullhd - 2 * $gap
|
开启文章目录
- 在
_config.yml中添加toc: true
- 在
_config.icarus.yml或者_config.post.yml中添加
1
2
3
4
5
6
7
| widgets:
-
position: left
type: toc
index: true
|
只固定目录
1
2
3
4
5
6
| # source/js/main.js
const $toc = $('#toc');
if ($toc.length > 0) {
$toc.addClass('column-left is-sticky'); # 添加
......
}
|
1
2
3
4
| # include/style/widget.styl 添加下面
#toc
max-height: calc(100vh - 22px)
overflow-y: scroll
|