完成度

非源码修改

随机背景

基于 小冰老师 教程 butterfly随机背景最简单的写法

但由于数组存在第0位,而此代码产生的随机数大于0,会使第1个无法随机到,故做了些许更改,以便可以全部图片都有几率随机到

真随机太狠了orz
尽管这并不是真随机

1
2
3
- <script> let backimg =[,"url(1.jpg)","url(2.png)"];let index =Math.ceil(Math.random() * (backimg.length-1));document.getElementById("web_bg").style.backgroundImage = backimg[index]</script> # bg

- <script> let backimg =["url(1.jpg)","url(2.png)"];let index =Math.ceil(Math.random() * (backimg.length-1) - 1);document.getElementById("web_bg").style.backgroundImage = backimg[index]</script> # bg

以上两种代码均可

半透明卡片

预览图片

都想方设法把随机背景给搞上了,怎么能不让看呢。基于“不到万不得已不修改主题源码”的魔改原则,选择引入CSS。

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
/*半透明*/
/*文章*/
.layout > div:first-child:not(.recent-posts) {
background: rgba(255,255,255,.7);
}

/*主页文章*/
#recent-posts > .recent-post-item {
background: rgba(255,255,255,.7);
}

/*侧边栏*/
#aside-content .card-widget {
background: rgba(255,255,255,.7);
}
/*黑暗模式*/
[data-theme="dark"]
.layout > div:first-child:not(.recent-posts) {
background: rgba(255,255,255,.3);
}
[data-theme="dark"]
#recent-posts > .recent-post-item {
background: rgba(255,255,255,.3);
}
[data-theme="dark"]
#aside-content .card-widget {
background: rgba(255,255,255,.3);
}

毛玻璃效果

基于 异次元de机智君💯 的 创造 CANDY 主题,只为更好的交互

所谓「毛玻璃」,更专业一点的说法叫「Backdrop Filter effect」,即背景过滤效果。所以核心就是 backdrop-filter 样式。我这里依旧模仿的 Apple Newsroom,将 navbar 背景色变透明并增加饱和度和模糊:

1
2
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);

并由毛玻璃,基于半透明卡片进行更改,通过CSS的hover属性进行美化,提高文章可读性,并给予部分交互感

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
35
36
37
div#post:hover{
-webkit-backdrop-filter: saturate(180%) blur(5px);
backdrop-filter: saturate(180%) blur(5px);
background-color: rgb(255 255 255 / 70%);
}
[data-theme="dark"]
div#post:hover{
background-color: rgb(255 255 255 / 30%);
}
#aside-content .card-widget:hover{
-webkit-backdrop-filter: saturate(180%) blur(5px);
backdrop-filter: saturate(180%) blur(5px);
background-color: rgb(255 255 255 / 70%);
border-radius: 8px;
}
[data-theme="dark"]
#aside-content .card-widget:hover {
background-color: rgb(255 255 255 / 30%);
}
div#recent-posts .recent-post-item:hover{
-webkit-backdrop-filter: saturate(180%) blur(5px);
backdrop-filter: saturate(180%) blur(5px);
background-color: rgb(255 255 255 / 70%);
}
[data-theme="dark"]
div#recent-posts .recent-post-item:hover{
background-color: rgb(255 255 255 / 30%);
}
div#page:hover{
-webkit-backdrop-filter: saturate(180%) blur(5px);
backdrop-filter: saturate(180%) blur(5px);
background-color: rgb(255 255 255 / 70%);
}
[data-theme="dark"]
div#page:hover{
background-color: rgb(255 255 255 / 30%);
}

彩虹渐变文字

博客就是要炫,所以引入了彩虹渐变文字
别问我为什么

