朋友圈功能

看这里：https://fcircle-doc.yyyzyyyz.cn/#/

侧边栏时钟

看这里：https://anzhiy.cn/posts/fc18.html

增加弹幕功能

看这里：https://yisous.xyz/posts/69707535/

GitHub贡献图

2016rshah's Github chart

<img src="https://ghchart.rshah.org/换成自己的" alt="2016rshah's Github chart" />

信笺

看这里：https://akilar.top/posts/e2d3c450/

轮播图

使用

双栏布局

看这里：https://zfe.space/post/hexo-butterfly-article-double-row.html

徽标制作

看这里：https://akilar.top/posts/e87ad7f8
https://blog.csdn.net/weixin_58068682/article/details/116722983

插入哔哩哔哩视频美化

演示

代码

1
2
3
4
5
6
7
8
9
/*哔哩哔哩视频适配*/
.aspect-ratio {position: relative;width: 100%;height: 0;padding-bottom: 75%;margin: 3% auto;text-align: center;}      
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
1
2
3
4
5
6
7
8
9
10
<div align=center class="aspect-ratio">
<iframe src="//player.bilibili.com/player.html?aid=342920830&bvid=BV1Z94y197iW&cid=760266352&&page=1&as_wide=1&high_quality=1&danmaku=0"
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    high_quality=1
    danmaku=1 
    allowfullscreen="true"> </iframe>
</div>

通讯录

看这里：https://akilar.top/posts/e7d99b48/

卡片式音乐播放器 | aplayer魔改

看这里https://www.crowhsu.top/posts/637681ac.html

悬浮伸缩栏

看这里：https://www.chuckle.top/article/fab5c3df.html

鼠标样式

图标可以换成自己的

1
2
3
4
5
6
7
8
body {
  cursor: url("https://cdn.jsdelivr.net/gh/xlenco/JS-X@main/mouse/normal.cur"), default;
}
a,
img,
button {
  cursor: url("https://cdn.jsdelivr.net/gh/xlenco/JS-X@main/mouse/link.cur"), default !important;
}

随便逛逛

创建

创建themes/butterfly/scripts/helpers/random.js文件

1
2
3
4
5
6
7
8
9
10
11
hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
        if (post.random !== false) posts.push(post.path)
    }
    return {
        path: config.path || 'zhheo/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){pjax.loadUrl('/'+posts[Math.floor(Math.random() * posts.length)]);};`
    }
})

如果你没有开启pjax用下面的代码

1
2
3
4
5
6
7
8
9
10
11
hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
        if (post.random !== false) posts.push(post.path)
    }
    return {
        path: config.path || 'zhheo/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
    }
})

在主题配置文件引入themes/butterfly/_config.yml，inject的bottom里添加

1
<script src="/zhheo/random.js"></script>

调用

在需要调用的位置执行toRandomPost()函数即可。
比如任意dom添加onclick="toRandomPost()"
例如在配置文件导航栏中需要的位置添加，随机文章: javascript:toRandomPost() || fas fa-bus

自定义鼠标右键

看这里：https://yisous.xyz/posts/11eb4aac/

特殊日子自动弹窗

看这里：https://yisous.xyz/posts/7e9276a3/

直达底部按钮

看这里：https://blog.leonus.cn/2022/rightside.html

Butterfly主题页脚美化

修改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
75
76
77
78
#footer_deal
  a.deal_link(href="" title="mail")
    i.iconfont.icon-mail
  a.deal_link(href="" title="qq" target="_blank")
    i.iconfont.icon-qq1
  a.deal_link(href="" title="微博" target="_blank")
    i.iconfont.icon-weibo1
  a.deal_link(href="https://github.com/JayHrn" title="github"  target="_blank")
    i.iconfont.icon-github1
  img.footer_mini_logo.entered.loading(style="border-radius:50%" src='图片路径' onclick="btf.scrollToDest(0,500)" title="返回顶部")
  a.deal_link(href="" title="dribbble")
    i.iconfont.icon-dribbble_F
  a.deal_link(href="" title="facebook" target="_blank")
    i.iconfont.icon-facebook1
  a.deal_link(href="" title="Twitter" target="_blank")
    i.iconfont.icon-twitter
  a.deal_link(href="" title="Telegram" target="_blank")
    i.iconfont.icon-telegram
