Icarus 主题自定义

本文是基于icarus 4.x的版本,icarus在2.0使用的是ejs,如果需要请查看旧版本

本博客所选取的主题是 Icarus ,并做了一些个性化的修改,很多修改都可以直观的看到。详细的差异可以查看 diff,这里记录一些主要的改动。

布局

文章页面两栏布局

主题默认是三栏布局,在阅读文章时显得有些拥挤。可以通过配置的方式把所有文章变为两栏布局,在_config.post.yml把需要的widget显示在一边即可,可以参考官方文档

但两栏整体宽度跟三栏不同,因此强制指定为三栏布局,并且修改相应的宽度,这样所有的页面侧边栏宽度保持一致。

diff:layout/layout.jsx
1
2
3
4
             <Head site={site} config={config} helper={helper} page={page} />
- <body class={`is-${columnCount}-column`}>
+ <body class={`is-3-column`}>
<Navbar config={config} helper={helper} page={page} />
diff:layout/layout.jsx
1
2
3
4
                                 'is-12': columnCount === 1,
- '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
diff:layout/common/widgets.jsx
1
2
3
4
5
6
7
8
 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';
}

并优化在不同屏幕小大下的宽度

diff:include/style/responsive.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 +widescreen()
+ .is-3-column .container
+ max-width: $widescreen - $gap
+ width: $widescreen - $gap
+
.is-1-column .container, .is-2-column .container
max-width: $desktop - 2 * $gap
width: $desktop - 2 * $gap

+fullhd()
+ .is-3-column .container
+ max-width: $fullhd - 2 * $gap
+ width: $fullhd - 2 * $gap
+
.is-2-column .container
max-width: $widescreen - 2 * $gap
width: $widescreen - 2 * $gap

优化文章标题布局

标题移动到文章信息上方,增加更新时间,并增加了icon

diff:layout/common/article.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
30
31
                 {/* Metadata */}
<article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
+ {/* Title */}
+ <h1 className="title is-size-3 is-size-4-mobile has-text-weight-normal">
+ {index ?
+ <a className="has-link-black-ter" href={url_for(page.link || page.path)}>
+ <i className="fas fa-angle-double-right"></i>{page.title}
+ </a> :
+ [<i className="fas fa-angle-double-right"></i>, page.title]
+ }
+ </h1>
{page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
<div class="level-left">
{/* Creation Date */}
- {page.date && <span class="level-item" dangerouslySetInnerHTML={{
- __html: _p('article.created_at', `<time dateTime="${date_xml(page.date)}" title="${date_xml(page.date)}">${date(page.date)}</time>`)
- }}></span>}
+ {page.date && <span class="level-item">
+ <i className="far fa-calendar-alt">&nbsp;</i>
+ <time dateTime="${date_xml(page.date)}" title="${date_xml(page.date)}">{date(page.date)}</time>
+ </span>}
{/* Last Update Date */}
- {page.updated && <span class="level-item" dangerouslySetInnerHTML={{
- __html: _p('article.updated_at', `<time dateTime="${date_xml(page.updated)}" title="${date_xml(page.updated)}">${date(page.updated)}</time>`)
- }}></span>}
+ {page.updated && <span class="level-item is-hidden-mobile">
+ <i class="far fa-calendar-check">&nbsp;</i>
+ <time dateTime="${date_xml(page.updated)}" title="${date_xml(page.updated)}">{date(page.updated)}</time>
+ </span>}
{/* author */}
{page.author ? <span class="level-item"> {page.author} </span> : null}

其中时间直接使用日期

diff:source/js/main.js
1
2
3
4
5
-    if (typeof moment === 'function') {
- $('.article-meta time').each(function() {
- $(this).text(moment($(this).attr('datetime')).fromNow());
- });
- }

优化文章结尾布局

在文章结尾增加一个 hr,并修改 tags 展示。在预览时(主页)也显示 tags,并且将 Read More 按钮放置在右边。

diff:layout/common/article.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
                     {/* Licensing block */}
{!index && article && article.licenses && Object.keys(article.licenses)
? <ArticleLicensing.Cacheable page={page} config={config} helper={helper} /> : null}
+ <hr style="height:1px;margin:1rem 0"/>
+ <div className="level is-mobile is-flex">
{/* Tags */}
- {!index && page.tags && page.tags.length ? <div class="article-tags is-size-7 mb-4">
- <span class="mr-2">#</span>
- {page.tags.map(tag => {
- return <a class="link-muted mr-2" rel="tag" href={url_for(tag.path)}>{tag.name}</a>;
+ {page.tags && page.tags.length ? <div class="article-tags is-size-7 is-uppercase">
+ <i class="fas fa-tags has-text-grey"></i>&nbsp;
+ {page.tags.map((tag, index) => {
+ return <a class="link-muted" rel="tag" href={url_for(tag.path)}>{tag.name}{index !== page.tags.length-1? ', ':''}</a>;
})}
</div> : null}
{/* "Read more" button */}
- {index && page.excerpt ? <a class="article-more button is-small is-size-7" href={`${url_for(page.link || page.path)}#more`}>{__('article.more')}</a> : null}
+ {index && page.excerpt ? <a class="article-more button is-small is-size-7" href={`${url_for(page.link || page.path)}#more`}><i class="fas fa-book-reader has-text-grey"></i>&nbsp;&nbsp;{__('article.more')}</a> : null}
+ </div>
{/* Share button */}

优化个人信息布局

减少头像大小,头像下方计数的地方增加链接,follow前增加icon。

diff:layout/widget/profile.jsx
1
2
3
4
5
6
7
8
9
10
11
12
-                    <div class="level-item has-text-centered is-marginless">
+ <a class="level-item has-text-centered is-marginless" href={counter.category.url}>
<div>
<p class="heading">{counter.category.title}</p>
- <a href={counter.category.url}>
+ <div>
<p class="title">{counter.category.count}</p>
- </a>
+ </div>
</div>
- </div>
+ </a>

优化移动端显示

在移动端,隐藏 archivetags

diff:source/js/main.js
1
2
3
4
5
     }
+
+ $('div.container div.card[data-type=tags]').addClass('is-hidden-mobile');
+ $('div.container div.card[data-type=archives]').addClass('is-hidden-mobile');
}(jQuery, window.moment, window.ClipboardJS, window.IcarusThemeSettings));

目录粘性定位

原来只支持侧边栏整体粘性定位,为了阅读体验,只针对目录开启粘性定位,增加 column-left is-sticky 类,并调整样式。

diff:source/js/main.js
1
2
3
     if ($toc.length > 0) {
+ $toc.addClass('column-left is-sticky');
const $mask = $('<div>');
diff:include/style/widget.styl
1
2
3
+#toc
+ max-height: calc(100vh - 22px)
+ overflow-y: scroll

功能

增加默认缩略图

增加许可协议

新版已经支持许可协议,直接配置即可,参考官方文档

增加标题自动计数

diff:include/style/article.styl
1
2
3
4
5
6
7
+.article {counter-reset:section}
+.article h2{counter-reset:sub-section}
+.article h3{counter-reset:composite}
+.article h4{counter-reset:detail}
+.article h2:before{content:counter(section) " ";counter-increment:section}
+.article h3:before{content:counter(section) "." counter(sub-section) " ";counter-increment:sub-section}
+.article h4:before{content:counter(section) "." counter(sub-section) "." counter(composite) " ";counter-increment:composite}

默认显示目录

新版支持直接配置,在_config.yml增加toc: true即可。

页面footer显示一组icon

默认情况下一个icon对应一个链接,但例如 CC BY-NC-SA 4.0 需要四个图标一组。因此修改代码,使得配置 link.icon 可以是一个数组,效果可以参考页面底部。

diff:layout/common/footer.jsx
1
2
3
4
5
6
7
8
9
10
11
12
                                 const link = links[name];
return <p class="control">
<a class={`button is-transparent ${link.icon ? 'is-large' : ''}`} target="_blank" rel="noopener" title={name} href={link.url}>
- {link.icon ? <i class={link.icon}></i> : name}
+ {link.icon ?
+ (Array.isArray(link.icon) ?
+ link.icon.map(i => [<i className={i}></i>, '\u00A0']) :
+ <i className={link.icon}></i>
+ ) : name}
</a>
</p>;
})}

