在Hexo博客搭建之Icarus主题--基础操作篇 中，介绍了使用Hexo搭配Icarus主题来搭建博客的基础操作。
布局个性化 文章页三栏布局改两栏布局 在默认主题配置下，文章页是三栏布局，中间文章栏显得有些窄。于是，聪明的你们肯定会把所有边栏组件配置到同一侧，但是你会发现，首页也变成了两栏。
themes\icarus\includes\helpers\layout.js 1 2 3 4 5 6 7 8 9 10 hexo.extend.helper.register('column_count', function () { let columns = 1; + if (this.page.__post === true || this.page.__page === true) { + return 2; + } const hasColumn = hexo.extend.helper.get('has_column').bind(this); columns += hasColumn('left') ? 1 : 0; columns += hasColumn('right') ? 1 : 0; return columns; });
themes\icarus\layout\common\widget.ejs 1 2 3 4 5 6 7 8 <% if (position - <div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>"> + <div class="column-right-shadow <%= (page.__page !== true && page.__post !== true) ? 'is-hidden-widescreen' : '' %> <%= sticky_class('right') %>"> <% get_widgets('right').forEach(widget => {%> <%- _partial('widget/' + widget.type, { widget }) %> <% }) %> </div> <% } %>
themes\icarus\layout\layout.ejs 1 2 3 4 5 6 7 8 9 10 11 <section class="section"> <div class="container"> <div class="columns"> <div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div> <%- _partial('common/widget', { position: 'left' }) %> + <% if (page.__page !== true && page.__post !== true) { %> <%- _partial('common/widget', { position: 'right' }) %> + <% } %> </div> </div> </section>
文章栏加宽 在完成以上操作后，首页依旧三栏布局，在文章页则是两栏布局。
themes\icarus\layout\layout.ejs 1 2 3 4 5 6 7 8 9 10 11 12 <% function main_column_class() { switch (column_count()) { case 1: return 'is-12'; case 2: - return 'is-8-tablet is-8-desktop is-8-widescreen'; + return 'is-8-tablet is-9-desktop is-9-widescreen'; case 3: return 'is-8-tablet is-8-desktop is-6-widescreen' } return ''; } %>
themes\icarus\layout\common\widget.ejs 1 2 3 4 5 6 7 8 9 10 11 <% if (get_widgets(position).length) { %> <% function side_column_class() { switch (column_count()) { case 2: - return 'is-4-tablet is-4-desktop is-4-widescreen'; + return 'is-4-tablet is-3-desktop is-3-widescreen'; case 3: return 'is-4-tablet is-4-desktop is-3-widescreen'; } return ''; } %>
themes\icarus\source\css\style.styl 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 body, button, input, select, textarea font-family: family-sans -@media screen and (min-width: screen-widescreen) - .is-1-column .container - .is-2-column .container - max-width: screen-desktop - 2 * gap - width: screen-desktop - 2 * gap -@media screen and (min-width: screen-fullhd) - .is-2-column .container - max-width: screen-widescreen - 2 * gap - width: screen-widescreen - 2 * gap - .is-1-column .container - max-width: screen-desktop - 2 * gap - width: screen-desktop - 2 * gap @media screen and (max-width: screen-tablet - 1) .section padding: 1.5rem 1rem
文章图片居中 Icarus主题使用的是hexo默认的hexo-renderer-marked，在文章内引入图片时，图片是靠左的样式显示。所以，我们还需要修改下图片样式，使其居中显示。
themes\icarus\source\css\style.styl 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .article .article-meta margin-bottom: 0.5rem !important .content font-size: 1.1rem blockquote.pullquote float: right max-width: 50% font-size: 1.15rem position: relative a word-wrap: break-word + img + margin: auto + display: block
文章版权信息 themes\icarus\_config.yml 1 2 3 + # 版权信息 + copyright: + enable: true # true：开启版权信息；false：关闭版权信息
themes\icarus\layout\common\article.ejs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div class="content"> <%- index && post.excerpt ? post.excerpt : post.content %> </div> + <% if (!index && post.layout === 'post' && post.copyright !== false && theme.copyright.enable) { %> + <ul class="post-copyright"> + <li><strong>本文标题：</strong><a href="<%= post.permalink %>"><%= page.title %></a></li> + <li><strong>本文作者：</strong><a href="<%= theme.url %>"><%= theme.author %></a></li> + <li><strong>本文链接：</strong><a href="<%= post.permalink %>"><%= post.permalink %></a></li> + <li><strong>发布时间：</strong><%= post.date.format("YYYY-MM-DD") %></li> + <li><strong>版权声明：</strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！ + </li> + </ul> + <% } %> <% if (!index && post.tags && post.tags.length) { %> + <hr style="height:1px;margin:1rem 0"/> <div class="level is-size-7 is-uppercase"> <div class="level-start"> <div class="level-item"> <span class="is-size-6 has-text-grey has-mr-7">#</span> <%- list_tags(post.tags, {
themes\icarus\source\css\style.styl 1 2 3 4 5 6 7 8 9 10 11 +/* --------------------------------- + * 版权信息 + * --------------------------------- */ +.post-copyright + font-size: 1rem + letter-spacing: 0.02rem + word-break: break-all + margin: 2.5rem 0 0 + padding: 1rem 1rem + border-left: 3px solid #FF1700 + background-color: #F9F9F9
浮动显示公众号二维码 在个人简介插件上的社交图标都是链接点击形式的，想加上公众号的话这样的形式不太合适，因此改造成移动至图标浮动显示二维码。
themes\icarus\layout\widget\profile.ejs 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 34 <% const socialLinks = get_config_from_obj(widget, 'social_links'); %> <% if (socialLinks !== null) { %> <div class="level is-mobile"> <% for (let name in socialLinks) { let link = socialLinks[name]; %> - <a class="level-item button is-white is-marginless" target="_blank" - title="<%= name %>" href="<%= url_for(typeof(link) === 'string' ? link : link.url) %>"> - <% if (typeof(link) === 'string') { %> - <%= name %> - <% } else { %> - <i class="<%= link.icon %>"></i> - <% } %> - </a> + <% if (typeof(link) !== 'string' && link.qrcode) { %> + <a class="level-item button is-white donate is-marginless" + title="<%= name %>" href="javascript:void(0)"> + <i class="<%= link.icon %>"></i> + <div class="qrcode"><img src="<%= url_for(link.qrcode) %>" alt="<%= name %>"></div> + </a> + <% } else { %> + <a class="level-item button is-white is-marginless" target="_blank" + title="<%= name %>" href="<%= url_for(typeof(link) === 'string' ? link : link.url) %>"> + <% if (typeof(link) === 'string') { %> + <%= name %> + <% } else { %> + <i class="<%= link.icon %>"></i> + <% } %> + </a> + <% } %> <% } %> </div> <% } %> </div> </div>
themes\icarus\_config.yml 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 widgets: - # Widget name type: profile # Where should the widget be placed, left or right position: left # Author name to be shown in the profile widget author: G-lab # Title of the author to be shown in the profile widget author_title: # Author's current location to be shown in the profile widget location: # Path or URL to the avatar to be shown in the profile widget avatar: /images/avatar.jpg # Email address for the Gravatar to be shown in the profile widget gravatar: # Whether to show avatar image rounded or square avatar_rounded: true # Path or URL for the follow button follow_link: 'https://my.oschina.net/u/2404065' # Links to be shown on the bottom of the profile widget social_links: + wexin: + icon: fab fa-weixin + qrcode: '/images/qrcode_weixin.jpg' # 把微信二维码图片放到source\images下 + url: ''
站点访问总量显示 Icarus主题在使用不蒜子统计插件时，默认只显示访问总量，不显示访客数量。所以我们改造下，让页面也能显示访客数量。
1 2 3 4 plugin: backtotop: '回到顶端' visit: '%s次访问' visitor: '共%s个访客'
所以我们改造如下代码
themes\icarus\layout\common\footer.ejs 1 2 3 4 5 6 7 8 9 10 11 12 13 © <%= date(new Date(), 'YYYY') %> <%= author || title %> Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & <a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank">Icarus</a> <% if (busuanzi) { %> <br> + <span id="busuanzi_container_site_pv"> + <%- _p('plugin.visit', '<span id="busuanzi_value_site_pv">0</span>') %> + </span> <span id="busuanzi_container_site_uv"> <%- _p('plugin.visitor', '<span id="busuanzi_value_site_uv">0</span>') %> </span> <% } %> </p>
以上就是对Icarus 主题进行的个性化修改。
参考
