Hexo博客搭建之Icarus主题--个性化修改篇

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 === 'left') { %>
- <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

[email protected] 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
[email protected] 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主题在使用不蒜子统计插件时,默认只显示访问总量,不显示访客数量。所以我们改造下,让页面也能显示访客数量。
通过多语言文件,我们发现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
                 &copy; <%= date(new Date(), 'YYYY') %> <%= author || title %>&nbsp;
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主题进行的个性化修改。
下一篇,我们将对博客进行一些打包和部署的修改,敬请期待!


参考


评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×