Icarus 主题自定义

2020-12-042023-01-11 hexo / icarus 11 minutes read (About 1649 words) 0 visits

本文是基于icarus 5.x的版本（4.x的版本差别不大），icarus在2.0使用的是ejs，如果需要请查看旧版本。

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

布局

文章页面两栏布局

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

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

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} />

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

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';
     }

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

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

diff:layout/common/article.jsx

                 <article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
                     {/* Metadata */}
+                    {/* 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="${new Date(page.date).toLocaleString()}">${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 */}
-                            {shouldShowUpdated && <span class="level-item" dangerouslySetInnerHTML={{
-                                __html: _p('article.updated_at', `<time dateTime="${date_xml(page.updated)}" title="${new Date(page.updated).toLocaleString()}">${date(page.updated)}</time>`)
-                            }}></span>}
+                            {shouldShowUpdated && <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

-    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

                     {/* 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? ',\u00A0':''}</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

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

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 类，并调整样式。

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:layout/layout.jsx

         const { site, config, page, helper, body } = this.props;

+        site.posts && site.posts.filter(p => !p.thumbnail).forEach(p => p.thumbnail = '/img/thumbnail.svg');
+
         const language = page.lang || page.language || config.language;

diff:layout/archive.jsx

         const { url_for, __, date_xml, date } = helper;

+        page.posts && page.posts.filter(p => !p.thumbnail).forEach(p => p.thumbnail = '/img/thumbnail.svg');
+
         const language = page.lang || page.language || config.language;

增加许可协议

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

增加标题自动计数

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即可。

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

diff:layout/common/footer.jsx

                                 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

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

 .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

 .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

     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

                     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

     .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 版本重新改动。
2021-09-06 合并 4.4.0，官方也支持文章 licenses配置多个图标，不过目前还是自己实现的。
2023-01-11 合并 5.1.1。

总结

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

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

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

Icarus 主题自定义

https://www.alphalxy.com/2019/03/customize-icarus/

Author

Xinyu Liu

Posted on

2020-12-04

Updated on

2023-01-11

Licensed under

CC BY-NC-SA 4.0

hexo, icarus

Icarus 主题自定义

布局

文章页面两栏布局

优化文章标题布局

优化文章结尾布局

优化个人信息布局

优化移动端显示

目录粘性定位

功能

增加默认缩略图

增加许可协议

增加标题自动计数

默认显示目录

页面footer显示一组icon

样式

修改 logo 和 favicon

按钮背景颜色增加渐变

card 增加浮动效果

修改tag的颜色

更新

总结

Author

Posted on

Updated on

Licensed under

Comments

Catalogue