avatar

hexo-theme-butterfly主题美化小笔记

在正式讲博客的美化之前,我想先感谢@jerryc能够带来这么棒的主题~如果你同样想使用butterfly主题,你可以去查看安装文档

话不多说,让我们开始吧!

注:写这篇文章的时候我的主题版本是2.1.0


友链界面加入更多的自定义文字

关于友链界面,我加入了很多内容,如A Few Requirements和下面的PS就是我加入的。

更多的内容

之前闲着没事翻了一下主题的layout文件夹,里面的文件都已经命好名了,所以说一看我就知道哪个文件对应哪个部分,而我需要修改的就是flink.pug这个文件

原来它长这样:

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
.flink
each i in site.data.link
h1= i.class_name
.post-cards
ul.md-links
each item in i.link_list
li.md-links-item
a(href=item.link title=item.name target="_blank")
if theme.lazyload.enable
img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
else
img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
.md-links-title= item.name
.md-links-des= item.descr

hr
div
h2= theme.Flink.info_headline
ul
li= theme.Flink.name
li= theme.Flink.address
li= theme.Flink.avatar
li= theme.Flink.info

hr
.comment_int
p.comment-word= theme.Flink.comment

尽管我不是很懂pug这个东西,但是我还是能看懂代码的内容,其中hr就是一条分割线,所以说区块就用分割线来分开就好了。

最开始使用这个主题的时候(当时版本应该是1.2.0,还没有按钮分级),在做友链界面的时候,我这边就有人对我的数字提出了疑问,然后我就加入了下面那行PS:本文所有的数字表示方式来自Mili - world.execute(me);

flink.pug中加入:

1
p(style="font-size:9px;font-weight:bold")= theme.Flink.PS

然后在butterfly的配置文件中加入一行

1
PS: PS:本文所有的数字表示方式来自Mili - world.execute(me); # PS内容,在flink自加的

就可以在友链界面加入自定义的内容了

至于A Few Requirements区块在更新2.1.0后用同样的方式加入的

flink.pug加入:

1
2
3
4
5
6
7
8
9
10
hr
div
h2= theme.Flink.require_headline
ul
li= theme.Flink.requirement1
li= theme.Flink.requirement2
li= theme.Flink.requirement3
li= theme.Flink.requirement4
li= theme.Flink.requirement5
li= theme.Flink.requirement6

有多少的requirement就加入多少行,然后在配置文件butterfly.yml用同样的方式加入

1
2
3
4
5
6
7
require_headline: A Few Requirements
requirement1: GamerNoTitle表示不接受商业性网站、下载站、视频站等
requirement2: HTTP和HTTPS均可,不强制性要求小绿锁,但是只有一个IP或者带端口的不接受哦
requirement3: 网站要有维护,定期或不定期均可,线下朋友请忽略这一条
requirement4: 可以先在自己的网站加上我的友链,我处理的速度也会快一些呢~
requirement5: 大佬可以无视上面的要求,并加入“大佬之家”行列
requirement6: 如果你想联系我,在About页面中有我的相关联系方式

就可以了~

友链链接区块加入一行小字

效果就像图片里面的那样

小字效果图

