前段时间用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`}>
layout/layout.jsx 1 2 3 4 5 6 - 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2, + 'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
layout/common/widgets.jsx 1 2 3 4 5 6 7 8 9 10 - return 'is-4-tablet is-4-desktop is-4-widescreen'; + 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-3-column .container + max-width: $fullhd - 2 * $gap + width: $fullhd - 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 + {/* 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.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>} - {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>}
其中时间直接使用日期
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');
功能 添加定制的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 - {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}
忽略校验的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
样式 按钮的背景颜色增加渐变效果 include/style/widget.styl 1 2 3 4 5 6 7 8 9 10 + a + transition: background-color 0.3s ease-in-out
卡片增加浮动效果 :hover 时增大阴影，并增加动画属性 ease-in-out。
include/style/card.styl 1 2 3 4 5 6 7 + &: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 - 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.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';
更新 此文章未完成，等待更新。