预览图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*彩虹渐变字体*/
/*使用办法
<rainbow-text>文字</rainbow-text>
*/
rainbow-text, rainbow-text * {
background-image: linear-gradient( to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
background-size: 110vw;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-animation: rainbowan 60s linear infinite;
animation: rainbowan 60s linear infinite;
}
@-webkit-keyframes rainbowan {
to {
background-position: -2000vw;
}
}

@keyframes rainbowan {
to {
background-position: -2000vw;
}
}

鼠标样式

重所周知,即使没人看我的博客,也要拼尽一切去美观。

看惯了千篇一律的鼠标样式,我们选择了更换cur图片,以追求新的图标样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*鼠标样式*/
body,
html {
cursor: url(https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/img/Arrow.cur),
auto !important;
}
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/img/link.cur),
auto !important;
}
/*a标签*/
a:hover {
cursor: url(https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/img/link.cur),
auto !important;
}
/*按钮*/
button:hover {
cursor: url(https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/img/link.cur),
auto !important;
}

以上css代码是最初使用的,存在一定的疏漏,比如鼠标会在某些地方被打回原型。

因此,通过万能的F12大法,我进行了逐一试错,并修改出满意的方案。

以下代码可能仅使用于本站

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
li,
time,
body,
html,
img.vimg,
span.post-meta-date,
span.page-number.current,
img.tk-avatar-img.entered.loading{
cursor: url(https://cdn.jsdelivr.net/gh/skyilz/CDN/img/Cursor1.cur),
auto !important;
}

a,
img,
svg,
path,
summary,
a:hover,
span.vat,
li::before,
li.OwO-item,
button:hover,
span.switch-btn,
i.fas.fa-paste.copy-button,
i.fas.fa-angle-down.expand,
i.fas.fa-angle-down.scroll-down-effects{
cursor: url(https://cdn.jsdelivr.net/gh/skyilz/CDN/img/Cursor2.cur),
auto !important;
}

Twikoo评论框高度

怎么说呢,Twikoo是一个很棒的评论系统,就是评论框的高度有点矮

于是,我们可以通过引入CSS来改变评论框的高度。

预览图片

1
2
3
4
.el-textarea__inner {
min-height: 210px !important;
height: 210px !important;
}

新春灯笼

fz6m 的github项目 china-lantern

预览图片

1
2
3
/*原作者js,可直接引入*/
bottom:
- <script async src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.6/dist/china-lantern.min.js"></script>

当然,如果我们需要更改,比如现在正直元宵佳节,我们可以更改其中内容。

阅读背景

虽然不知道会不会用到
预览图片

1
2
3
4
5
6
7
8
9
10
11
/*阅读背景*/
body.read-mode{
/* 字体大小 */
font-size:17px;
background:#f8f1e2;
/* 可以在这里引入自定义字体,具体方法请自行百度css引入字体 */
}
[data-theme="dark"]
body.read-mode{
background:#121212;
}

侧边栏美化

预览图片

引入CSS修改即可

1
2
3
4
5
6
#rightside > div > button, #rightside > div > a{
margin-bottom: 6px;
}
#rightside>div>a, #rightside>div>button {
border-radius: 12px;
}

源码修改

版权美化

参考教程:Nesxc 的 butterfly 版权美化教程

预览图片

覆盖 [root]\themes\butterfly\layout\includes\post\post-copyright.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
28
29
30
if theme.post_copyright.enable && page.copyright !== false
- let author = page.copyright_author ? page.copyright_author : config.author
- let url = page.copyright_url ? page.copyright_url : page.permalink
.post-copyright
.post-copyright__title
span.post-copyright-info
h #[=page.title]
.post-copyright__type
span.post-copyright-info
a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
.post-copyright-m
.post-copyright-m-info
.post-copyright-a(style="display: inline-block;width: 120px")
h 作者
.post-copyright-cc-info
h=author
.post-copyright-c(style="display: inline-block;width: 120px")
h 发布于
.post-copyright-cc-info
h=date(page.date, config.date_format)
.post-copyright-u(style="display: inline-block;width: 120px")
h 更新于
.post-copyright-cc-info
h=date(page.updated, config.date_format)
.post-copyright-c(style="display: inline-block;width: 120px")
h 许可协议
.post-copyright-cc-info
a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
i.fab.fa-creative-commons
a(rel='noopener' target='_blank' title='CC BY 4.0' href='https://creativecommons.org/licenses/by/4.0/deed.zh') CC BY 4.0