#Jay-footer
  .footer-group
    h3.footer-title 直达
    .footer-links
      a.footer-item(href="https://www.jayhrn.com" target="_blank") 我的主页
      a.footer-item(href="/music") 音乐欣赏
      a.footer-item(href="/harbour") 心灵港湾
      a.footer-item(href="/random.html") 随机文章
  .footer-group
    h3.footer-title 分类
    .footer-links
      a.footer-item(href="/categories/📚学习笔记/") 学习笔记
      a.footer-item(href="/categories/🦋魔改教程/") 魔改教程
      a.footer-item(href="/categories/🌈算法笔记/") 算法笔记
      a.footer-item(href="/categories/📙语法教程/") 语法教程
  .footer-group
    h3.footer-title 关于
    .footer-links
      a.footer-item(href="/about/") 关于我
      a.footer-item(href="/charts/") 博客统计
      a.footer-item(href="/archives") 文章归档
      a.footer-item(href="/update") 更新记录
  .footer-group
    h3.footer-title 友链
    .footer-links#friend-links-in-footer
  .footer-group
    h3.footer-title 协议
    .footer-links
      a.footer-item(href="/privacy/") 隐私协议
      a.footer-item(href="/cookies/") Cookie
      a.footer-item(href="/cc/") 版权协议
#footer-banner
  .footer-banner-links
    .footer-banner-left
      .footer-banner-left
        #footer-banner-tips
        script(src='https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js')
        script.
          var typed = new Typed("#footer-banner-tips", {
            strings: ["念念不忘，必有回响。", "Never forget, there will be echoes."],
            startDelay: 200,
            backDelay: 2000,
            typeSpeed: 100,
            loop: true,
            backSpeed: 20
          })

    .footer-banner-right
      a.footer-banner-link(href="https://hexo.io/zh-cn/" title="Hexo") 框架
      a.footer-banner-link |
      a.footer-banner-link(href="https://github.com/jerryc127/hexo-theme-butterfly" title="theme") 主题
      a.footer-banner-link |
      a.footer-banner-link(href="/atom.xml" title="RSS") 订阅
      a.footer-banner-link |
      a.footer-banner-link(href="/about/" title="about") 关于
      a.footer-banner-link |
      a.footer-banner-link.cc(href="/cc/" title="cc协议")
        i.iconfont.icon-cc
        span 协议

对于中间图片填写自己的路径就可以了，哪些icon图表可以换成自己的，如果需要引用他的，可以引入

1
2
3
inject:
  head:
    - <script src="https://at.alicdn.com/t/c/font_3570527_dthoqrrv2tv.css"></script>

对于#footer-banner-tips里面的内容可以换成自己的，对于随机文字可以参考Hexo博客实现页面随机跳转。

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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
#footer-wrap {
    color: var(--Jay-fontcolor)
}

#footer-wrap a {
    color: var(--Jay-fontcolor);
    height: 44px;
    line-height: 36px
}

#footer-wrap a:hover {
    color: var(--Jay-hovertext);
    background-color: var(--Jay-none)
}

div#footer_deal {
    justify-content: center;
    display: flex;
    padding-top: 2rem;
    align-items: center
}

@media screen and (max-width: 768px) {
    img.footer_mini_logo {
        display: none
    }

    div#footer_deal {
        flex-wrap: wrap;
        flex-direction: row
    }
}


a.deal_link {
    display: flex;
    margin: 1rem 27px;
    color: var(--Jay-card-bg);
    border-radius: 3rem;
    width: 32px;
    height: 32px;
    background: var(--font-color);
    justify-content: center;
    align-items: center;
    transition: .3s
}

a.deal_link:hover {
    color: var(--Jay-white);
    background: var(--Jay-main)
}

img.footer_mini_logo {
    width: 50px;
    height: 50px;
    margin: 0 1rem;
    cursor: pointer;
    /*filter: drop-shadow(0 12px 12px #ee7d7936);*/
    transition: cubic-bezier(0, 0, 0, 1.29) .5s
}

img.footer_mini_logo:hover {
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d
}

@media screen and (min-width: 1300px) {
    img.footer_mini_logo:hover {
        transform: scale(1.03)
    }

    img.footer_mini_logo:active {
        transform: scale(.97)
    }
}

#weblogo {
    align-self: center
}