其实这个也很简单,跟上面一样还是要动flink.pug文件,在最顶上那一块代码中加入一行,将所需的字典名字命名为class_descr,加入后的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.flink
each i in site.data.link
h1= i.class_name
h4= i.class_descr //- 给每个class加入class_descr参数
.post-cards
ul.md-links
each item in i.link_list
li.md-links-item
a(href=item.link title=item.name target="_blank")
if theme.lazyload.enable
img.lazyload(data-src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
else
img(src=item.avatar onerror=`this.onerror=null;this.src='` + url_for(theme.lodding_bg.flink) + `'` alt=item.name )
.md-links-title= item.name
.md-links-des= item.descr

然后在link.yml的每一个class中就可以加入descr了,这里以一个区块做例子

1
2
3
4
5
6
7
8
9
class2:
class_name: DOS 私人服务
class_descr: 我个人在使用的不同网络服务,在这里列出(^U^)ノ~YO # 这里填入描述
link_list:
1:
name: CloudFlare
link: https://www.cloudflare.com/
avatar: https://dash.cloudflare.com/favicon.ico
descr: 免费的域名托管平台

class_name下面加入一行参数叫class_descr并设定为想要的内容即可,当然你也可以加在link_list的下面,但是请注意缩进要跟class_namelink_list平齐

加入基于Gitalk的动态栏小部件

这个部件最开始是在@火喵的博客看到的,然后就发了邮件问了一下是怎么实现的

感谢@火喵提供的思路~!

然后我参照了Gitalk的文档,用一个非常简单的什么都没有的html文件来装我这个Gitalk,正因为只有Gitalk,所以整个html文档就很简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GamerNoTitle/Picture-repo-v1@gitalk-css/css/gitalk-dorcandy.css"> <!-- 导入自己修改过后的css文件,参照了火喵的 -->
<script src="https://cdn.jsdelivr.net/gh/GamerNoTitle/Picture-repo-v1@gitalk/js/gitalk.min.js"></script> <!-- 导入自己修改后的js文件,主要修改了显示的字 -->
</head>
<body>
<div id="gitalk-container"></div>
<script>
var gitalk = new Gitalk({
id: 'Dynamics',
clientID: 'xxxxxxxxxxxxxxxxxxxx',
clientSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
repo: 'GamerNoTitle.Github.io',
owner: 'GamerNoTitle',
admin: ['GamerNoTitle'],
title: 'Dynamics',
pagerDirection: 'last',
perPage: 5,
})
gitalk.render('gitalk-container')
</script>
</body>

其中,pagerDirection本来是排序的顺序,但是按照Gitalk的issue#210中官方所述,不登录的话排序顺序只能是从旧到新,所以我也没办法,我采取的操作是一个issue中只容纳5条动态,历史动态就放到另外的issue中

将这个html文件命名一下为gitalk.html,然后放在主题目录的source文件夹下,然后进入.\layout\includes\widget文件夹,将card_announcement.pug(公告卡片)复制一份作为模板并且重命名为card_dynamics.pug,然后打开修改里面的内容。原来里面的内容如下

1
2
3
4
5
6
.card-widget.card-announcement
.card-content
.item-headline
i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
span= _p('aside.card_announcement')
.announcement_content= theme.announcement.content

在这里面,span应该是显示的字(如图红框处)

但是我加入的字不在语言配置文件中有,所以直接修改成

1
span= 'Dynamics'

就可以了,接着是要修改图标,作为动态,一个小喇叭的图标显得不是很好看。所以我就访问了Fontawesome@v4.7.0,选择了现在的这个图标

将图标的信息修改为

1
i.fa.fa-quote-right(aria-hidden="true")

图标后面的那串动画就不要了,动画多了也不是很好看

最后需要引入Gitalk.html文件,在下面加入一行

1
include gitalk.html

这样当部署完后,网站就会自动引用根目录下的gitalk.html文件。当然你要是直接访问我的gitalk.html文件也是能打开的

接着我们需要在网站的渲染中加入这个小部件

打开此目录下的index.pug,然后将这个引入加在认为合适的地方,我直接加载了公告的下面

1
2
if theme.aside.card_dynamics
include ./card_dynamics.pug

最后到butterfly.yml文件中,加入小部件的开关

1
2
3
4
5
6
7
8
9
10
aside:
position: right # left or right
card_author: true
card_announcement: true
card_recent_post: true
card_categories: true
card_tags: false
card_archives: true
card_webinfo: true
card_dynamics: true # 动态开关

部署自己的网页,就能够出现这种效果啦!

当然你要是在上面不要if判断,直接加入,那你就不需要在配置文件中加入开关了

Dynamics小部件

2020.4.4更新 主题版本butterfly@2.2.5

为网站加上全局黑白效果

为什么加这个效果呢?我一开始加是2020.4.4为了纪念为抗争新冠肺炎而牺牲的各位烈士们,所以加了全局的黑白效果。先放两张图给你们看看加入后的效果

黑白首页

黑白友链

就是像这样的全局黑白效果,加起来其实也不难,一开始@yuleng给我分享了全局黑白的html代码,告诉我要加就加载header或者是body里面(下面先放html代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 黑白色 -->
<style>
html{
filter: grayscale( 100%);
-webkit-filter: grayscale( 100%);
-moz-filter: grayscale( 100%);
-ms-filter: grayscale( 100%);
-o-filter: grayscale( 100%);
filter: url( "data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale( 1);
}
</style>

但是我们的butterfly后端是使用的pug文件作为网站样式的编写方式,所以我们要先把它转成pug形式的,转出来就是像下面这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html
body
// 黑白色
style.
html{
filter: grayscale( 100%);
-webkit-filter: grayscale( 100%);
-moz-filter: grayscale( 100%);
-ms-filter: grayscale( 100%);
-o-filter: grayscale( 100%);
filter: url( "data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale( 1);
}

然后我把这一串代码存到一个名为blackandwhite.pug的文件,将它放在主题目录下的layout/includes/addons里面,然后就要在layout.pug里面引入文件。在原文件的include ./head.pug下面加入一行来引入我们的文件

1
2
if theme.blackandwhite
include ./addons/blackandwhite.pug

加个if判断是为了下次要使用的时候还能够用,不用再次修改。

接着我们到butterfly.yml文件内加多一行

1
blackandwhite: true

这样就开启了我们的黑白效果

为了方便大家,我将文件放出来blackandwhite.pug,大家只需要将文件放在对应的位置,加上对应的配置项即可!

不定期更新

Author: GamerNoTitle
Link: http://bili33.top/2020/03/19/butterfly-customize/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.

Comment