前段时间用hexo搭建了自己的博客网站，放在了github 里，也就是网上常说的hexo + githu page 搭建的静态博客网站，然后去主题里面挑了icarus ,在这里感谢主题作者的创作，由于自己对默认的布局那些不满意，于是就参考网友们的教程，自己动手改了主题
布局 文章的两栏布局 主题默认是三栏布局，阅读文章的时候空间看起来太挤，这样的话可以通过去改配置文件的方式，把文章变为两栏布局，详细参考官方文档 .
两栏主题宽度跟三栏不同，所以要强制指定为三栏布局，并且修改相应的宽度，这样所有的页面侧边栏的宽度就会保持一致。
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} />
layout/layout.jsx 1 2 3 4 5 6 'is-12': columnCount - '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
layout/common/widgets.jsx 1 2 3 4 5 6 7 8 9 10 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'; }
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
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 32 33 {/* 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} //这里是去掉文章标题的指向右边的svg + <h1>{page.title}</h1> + </a> : + [<i></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}
layout/common/article.jsx 1 2 3 4 5 {/* 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"> //这里解决首页文章底部展示的标签和阅读更多模块的溢出
其中时间直接使用日期
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()); - }); - }
优化移动端的显示 在移动端隐藏archive和tags。
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));
功能 添加定制的PV、UV访问数据 icarus主题在启用busuanzi插件之后，只会显示网站的UV数据，没有显示PV，自己添加一个
node_modules\hexo-theme-icarus\layout\common\footer.jsx 1 2 3 -visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>')) +visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>') + _p('plugin.visit_count', ', <span id="busuanzi_value_site_pv">0</span>')
增加标题自动计数 自己用的感觉不方便，后来舍弃了，以下代码是正确的
include/style/article.styl 1 2 3 4 5 6 7 8 9 +.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}
默认情况下一个icon对应一个链接，但例如 CC BY-NC-SA 4.0 需要四个图标一组。因此修改代码，使得配置 link.icon 可以是一个数组，效果可以参考页面底部。
layout/common/footer.jsx 1 2 3 4 5 6 7 8 9 10 11 12 13 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
include/schema/common/footer.json 1 2 - "$ref": "/misc/poly_links.json",
再_config.icarus.yml的配置文件如下：
1 2 3 4 5 6 7 8 9 10 11 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/'
样式 按钮的背景颜色增加渐变效果 include/style/widget.styl 1 2 3 4 5 6 7 8 9 10 .widget .menu-list li ul margin-right: 0 + a + transition: background-color 0.3s ease-in-out .level margin-bottom: 0
卡片增加浮动效果 :hover 时增大阴影，并增加动画属性 ease-in-out。
include/style/card.styl 1 2 3 4 5 6 7 .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)
source/js/animation.js 1 2 3 4 5 6 7 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'; });
source/js/animation.js 1 2 3 4 5 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);
更新 此文章未完成，等待更新。