#footer-wrap a#Jayblog_footerlogo:hover {
    background: var(--Jay-none)
}

.Jayblog_footerlogo_img {
    filter: drop-shadow(0 12px 12px #ee7d7936)
}

.Jayblog_footerlogo_img:hover {
    transform: scale(1.03)
}

#footer {
    background: linear-gradient(180deg, var(--Jay-background) 0, var(--Jay-card-bg) 25%);
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    z-index: 1002
}

@media screen and (max-width: 768px) {
    #footer {
        background: linear-gradient(180deg, var(--Jay-background) 0, var(--Jay-card-bg) 25%);
        margin-top: 0;
        z-index: 999
    }
}

[data-theme=dark] #footer:before, [data-theme=dark] #page-header:before, [data-theme=dark] #web_bg:before {
    background-color: var(--Jay-none) !important
}

@media screen and (max-width: 768px) {
    #letlink {
        flex-direction: column !important;
        text-align: center !important
    }

    #letlogo {
        display: none !important
    }

    #footer-wrap {
        margin-top: 1rem !important
    }
}

.footer-banner-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap
}

#footer-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px 50px 0 50px;
    text-align: left !important;
    max-width: 1200px;
    margin: 0 auto
}

#footer-wrap h1 {
    font-size: 1.5rem;
    margin: 0
}

#footer-wrap h3 {
    padding: 0 12px
}

#footer-wrap p {
    margin: 0 0 0 .2rem;
    font-size: .8rem;
    opacity: .8
}

#footer-wrap i {
    margin-right: .5rem;
    width: 22px;
    font-size: 18px;
    display: inline-block
}

#footer-wrap #letlogo {
    display: flex;
    flex-direction: column;
    /*margin-right: 60px;*/
    align-self: center;
    margin: auto 0;
    max-width: 200px
}

#footer-wrap #letlink .link_group {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    min-width: 180px
}

#footer-wrap #letlink {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0 0 1rem 0
}

#weblogo i {
    font-size: 2rem;
    line-height: 2rem;
    letter-spacing: -10px
}

#footer:before {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    content: '' !important;
    z-index: -1
}

#Jay-footer .footer-links {
    display: flex;
    flex-direction: column
}

#Jay-footer {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1200px;
    margin: 1rem auto;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding: 0 1rem
}

#Jay-footer .footer-item {
    font-size: 1rem;
    line-height: .8rem;
    margin: .38rem 0;
    color: var(--Jay-fontcolor);
    /*margin-right: auto*/
}

#Jay-footer .footer-item:hover {
    color: var(--Jay-theme)
}

#Jay-footer .footer-group {
    min-width: 120px
}

#Jay-footer .footer-title {
    color: var(--Jay-secondtext);
    font-size: 1rem
}

#footer-banner {
    padding: 1rem;
    color: var(--Jay-fontcolor);
    margin-top: 1rem;
    background: var(--Jay-secondbg);
    display: flex;
    overflow: hidden;
    z-index: 1002;
    transition: .3s;
    /*border-top: var(--style-border)*/
}

[data-theme=dark] #footer-banner {
    background: var(--Jay-secondbg)
}

#footer-banner .footer-banner-links {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: center;
}

#footer-banner .footer-banner-left {
    display: flex;
    flex-wrap: wrap;
    min-height: 32px
}

#footer-banner .footer-banner-link {
    margin-right: 1rem;
    color: var(--Jay-fontcolor);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap
}

#footer-banner .footer-banner-link.cc {
    margin-right: 0
}

#footer-banner .footer-banner-link.cc i {
    margin-right: .5rem
}

#footer-banner .footer-banner-link:hover {
    color: var(--Jay-theme)
}

#footer-banner > div > div.footer-banner-left > span {
    margin-right: 1rem
}

#footer-banner .footer-banner-right a:hover {
    color: var(--Jay-lighttext)
}

#footer_deal i {
    font-size: 1.6rem;
    transition: .3s;
    line-height: 1.3rem;
    height: 1.3rem
}

颜色样式变量就自行改动就可以了

如果发现有部分图标不能使用，可以自行到iconfont进行查找替换，关于如何引入，可以参考 Akilarの糖果屋的Iconfont Inject

弹窗背景

看这里：https://blog.leonus.cn/2022/bg2.html