忽略校验的schema

diff:include/schema/common/footer.json
1
-            "$ref": "/misc/poly_links.json",

_config.yml 中配置如下

_config.yml
1
2
3
4
5
6
7
8
9
footer:
links:
CC BY-NC-SA 4.0:
icon:
- fab fa-creative-commons
- fab fa-creative-commons-by
- fab fa-creative-commons-nc
- fab fa-creative-commons-sa
url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/'

样式

修改 logo 和 favicon

用 Python 设计 Logo,并微调样式。

按钮背景颜色增加渐变

diff:include/style/widget.styl
1
2
3
4
5
6
7
8
9
 .widget
.menu-list
li
ul
margin-right: 0
+ a
+ transition: background-color 0.3s ease-in-out
.level
margin-bottom: 0

card 增加浮动效果

:hover 时增大阴影,并增加动画属性 ease-in-out

diff:include/style/card.styl
1
2
3
4
5
 .card
overflow: visible
border-radius: $card-radius
+ &:hover
+ box-shadow: 0 6px 15px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.1)
diff:source/js/animation.js
1
2
3
4
5
6
     setTimeout(() => {
$('body > .navbar, body > .section, body > .footer').forEach(element => {
element.style.opacity = '1';
- element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
+ element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-in-out';
});
diff:source/js/animation.js
1
2
3
4
                     element.style.transform = '';
- element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
+ element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out, box-shadow 0.3s ease-in-out';
}, i * 100);

修改tag的颜色

diff:include/style/widget.styl
1
2
3
4
5
6
7
8
9
10
11
     .tags
.tag:first-child
- background: $primary
- color: $primary-invert
+ background: whitesmoke
+ color: #4a4a4a

.tag:last-child
- background: $light-grey
+ background: #e7e7e7
color: $white-invert

更新

2020-12-04 基于 4.1.1 版本重新改动。

总结

这里只列举了部分改动,详细的差异可以查看 diff

本文会持续更新,保持跟最新的博客效果一致,希望能给你自定义主题一些帮助。

如果有其他想法或者意见,可以在下方留言。

😊

Author

Xinyu Liu

Posted on

2020-12-04

Updated on

2020-12-04


Comments