本文是基于icarus 4.x的版本
本博客所选取的主题是 Icarus ，并做了一些个性化的修改，很多修改都可以直观的看到。详细的差异可以查看 diff，这里记录一些主要的改动。
布局
文章页面两栏布局
主题默认是三栏布局，在阅读文章时显得有些拥挤。可以通过配置的方式把所有文章变为两栏布局，在_config.post.yml把需要的widget显示在一边即可，可以参考官方文档。
但两栏整体宽度跟三栏不同，因此强制指定为三栏布局，并且修改相应的宽度，这样所有的页面侧边栏宽度保持一致。
1
2
3
4
5
6
|
diff:layout/layout.jsx
<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} />
|
1
2
3
4
5
6
|
diff:layout/layout.jsx
'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
|
1
2
3
4
5
6
7
8
9
10
|
diff: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
13
14
15
16
17
18
19
|
diff:include/style/responsive.styl
+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
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
|
diff:layout/common/article.jsx
{/* 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"> </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"> </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}
|
其中时间直接使用日期
1
2
3
4
5
6
7
|
diff:source/js/main.js
- if (typeof moment === 'function') {
- $('.article-meta time').each(function() {
- $(this).text(moment($(this).attr('datetime')).fromNow());
- });
- }
|
优化文章结尾布局
在文章结尾增加一个 hr，并修改 tags 展示。在预览时（主页）也显示 tags，并且将 Read More 按钮放置在右边。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
diff:layout/common/article.jsx
{/* 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>
+ {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> {__('article.more')}</a> : null}
+ </div>
{/* Share button */}
|
优化个人信息布局
减少头像大小，头像下方计数的地方增加链接，follow前增加icon。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
diff:layout/widget/profile.jsx
- <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>
|
优化移动端显示
在移动端，隐藏 archive 和 tags。
1
2
3
4
5
6
7
|
diff:source/js/main.js
}
+
+ $('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 类，并调整样式。
1
2
3
4
5
|
diff:source/js/main.js
if ($toc.length > 0) {
+ $toc.addClass('column-left is-sticky');
const $mask = $('<div>');
|
1
2
3
4
|
diff:include/style/article.styl
+#toc
+ max-height: calc(100vh - 22px)
+ overflow-y: scroll
|
功能
增加许可协议
新版已经支持许可协议，直接配置即可，参考官方文档。
增加标题自动计数
1
2
3
4
5
6
7
8
9
|
diff:include/style/article.styl
+.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即可。
样式
card 增加浮动效果
:hover 时增大阴影，并增加动画属性 ease-in-out。
1
2
3
4
5
6
7
|
diff:include/style/card.styl
.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)
|
1
2
3
4
5
6
7
8
|
diff:source/js/animation.js
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';
});
|
1
2
3
4
5
6
|
diff:source/js/animation.js
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);
|
更新
2020-12-04 基于 4.1.1 版本重新改动。
总结
这里只列举了部分改动，详细的差异可以查看 diff。
参考链接
https://www.alphalxy.com/2019/03/customize-icarus/
FROM :ol4three.com | Author:ol4three
评论