buterfly博客导航栏居中

  1. 引入css文件
    添加
    1
    2
    3
    4
    5
    6
    #nav .menus_items {
        position: absolute;
        width: fit-content;
        left: 50%;
        transform: translateX(-50%);
    }
  2. 子菜单横向居中
    添加
    1
    2
    3
    #nav .menus_items .menus_item:hover .menus_item_child{
      display: flex;
    }
  3. 根据自己的需求修改
    1
    2
    3
    4
    /* 这里的2是代表导航栏的第二个元素，即有子菜单的元素，可以按自己需求修改 */
    .menus_items .menus_item:nth-child(2) .menus_item_child {
        left: -65px;
    }

标签外挂-豆瓣

标签外挂的优点：

  • 可以在文章内使用
  • 可以自由填写内容
  • 可以多个合在一起组成一个页面
    缺点：
  • 需要一个个添加
1
2
3
4
5
6
7
8
9
10
11
<!-- 使用js是为了高亮代码，不必在意 -->
<!-- 参数如下： -->
{% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
<!-- 示例如下： -->
{% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300,4.5,第一次接触这种西方文学小说，刚开始感觉看不懂，断断续续看了很多次。后来越看越觉好看，每次看甚至都需要查“文档”,fa-solid fa-book-open,小说 %}
<!-- 你也可以什么都不填，将会全部使用默认值，如下： -->
{% card %}
<!-- 你也可以省略部分内容，如下： -->
{% card 诡秘之主,https://book.qidian.com/info/1010868264/,https://bookcover.yuewen.com/qdbimg/349573/1010868264/300 %}
<!-- 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
{% card 诡秘之主,,,,,fa-solid fa-book-open,小说 %}

示例

随着Moordale中学的关停，Otis和Eric现在面临着一个新前沿——他们在Cavendish Sixth Form学院的第一天。Otis对建立他的新诊所感到紧张，而Eric则祈祷他们不会再次成为失败者。Cavendish对所有Moordale的学生来说是一场文化冲击——他们自认为进步开明，但这所新学院达到了另一个层面。这里的共享花园有每日瑜珈，有强烈的可持续发展氛围，还有一群因善良而受欢迎的学生？！Viv完全被学院以学生为主导的非竞争性方式所折服，而Jackson仍在努力忘记Cal。Aimee选择了Art A Level课程，想要尝试一些新的东西，Adam则在纠结主流教育是否适合他。美国这边，Maeve在著名的华莱士大学实现着她的梦想，有着一定粉丝群体的作家Thomas Molloy负责指导她。Otis非常想念Maeve，同时适应着自己不再是家... 查看详情
剧集
性爱自修室 第四季

card.js

在\themes\butterfly\scripts\tag文件夹下面新建card.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
/**
 * card
 * {% card name,url,bg,star,text,icon,tag,w,h %}
 * {% card 标题,链接,背景,评分,评价,图标,标签,宽度,高度 %}
 */

'use strict'

// 分数转成星星
function tostar(num) {
    let tmp = ''
    for (let i = 0; i < Math.floor(num); i++) { tmp += '<i class="fa-solid fa-star"></i>' } // 整数部分加实心星星
    if (num - Math.floor(num) != 0) tmp += '<i class="fa-solid fa-star-half-alt"></i>' // 小数部分转成半星
    for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '<i class="fa-regular fa-star"></i>' } // 不够5个补空心星星
    return tmp
}

function card(args) {
    args = args.join(' ').split(',')

    // 获取参数
    let name = (args[0] || '未知').trim()
    let url = (args[1] || '').trim()
    let bg = (args[2] ? `background-image: url(${args[2]});` : 'background-color: #333;').trim()
    let star = tostar(Number(args[3]) || 0)
    let text = (args[4] || '此作品博主暂未作出评价').trim()
    let icon = (args[5] || '').trim()
    let tag = (args[6] || '').trim()
    let w = args[7] || '200px'
    let h = args[8] || '275px'

    return `<div title="${name}" referrerPolicy="no-referrer" class="card_box" style="${bg} width:${w}; height:${h};">
    <div class="card_mask">
      <span>${text}</span>
      ${url?'<a href="'+url+'">查看详情</a>':''}
    </div>
    <div class="card_top">
      <i class="${icon}"></i>
      <span>${tag}</span>
    </div>
    <div class="card_content">
      <span>${name}</span>
      <div>${star}</div>
    </div>
  </div>`
}

hexo.extend.tag.register('card', card, { ends: false })

card.styl

在\themes\butterfly\source\css\_tags文件夹下面新建card.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
.card_box
  display: flex
  justify-content: space-between
  flex-direction: column
  background-position: center
  background-size: cover
  border-radius: 12px
  position: relative
  overflow: hidden
  padding: 10px
  color: #fff !important
  margin: 10px auto
  &::after
    content: ''
    position: absolute
    height: 100%
    width: 100%
    left: 0
    top: 0
    background: rgba(0,0,0,0.1)
    transition: .5s
    z-index: 0
  &:hover
    .card_mask
      opacity: 1
      pointer-events: auto
  .card_top
    display: flex
    z-index: 1
    align-items: center
    justify-content: space-between
  .card_mask
    position: absolute
    pointer-events: none
    z-index: 2
    transition: .5s
    opacity: 0
    width: 100%
    height: 100%
    left: 0
    top: 0
    padding: 20px
    background: #333
    span
      display: block
      height: calc(100% - 40px)
      overflow: auto
    a
      text-align: center
      background: #fff
      color: #333 !important
      border-radius: 5px
      position: absolute
      width: calc(100% - 40px)
      bottom: 20px
      left: 20px
      &:hover
        text-decoration: none !important
        color: white !important
        background: #49b1f5

  .card_content
    z-index: 1
    span
      font-size: 18px
      font-weight: bold

[data-theme='dark']
  .card_box
    color: #ddd !important
    &::after
      background: rgba(0,0,0,0.4)
参数 描述 默认值
标题 作品的名字 未知
链接 作品的详情页，填写后会显示查看详情按钮 无
背景 背景 图片Url（必须是图片，想要实现颜色可自行更改代码） 纯色#333
评分 范围 0-5，可以是小数，如3.5和3.1表示三星半，图标只有半星的） 0
评价 点评内容 此作品博主暂未作出评价
图标 左上角图标，请填写fontawsome图标 无
标签 右上角标签 无
宽度 卡片宽度，需要填单位，如：100px 或 10rem 220px
高度 卡片高度，要求同上 300px

图标

阿里图标iconfont

  • 步骤
  • 选图标
    • 添加到项目
    • 设置彩色或单色
    • 复制图标css代码到/themes/butterfly/source/css
    • 修改导航图标iconfont+图标名修改主题自带的
    • f12调试找到图标名字到/themes/butterfly/layout/includes/mixins下的post-ui.pug文件查找替换iconfont+图标名字
      侧边栏的图标在btf/themes/butterfly/layout/includes/widget下的pug文件都能找到
      本地搜索的图标在/themes/butterfly/layout/includes/header下的nav.pug文件里面修改

圆角

主题/butterfly/source/css/_global/function.styl修改border-radius: 8px;数值

自定义css和js文件

source下创建css和js文件夹
主题文件_config.butterfly.yml里inject引入
非特殊情况head引入cssbottom引入js
示例

1
2
3
4
5
6
7
8
9
10
11
12
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="/css/style.css?1">
    # 静态文件后面加个  ?任意内容  可以在每次更新之后用户自动重新请求.
    # 例如添加 ?1 ,在修改此文件后改成 ?2 ,用户访问你的网站时,不会使用本地的缓存,而是请求新的内容。没修改的话就不用动。
  bottom:
    # 自定义js
    - <script src="/js/script.js?1"></script>
    # 引入多个文件就直接往下复制一行改一下文件名即可，如下：
    - <script src="/js/script1.js?1"></script>
    - <script src="/js/script2.js?1"></script>
教程来源
记录教程来源地址
哔哩哔哩视频美化
哔哩哔哩视频美化
哔哩哔哩视频美化🥂
鼠标样式
鼠标样式
鼠标样式
随便逛逛
随便逛逛
随便逛逛
Butterfly主题页脚美化
Butterfly主题页脚美化
Butterfly主题页脚美化
导航栏居中
导航栏居中
导航栏居中
标签外挂-豆瓣
标签外挂-豆瓣
标签外挂-豆瓣
修改圆角-换图标
修改圆角-换图标
修改圆角-换图标
自定义css和js文件
自定义css和js文件
自定义css和js文件
Butterfly官方文档
Butterfly官方文档
Butterfly官方文档