DIFF [root]\themes\butterfly\source\css_layout\post.styl

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
  .post-copyright
position: relative
margin: 2rem 0 .5rem
padding: .5rem .8rem
border: 1px solid var(--light-grey)
transition: box-shadow .3s ease-in-out
+ overflow: hidden
+ border-radius: 12px!important
+ background-color: rgb(239 241 243)

&:before
- @extend .fontawesomeIcon
- position: absolute
- top: .1rem
- right: .6rem
- color: $theme-color
- content: '\f1f9'
- font-size: 1rem
+ position absolute
+ right -26px
+ top -120px
+ content '\f25e'
+ font-size 200px
+ font-family 'Font Awesome 5 Brands'
+ opacity .2

&:hover
box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)

.post-copyright
&-meta
color: $light-blue
font-weight: bold

&-info
padding-left: .3rem

a
- text-decoration: underline
+ text-decoration: none
word-break: break-word

&:hover
text-decoration: none

+ .post-copyright-cc-info
+ color: $theme-color;

.post-outdate-notice
position: relative
margin: 0 0 1rem
padding: .5em 1.2em
border-radius: 15px
background-color: $noticeOutdate-bg
color: $noticeOutdate-color

新建 copyright.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[data-theme="dark"]
#post .post-copyright {
background-color: rgb(7 8 10);
text-shadow: #bfbeb8 1px 0 4px;
}
[data-theme="dark"]
#post .post-copyright {
border: 1px solid rgb(19 18 18 / 35%);
}
[data-theme="dark"]
.post-copyright-info {
color: #e0e0e4;
}
#post .post-copyright__title{
font-size:22px;
}
#post .post-copyright__notice{
font-size:15px;
}

文章页美化

参考教程:Nesxc 的 butterfly 文章页美化教程

预览图片
修改前

修改后

新建 [root]\themes\butterfly\source\css_layout\top_img.styl

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
// 顶部图
#page-header, #page-header:before
background-color: transparent !important
background-image: unset !important

.top-img
height: 12.5rem
display: block
margin: -50px -40px 50px -40px
border-top-left-radius: inherit
border-top-right-radius: inherit
background-position: center center
-webkit-background-size: cover
-moz-background-size: cover
background-size: cover
background-repeat: no-repeat
transition: all 0.3s

.read-mode
display: none

@media screen and (max-width: 768px)
margin: -1.8rem -0.7rem 1.8rem -0.7rem

[data-theme='dark'] &
filter: brightness(0.8)

DIFF [root]\themes\butterfly\layout\includes\post.pug

1
2
3
4
5
block content
#post
if top_img === false
include includes/header/post-info.pug
+ .top-img.gist(style=`background-image: url(${url_for(top_img)})`)

原理:即隐藏头图,并在文章页新制头图。

Twikoo文章访问量统计

我瞎说的众所周知,卜蒜子会大幅增加加载速度
而我采用的Twikoo评论,则同样有着访问量。
既可以加载评论,又能展示访客,何乐而不为呢。

您可以在需要展示文章访问量的地方添加:
<span id="twikoo_visitors">0</span>
来展示访问量。暂不支持全站访问量统计。

因此,弃用卜蒜子,启用Twikoo
最新版butterfly主题可以在配置处直接启用,而无需魔改
visitor: true

导航栏处更改

上文,我们进行了导航栏毛玻璃效果虽然说还有bug
但是,由于之前我使用的主题Matery,导航栏的图标很应我心,因此对源码进行更改
我才不会说是因为没有好名字的

DIFF [root]\themes\butterfly\layout\includes\header\nav.pug

1
2
3
4
nav#nav
span#blog_name
- a#site-name(href=url_for('/')) #[=config.title]
+ a#site-name(href=url_for('/')) #[<img src="\img\1.jpg" width="60"/>]