Icarus 主题双列显示和目录单独浮动等

admin 2022年1月6日01:08:49安全博客评论17 views6983字阅读23分16秒阅读模式

本文是基于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 &amp;&amp; <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}

其中时间直接使用日期

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>&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。

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>

优化移动端显示

在移动端,隐藏 archivetags

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

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年1月6日01:08:49
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  Icarus 主题双列显示和目录单独浮动等 http://cn-sec.com/archives/721138.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: