准备工作

  • 在博客根目录下的source下创建css和js文件夹，用来放魔改的css和js文件。
  • 在css文件夹下创建all.css文件来存放大多数css文件，js同理。

一图流

在all.css文件中写下如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 统一设置页脚和头图的背景为透明 */
#footer,
#page-header {
    background: transparent !important;
}

/* 统一设置白天模式下页脚和头图的遮罩为透明 */
#footer::before,
#page-header::before {
    background: transparent !important;
}

/* 统一设置夜间模式下页脚和头图的遮罩为透明 */
[data-theme="dark"] #footer::before,
[data-theme="dark"] #page-header::before {
    background: transparent !important;
}

在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/all.css" onload="this.media='all'">
  • 在主题配置文件[BlogRoot]\_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载

wowojs动画

安装插件,在博客根目录下打开终端，运行以下指令：

1
$ npm install hexo-butterfly-wowjs --save

添加配置信息

在站点配置文件_config.yml或者主题配置文件_config.butterfly.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
28
29
30
31
32
33
34
# wowjs
# see https://www.npmjs.com/package/hexo-butterfly-wowjs
wowjs:
  enable: true #控制动画开关。true是打开，false是关闭
  priority: 10 #过滤器优先级
  mobile: true #移动端是否启用，默认移动端禁用
  animateitem:
    - class: recent-post-item #必填项，需要添加动画的元素的class
      style: animate__zoomIn #必填项，需要添加的动画
      duration: 1.5s #选填项，动画持续时间，单位可以是ms也可以是s。例如3s，700ms。
      delay: 200ms #选填项，动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。
      offset: 30 #选填项，开始动画的距离（相对浏览器底部）
      iteration: 1 #选填项，动画重复的次数
    - class: card-widget
      style: animate__zoomIn
      delay: 200ms
    - class: flink-list-card
      style: animate__flipInY
      duration: 3s
    - class: flink-list-card
      style: animate__animated
      duration: 3s
    - class: article-sort-item
      style: animate__slideInRight
      duration: 1.5s
    - class: site-card
      style: animate__flipInY
      duration: 3s
    - class: site-card
      style: animate__animated
      duration: 3s
  animate_css: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/animate.min.css
  wow_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow.min.js
  wow_init_js: https://cdn.cbd.int/hexo-butterfly-wowjs/lib/wow_init.js

以上是我的配置，具体用法详见hexo-butterfly-wowjs。

导航栏魔改

在all.css中引入如下css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 导航栏 */
/* 一级菜单居中 */
#nav .menus_items {
    position: absolute !important;
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* 子菜单横向展示 */
  #nav .menus_items .menus_item:hover .menus_item_child {
    display: flex !important;
  }
  /* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
  .menus_items .menus_item:nth-child(2) .menus_item_child {
    left: -125px;
  }

黑夜霓虹灯

在all.css中引入如下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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/* 霓虹灯 */
/* 日间模式不生效 */
[data-theme="light"] #site-name,
[data-theme="light"] #site-title,
[data-theme="light"] #site-subtitle,
[data-theme="light"] #post-info {
  animation: none;
}
/* 夜间模式生效 */
[data-theme="dark"] #site-name,
[data-theme="dark"] #site-title {
  animation: light_15px 10s linear infinite;
}
[data-theme="dark"] #site-subtitle {
  animation: light_10px 10s linear infinite;
}
[data-theme="dark"] #post-info {
  animation: light_5px 10s linear infinite;
}
/* 关键帧描述 */
@keyframes light_15px {
  0% {
    text-shadow: #5636ed 0 0 15px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 15px;
  }
  25% {
    text-shadow: #f14747 0 0 15px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 15px;
  }
  50% {
    text-shadow: #b347f1 0 0 15px;
  }
  62.5% {
    text-shadow: #002afa 0 0 15px;
  }
  75% {
    text-shadow: #ed709b 0 0 15px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 15px;
  }
  100% {
    text-shadow: #5636ed 0 0 15px;
  }
}

@keyframes light_10px {
  0% {
    text-shadow: #5636ed 0 0 10px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 10px;
  }
  25% {
    text-shadow: #f14747 0 0 10px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 10px;
  }
  50% {
    text-shadow: #f1ee47 0 0 10px;
  }
  50% {
    text-shadow: #b347f1 0 0 10px;
  }
  62.5% {
    text-shadow: #002afa 0 0 10px;
  }
  75% {
    text-shadow: #ed709b 0 0 10px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 10px;
  }
  100% {
    text-shadow: #5636ed 0 0 10px;
  }
}

@keyframes light_5px {
  0% {
    text-shadow: #5636ed 0 0 5px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 5px;
  }
  25% {
    text-shadow: #f14747 0 0 5px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 5px;
  }
  50% {
    text-shadow: #b347f1 0 0 5px;
  }
  62.5% {
    text-shadow: #002afa 0 0 5px;
  }
  75% {
    text-shadow: #ed709b 0 0 5px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 5px;
  }
  100% {
    text-shadow: #5636ed 0 0 5px;
  }
}

星空背景和流星特效

在all.js加入

1
2
function dark() { window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var n, e, i, h, t = .05, s = document.getElementById("universe"), o = !0, a = "180,184,240", r = "226,225,142", d = "226,225,224", c = []; function f() { n = window.innerWidth, e = window.innerHeight, i = .216 * n, s.setAttribute("width", n), s.setAttribute("height", e) } function u() { h.clearRect(0, 0, n, e); for (var t = c.length, i = 0; i < t; i++) { var s = c[i]; s.move(), s.fadeIn(), s.fadeOut(), s.draw() } } function y() { this.reset = function () { this.giant = m(3), this.comet = !this.giant && !o && m(10), this.x = l(0, n - 10), this.y = l(0, e), this.r = l(1.1, 2.6), this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t, this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120), this.fadingOut = null, this.fadingIn = !0, this.opacity = 0, this.opacityTresh = l(.2, 1 - .4 * (this.comet + 1 - 1)), this.do = l(5e-4, .002) + .001 * (this.comet + 1 - 1) }, this.fadeIn = function () { this.fadingIn && (this.fadingIn = !(this.opacity > this.opacityTresh), this.opacity += this.do) }, this.fadeOut = function () { this.fadingOut && (this.fadingOut = !(this.opacity < 0), this.opacity -= this.do / 2, (this.x > n || this.y < 0) && (this.fadingOut = !1, this.reset())) }, this.draw = function () { if (h.beginPath(), this.giant) h.fillStyle = "rgba(" + a + "," + this.opacity + ")", h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1); else if (this.comet) { h.fillStyle = "rgba(" + d + "," + this.opacity + ")", h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1); for (var t = 0; t < 30; t++)h.fillStyle = "rgba(" + d + "," + (this.opacity - this.opacity / 20 * t) + ")", h.rect(this.x - this.dx / 4 * t, this.y - this.dy / 4 * t - 2, 2, 2), h.fill() } else h.fillStyle = "rgba(" + r + "," + this.opacity + ")", h.rect(this.x, this.y, this.r, this.r); h.closePath(), h.fill() }, this.move = function () { this.x += this.dx, this.y += this.dy, !1 === this.fadingOut && this.reset(), (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0) }, setTimeout(function () { o = !1 }, 50) } function m(t) { return Math.floor(1e3 * Math.random()) + 1 < 10 * t } function l(t, i) { return Math.random() * (i - t) + t } f(), window.addEventListener("resize", f, !1), function () { h = s.getContext("2d"); for (var t = 0; t < i; t++)c[t] = new y, c[t].reset(); u() }(), function t() { document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark' && u(), window.requestAnimationFrame(t) }() };
dark()

在all.css输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 背景宇宙星光  */
#universe{
    display: block;
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 这个是调置顶的优先级的，-1在文章页下面，背景上面，个人推荐这种 */
    z-index: -1;
  }

在_config.butterfly.yml的inject引入

1
2
3
4
5
6
inject:
    head:
        - <link rel="stylesheet" href="/css/all.css" onload="this.media='all'">
    bottom:
        - <canvas id="universe"></canvas>
        - <script defer src="/js/all.js"></script>

引入iconfont自定义图标

新建图标项目

  1. 访问阿里巴巴矢量图标库,注册登录
  2. 搜索图标，加到购物车。
  3. 选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目。
  4. 用fontclass的引用方式即可使用多彩图标，单一项目彩色图标上限是40个图标。

引入图标

在inject的bottom引如
示例如下：

1
<script src="//at.alicdn.com/t/c/font_4819365_t3hcyl6lhar.js"></script>

更换图标

  • 在_config.butterfly.yml中更改menu，写成如下方式
1
2
3
menu:
  归档: /archives/ || icon-guidang || faa-tada
  标签: /tags/ || icon-biaoqian || faa-tada
  • 重写\themes\butterfly\layout\includes\header\social.pug
1
2
3
4
5
6
7
8
9
10
each value, title in theme.social
  a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
    if value.split('||')[1]
      - var icon_value = trim(value.split('||')[1])
      - var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
      if icon_value.substring(0,2)=="fa"      
        i.fa-fw(class=icon_value + ' ' + anima_value)
      else if icon_value.substring(0,4)=="icon"          
        svg.social_icon(aria-hidden="true" class=anima_value)
          use(xlink:href=`#`+ icon_value)
  • 更改大小
    在all.css加入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 图标大小 */
svg.icon {
    width: 1.30em;
    height: 1.30em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
/*社交图标*/
svg.social_icon {
    width: 1.28em;
    height: 1.28em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

Butterfly添加全局吸底Aplayer

安装插件

1
$ npm install --save hexo-tag-aplayer

关闭 asset_inject

由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为 false
在 Hexo 的配置文件中

1
2
3
aplayer:
  meting: true
  asset_inject: false

开启主题的 aplayerInject

在主题的配置文件中，enable 设为 true 和 per_page 设为 true

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

把aplayer代码插入到主题配置文件的inject.bottom去

1
2
3
4
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="13366571982" data-server="netease" data-type="playlist" data-order="list" data-fixed="true" data-mini="true" data-listfolded="true"  data-preload="auto" data-autoplay="false" data-mutex="true" ></div>

最后

如果你想切换页面时，音乐不会中断。请把主题配置文件的pjax设为 true
参数设置详见hexo-tag-aplayer 。

文章H1~H6标题小风车转动效果

修改主题配置文件

将_config.butterfly.yml文件的beautify配置项修改为：

1
2
3
4
5
6
beautify:
  enable: true
  field: post # site/post
  # title-prefix-icon: '\f0c1' 原内容
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"

在 all.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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}
/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}

直达底部按钮

在[BlogRoot]\themes\butterfly\layout\includes\rightside.pug做以下修改:

1
2
3
4
5
button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up

+button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
+  i.fas.fa-arrow-down

页脚

修改footer.pug

