Hexo-theme-butterfly修改调整记录教程

首先感谢Butterfly作者jerryc,提供了一个非常优秀的博客主题

前言

在阅读本文之前,确保您已经了解并使用过hexo-theme-butterfly主题。

如果你还没有使用过,那推荐你一款美观大气的hexo主题:hexo-theme-butterfly

其实在主题的使用过程中也是新语言的学习过程。

首页背景图片屏占比

1.在主题配置文件themes/Butterfly/_config.yml最后边添加如下配置

1
2
3
# 首页背景图片屏占比,1:100%,2:50%,1.5:75%
homepage:
ratio: 2

2.修改themes/Butterfly/layout/includes/additional-js.pug该文件内代码

1
2
3
4
5
....省略....
function alignContent() {
for (var n = $(window).height()/!{theme.homepage.ratio}, e = document.querySelectorAll(".full_page"), i = 0; i < e.length; i++)
....省略....
}

此处将homepage.ratio属性设置为2。首页效果如下:

首页背景图片屏占比

首页设置多个子标题

1.修改主题配置文件themes/Butterfly/_config.ymlsubtitle属性,例如修改前为:

1
2
3
4
subtitle:
enable: true
sub1: 所有的不平凡都来自平凡!
sub2: All the extraordinary from ordinary!

修改后:

1
2
3
4
5
6
subtitle:
enable: true
sub:
- 所有的不平凡都来自平凡
- 分享Java技术记录点滴生活...
- 今天最好的表现是明天最低的要求

2.修改themes/Butterfly/layout/includes/additional-js.pug该文件内代码

1
2
3
4
5
6
7
8
script.
var typed = new Typed(".subtitle", {
strings: '!{theme.subtitle.sub}'.split(','),//修改这里
startDelay: 300,
typeSpeed: 100,
loop: true,
backSpeed: 50
});

将之前的单个读取,改为直接读取数组再拆分
这里有一个瑕疵,它使用逗号split(",")进行拆分,所以当sub中有逗号的话,用转义符代替

ICP备案国徽图标显示

1.修改主题配置文件themes/Butterfly/_config.ymlICP属性,为其添加国徽图标的路径pic

1
2
3
4
5
ICP:
enable: ture
pic: /img/beian.png #备案国徽小图路径
url: http://www.beian.gov.cn
text: 浙ICP备12345678号

2.修改themes/Butterfly/layout/includes/footer.pug该文件内代码

1
2
3
4
5
if theme.ICP.enable
.icp
a(href=theme.ICP.url target="_blank")
img.lozad(data-src=`${theme.ICP.pic}` onerror=`onerror=null;src='${theme.ICP.pic}'` style="padding:0px;vertical-align: text-bottom;")
span=theme.ICP.text

修改后效果如下

添加友情链接侧边栏

1.修改主题配置文件themes/Butterfly/_config.ymlaside属性,添加侧边栏友链属性

1
2
3
4
5
6
7
8
9
10
11
12
aside:
card_author: true
card_announcement: true
card_recent_post: true
card_categories: true
card_tags: true
card_archives: true
card_webinfo: true
card_links:
enable: true # 是否开启友链侧边栏显示
num: 6 # 显示个数
flink: http://www.larscheng.com/friends/ # 友链页面地址

1.在目录themes/Butterfly/layout/includes/widget下新建文件card_links.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.card_widget.card-links
.card-content
.item_headline
i.fa.fa-handshake-o(aria-hidden="true")
span= _p('aside.card_links')
each i in site.data.link
if(i.class_name === "友情链接")
ul.aside_category_item
each item,index in i.link_list
if(index <= theme.aside.card_links.num)
li.aside_category_list
a(href=item.link title=item.name+" : "+item.descr target="_blank")
img.lozad(data-src=item.avatar alt=item.name onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="35px")
item=item.name
li.aside_category_list.find_more
a(href=theme.aside.card_links.flink target="_blank") 查看更多

其中_p('aside.card_links')是根据语言环境获取侧边栏标题:友情链接。可以到themes/Butterfly/languages下进行添加

需要注意的一点是if(i.class_name === "友情链接")这个判断这里是用来判断需要显示的数据

Butterfly 的友情链接模板中存在多个class,通常我们只需要显示友情链接这一部分而已,所以会有这一判断
此处应该有更优雅的处理方式,但是限于水平有限,先暂且这样实现

link.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
27
class:
class_name: 友情鏈接
link_list:
1:
name: xxx
link: https://blog.xxx.com
avatar: https://cdn.xxxxx.top/avatar.png
descr: xxxxxxx
2:
name: xxxxxx
link: https://www.xxxxxxcn/
avatar: https://xxxxx/avatar.png
descr: xxxxxxx

class2:
class_name: 鏈接無效
link_list:
1:
name: 夢xxx
link: https://blog.xxx.com
avatar: https://xxxx/avatar.png
descr: xxxx
2:
name: xx
link: https://www.axxxx.cn/
avatar: https://x
descr: xx

3.修改themes/Butterfly/layout/includes/aside.pug文件,添加如下代码

1
2
if theme.aside.card_links.enable
include widget/card_links.pug

需要注意改代码片段添加的先后位置,决定了它在页面上被渲染的顺序

修改完毕后,显示的基本效果如下:

友链侧边栏

其他小改动

这部分的修改适合强迫症晚期患者…

文章列表图片文字比例调整

这个属于css样式的调整,你可以直接在浏览器调整为你想要的样式属性后

themes/Butterfly/source/css/_layout/z-other.styl内进行修改

  • 文章列表的图片样式:#recent-posts .post_cover
  • 文章列表的内容预览样式:.recent-post-info

大小、比列都由你定。

归档侧边栏查看更多按钮

查看themes/Butterfly/layout/includes/widget/card_archives.pug发现它直接调用了list_archives方法

emmmmmm,能力有限我又去暴力改代码了…找到/node_modules/hexo/lib/plugins/helper/list_archives.js
修改if (style === 'list') {·······}内的内容

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


if (style === 'list') {
result += `<ul class="${className}-list">`;

for (i = 0, len = data.length; i < 6; i++) {
item = data[i];

result += `<li class="${className}-list-item">`;

result += `<a class="${className}-list-link" href="${link(item)}">`;
result += transform ? transform(item.name) : item.name;
result += '</a>';

if (showCount) {
result += `<span class="${className}-list-count">${item.count}</span>`;
}

result += '</li>';
}

result += `<li class="${className}-list-item">`;
result += `<a style="text-align: center;font-size: 13px" class="${className}-list-link" href="${link()}">`;
result += '查看更多';
result += '</a>';
result += '</li>';
result += '</ul>';

然后你看到的效果大概是这样的:

归档

最后

以上就是我在hexo-theme-butterfly的使用过程中,个人修改的一些记录,如果你也钟意这些修改,不妨试试吧😁

GL&HF…😜

---------- 😏本文结束  感谢您的阅读😏 ----------
评论