0%

Update Hexo Blog Layout for Theme Icarus

In this post I am following instruction kindly provided by xiefayang to create a two-cloumn layout for post pages for Hexo theme icarus, so that post pages are clean and tidy, and easier to focus.

update layout.js

themes/hexo-theme-icarus/includes/helpers/layout.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
...
//return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
if (this.page.layout !== 'post') {
return widgets.filter(widget => widget.hasOwnProperty('position') && widget.position === position);
}
if (position === 'left') {
//here you can choose your own widgets showing on the left of post pages
return widgets.filter(widget => widget.hasOwnProperty('position') && (widget.type === 'toc' || widget.type === 'category'));
} else {
return []
}
...
...

update widget.ejs

themes/hexo-theme-icarus/layout/common/widget.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
<% if (get_widgets(position).length) { %>
<% function side_column_class() {
switch (column_count()) {
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';
}
return '';
} %>
...
...

update layout.ejs

themes/hexo-theme-icarus/layout/layout.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
...
<% function main_column_class() {
switch (column_count()) {
case 1:
return 'is-12';
case 2:
//return 'is-8-tablet is-8-desktop is-8-widescreen';
return 'is-8-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
return '';
} %>
...
...

update style.styl

themes/hexo-theme-icarus/source/css/style.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
...
@media screen and (min-width: screen-widescreen)
.is-1-column .container
.is-2-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
.is-3-column .container
max-width: screen-widescreen - gap
width: screen-widescreen - gap
@media screen and (min-width: screen-fullhd)
.is-3-column .container
max-width: screen-fullhd - 2 * gap
width: screen-fullhd - 2 * gap
.is-2-column .container
max-width: screen-widescreen - 2 * gap
width: screen-widescreen - 2 * gap
.is-1-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
...
...

P.S.

It is worth mentioning that, to use video-container class for YouTube vedios, which has been included in theme icarus (it allows the videos auto-resize in a responsive site layout), simply put <div class="video-container"></div> pair outside the original HTML codes.
themes/hexo-theme-icarus/source/css/style.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
...
/* ---------------------------------
* Fix Video
* --------------------------------- */
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
...
...