将[BlogRoot]/themes/butterfly/layout/includes/footer.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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#footer-wrap
  #ft
    .ft-item-1
      .t-top
        .t-t-l
          p.ft-t.t-l-t 哦累哇机油哒！
          .bg-ad
            div
              | 我一直以来都弄不明白，为什么不管做了多么明智合理的选择，在结果出来之前，谁都无法知道它的对错。到头来我们被允许做的，只是坚信那个选择，尽量不留下后悔而已。

        .t-t-r
          p.ft-t.t-l-t 猜你想看💡
          ul.ft-links
            li
              a(href='/about/') 关于作者
              a(href='/archives/') 文章归档
            li
              a(href='/categories/') 文章分类
              a(href='/tags/') 文章标签
    .ft-item-2
      p.ft-t 推荐友链⌛
      .ft-img-group
        .img-group-item
          a(href='https://www.fomal.cc/' title='Fomalhaut🥝')
            img(src='/img/avatar.webp' alt='')
        .img-group-item
          a(href='https://akilar.top/' title='Akilarの糖果屋')
            img(src='/img/akilar.jpg' alt='')
        .img-group-item
          a(href='https://butterfly.js.org/' title='Butterfly')
            img(src='/img/jerry.png' alt='')
        .img-group-item
          a(href='https://anzhiy.cn/' title='安知鱼')
            img(src='/img/anzhiyu.jpg' alt='')
        .img-group-item

  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright
        span!= `<b>&copy;${theme.footer.owner.since} - ${nowYear}</b>`
        span!= `<b>&nbsp;&nbsp;By ${config.author}</b>`
    else
       .copyright
         span!= `<b>&copy;${nowYear}</b>`
         span!= `<b>&nbsp;&nbsp;By ${config.author}</b>`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`
    
  #workboard
  
  p#ghbdages
    a.github-badge(target='_blank' href="https://github.com/BLRQF/BLRQF.github.io" style='margin-inline:5px' title="次元技术宅")
      img(src="/img/BLRQF-小栈-7cfcoo.svg" alt='')

    a.github-badge(target='_blank' href="https://github.com/" style='margin-inline:5px' title="本站项目由Github托管")
      img(src="/img/Source-Github-d021d6.svg" alt='')

    a.github-badge(target='_blank' href="https://butterfly.js.org/" style='margin-inline:5px' title="主题Butterfly")
      img(src="/img/Theme-Butterfly-6513df.svg" alt='')

    a.github-badge(target='_blank' href="https://hexo.io/" style='margin-inline:5px' title="博客框架为Hexo")
      img(src="/img/Frame-Hexo-blue.svg" alt='')

    a.github-badge(target='_blank' href="http://creativecommons.org/licenses/by-nc-sa/4.0/" style='margin-inline:5px' title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可")
      img(src="/img/Copyright-BY--NC--SA_4.svg" alt='')

自定义样式

将以下代码复制到自定义的all.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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
/* 页脚样式 */
#ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: rgb(255 255 255 / 80%) !important;
    text-align: left;
    flex-wrap: wrap;
  }
  
  .ft-item-1,
  .ft-item-2 {
    display: flex;
    height: 100%;
    padding: 2px 14px;
  }
  
  .ft-item-1 {
    flex-direction: column;
    flex: 2;
  }
  
  .ft-item-2 {
    flex: 1;
    flex-direction: column;
  }
  
  .t-top {
    display: flex;
  }
  
  .t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px;
  }
  
  .t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px;
  }
  
  .btn-xz-box {
    margin-top: 10px;
  }
  
  /* 按钮背景颜色等 */
  .btn-xz {
    display: block;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
  }
  
  .btn-xz:hover {
    text-decoration: none !important;
  }
  /* 按钮悬浮颜色 */
  .btn-xz-box:hover .btn-xz {
    background-color: var(--text-bg-hover);
  }
  
  .t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important;
  }
  
  .ft-links li a {
    display: inline-block !important;
    width: 50%;
  }
  /* 链接悬浮颜色 */
  .ft-links li a:hover {
    text-decoration: none !important;
    color: var(--theme-color) !important;
  }
  
  .ft-item-2 .ft-img-group {
    width: 100%;
  }
  
  .ft-t {
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600;
  }
  
  .t-l-t {
    padding-left: 14px;
  }
  
  .ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px;
  }
  
  .ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  
  .ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px;
    border-radius: 10px;
  }
  /* 头像悬浮颜色框 */
  .ft-item-2 .ft-img-group .img-group-item a img:hover {
    border: 2px solid var(--theme-color);
  }
  
  @media screen and (max-width: 768px) {
    .ft-item-1 {
      flex-basis: 100% !important;
    }
  
    .ft-item-2 {
      flex-basis: 100% !important;
    }
  
    .t-top .t-t-l .bg-ad {
      width: 100%;
    }
  }
  
  @media screen and (max-width: 576px) {
    .t-top {
      flex-wrap: wrap;
    }
  
    .t-top .t-t-l {
      flex-basis: 100% !important;
    }
  
    .t-top .t-t-r {
      margin-top: 16px;
      flex-basis: 100% !important;
    }
  }
  #footer-wrap a {
    border-radius: 30px;
  }
  #footer-wrap {
    padding: 20px 20px;
  }
  
  /* 页脚心跳动画 */
  #heartbeat {
    color: red;
    animation: iconAnimate 1s ease-in-out infinite;
  }
  @-moz-keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  }
  @-webkit-keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  }
  @-o-keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  }
  @keyframes iconAnimate {
    0%,
    100% {
      transform: scale(1);
    }
    10%,
    30% {
      transform: scale(0.9);
    }
    20%,
    40%,
    60%,
    80% {
      transform: scale(1.1);
    }
    50%,
    70% {
      transform: scale(1.1);
    }
  }

计时器

在all.js中添加

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// 运行时间
// 获取当前时间
let now = new Date();
// 设置起始时间
let startTime = new Date("2024-11-15T00:00:00");

// 格式化时间，确保时间为两位数
function formatTime(time) {
    return String(time).length === 1 ? "0" + time : time;
}

// 计算从起始时间到当前时间的持续时长
function calculateDuration() {
    // 获取当前真实时间
    now = new Date();
    // 计算时间差（毫秒）
    const diff = now - startTime;
    // 计算天数
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    // 计算小时数
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    // 计算分钟数
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    // 计算秒数
    const seconds = Math.round((diff / 1000) % 60);

    // 格式化小时、分钟和秒
    const formattedHours = formatTime(hours);
    const formattedMinutes = formatTime(minutes);
    const formattedSeconds = formatTime(seconds);

    return {
        days,
        hours: formattedHours,
        minutes: formattedMinutes,
        seconds: formattedSeconds
    };
}

// 创建要显示的 HTML 内容
function createDisplayContent(duration) {
    // 根据当前小时数选择图片和提示信息
    const imageSrc = duration.hours < 21 && duration.hours >= 9
      ? '/img/BLRQF-摸鱼中-7cfcoo.svg'
      : '/img/BLRQF-晚安啦-7cfcoo.svg';
    const imageTitle = duration.hours < 21 && duration.hours >= 9
      ? '今天，也要元气满满哦！'
      : '晚上就不要熬夜了，早点睡~';

    return `<img class='boardsign' src='${imageSrc}' title='${imageTitle}'>
            <span class='textTip'> <br> 本站居然运行了 ${duration.days} 天</span>
            <span id='runtime'> ${duration.hours} 小时 ${duration.minutes} 分 ${duration.seconds} 秒 </span> 
            <i id="heartbeat" class='fas fa-heartbeat'></i>`;
}

// 更新显示内容的函数
function createtime() {
    // 计算持续时长
    const duration = calculateDuration();
    // 创建显示内容
    const displayContent = createDisplayContent(duration);
    // 获取显示内容的 DOM 元素
    const workboard = document.getElementById("workboard");
    if (workboard) {
        // 更新 DOM 元素的内容
        workboard.innerHTML = displayContent;
    }
}

// 每秒更新一次显示内容
setInterval(createtime, 1000);

最后引入

网站恶搞标题

在all.js中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = '👀跑哪里去了~';
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = '🐖抓到你啦～';
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

雪花飘落特效

新建snow.js

[BlogRoot]\source\js\snow.js中写入

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    // 移动端不显示
} else {
    // document.write('<canvas id="snow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;pointer-events:none"></canvas>');

    window && (() => {
        let e = {
            flakeCount: 50, // 雪花数目
            minDist: 150,   // 最小距离
            color: "255, 255, 255", // 雪花颜色
            size: 1.5,  // 雪花大小
            speed: .5,  // 雪花速度
            opacity: .7,    // 雪花透明度
            stepsize: .5    // 步距
        };
        const t = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (e) {
            window.setTimeout(e, 1e3 / 60)
        }
            ;
        window.requestAnimationFrame = t;
        const i = document.getElementById("snow"),
            n = i.getContext("2d"),
            o = e.flakeCount;
        let a = -100,
            d = -100,
            s = [];
        i.width = window.innerWidth,
            i.height = window.innerHeight;
        const h = () => {
            n.clearRect(0, 0, i.width, i.height);
            const r = e.minDist;
            for (let t = 0; t < o; t++) {
                let o = s[t];
                const h = a,
                    w = d,
                    m = o.x,
                    c = o.y,
                    p = Math.sqrt((h - m) * (h - m) + (w - c) * (w - c));
                if (p < r) {
                    const e = (h - m) / p,
                        t = (w - c) / p,
                        i = r / (p * p) / 2;
                    o.velX -= i * e,
                        o.velY -= i * t
                } else
                    o.velX *= .98,
                        o.velY < o.speed && o.speed - o.velY > .01 && (o.velY += .01 * (o.speed - o.velY)),
                        o.velX += Math.cos(o.step += .05) * o.stepSize;
                n.fillStyle = "rgba(" + e.color + ", " + o.opacity + ")",
                    o.y += o.velY,
                    o.x += o.velX,
                    (o.y >= i.height || o.y <= 0) && l(o),
                    (o.x >= i.width || o.x <= 0) && l(o),
                    n.beginPath(),
                    n.arc(o.x, o.y, o.size, 0, 2 * Math.PI),
                    n.fill()
            }
            t(h)
        }
            , l = e => {
                e.x = Math.floor(Math.random() * i.width),
                    e.y = 0,
                    e.size = 3 * Math.random() + 2,
                    e.speed = 1 * Math.random() + .5,
                    e.velY = e.speed,
                    e.velX = 0,
                    e.opacity = .5 * Math.random() + .3
            }
            ;
        document.addEventListener("mousemove", (e => {
            a = e.clientX,
                d = e.clientY
        }
        )),
            window.addEventListener("resize", (() => {
                i.width = window.innerWidth,
                    i.height = window.innerHeight
            }
            )),
            (() => {
                for (let t = 0; t < o; t++) {
                    const t = Math.floor(Math.random() * i.width)
                        , n = Math.floor(Math.random() * i.height)
                        , o = 3 * Math.random() + e.size
                        , a = 1 * Math.random() + e.speed
                        , d = .5 * Math.random() + e.opacity;
                    s.push({
                        speed: a,
                        velX: 0,
                        velY: a,
                        x: t,
                        y: n,
                        size: o,
                        stepSize: Math.random() / 30 * e.stepsize,
                        step: 0,
                        angle: 180,
                        opacity: d
                    })
                }
                h()
            }
            )()
    }
    )();
}

配置css

在all.css中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 雪花特效 */
[data-theme="light"] #snow{
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
  }
  
  /* 雪花黑夜模式不显示 */
  [data-theme="dark"] #snow{
    display: none;
  }

引入画布元素

在主题配置文件_config.butterfly.yml文件的引入js文件和一个canvas画布：

1
2
3
4
inject: 
  bottom: 
    - <canvas id="snow"></canvas> # 雪花画布
    - <script async src="/js/snow.js"></script> # 雪花特效