Butterfly(蝴蝶)主题美化、优化、无修改源码 (持续更新中...)

  |  
字数统计: 2k字   |   阅读时长: 11分

前言

此篇文章会持续随着 Butterfly主题版本更新，如果你喜欢那就 Ctrl+D 吧😉

此次修改无修改源码，全部采用外部引用 JS、CSS 覆盖实现
可放心使用，后期如需主题升级，可直接根据主题作者文档升级即可。

此片文章是根据 Butterfly-Master(稳定版) 分支更新的
如果你使用的是 Buutterfly-Dev(开发版) 的话
遇到的一切问题本贴不给予回复处理

问题

  1. 安装或者切换主题后hexo s 打开http://localhost:4000/后抱错
1
extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug

未安装pug依赖和渲染插件依赖

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

CSS修改

新建Hexo-Butterfly\themes\Butterfly-Master\source\css\Lete.css(css文件名自定义)

自定义字体

1
2
3
4
5
/* 自定义字体 */
@font-face {
    font-family: 'sleek';
    src: url('https://cdn.jsdelivr.net/gh/lete114/CDN2/zaxiang/sleek.woff2');
}

打开主题配置文件，找到

1
2
3
4
5
# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  font-family: 'sleek' # 全局字体
  code-font: 'sleek' # 如果你想让代码块也使用自定义字体

UP酱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 隐藏回到顶部按钮，替换为up酱 */

#go-up i {
    display: none;
    background-color: transparent !important;
}

#go-up {
    background-color: transparent !important;
}

#upj {
    transform: translate(-70px, -80px) !important;
}

目录折叠按钮颜色

也就是左下角的那个按钮

1
2
3
4
5
/* 目录隐藏按钮颜色 */

#toggle-sidebar {
    color: #e58a8a !important;
}

版权去划线

1
2
3
4
5
/* 版权链接去掉下划线 */

.layout_post .post-copyright .post-copyright-info a {
    text-decoration: none;
}

博主昵称颜色

也就是首页侧边栏头像下面那个昵称

1
2
3
4
/* 博主昵称颜色 */
.author-info__name {
    color: #ff7242;
}

评论框样式优化

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
/* 评论框  */

.vwrap {
    box-shadow: 2px 2px 5px #bbb;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 30px;
    margin: 30px 0px 30px 0px;
}


/* 提交按钮 */

#vcomment button {
    padding: 0.3rem 0.8rem;
    border-color: #fff;
    background-color: #e58a8a;
    color: #fff;
    font-size: 0.7rem;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}


/* 评论区代码块 */

.v[data-class=v] code {
    color: #c7254e;
    background-color: #F9F2F4;
}
/* 设置评论框 */

.vcard {
    box-shadow: 2px 2px 5px #bbb;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 30px;
    margin: 30px 0px 0px 0px;
}


/* 取消回复聊天框 */

.vquote .vcard {
    box-shadow: 2px 2px 5px transparent;
    background: rgba(255, 255, 255, 0.0);
    padding: 0px;
}

页脚透明

1
2
3
4
5
/* 页脚透明 */

#footer {
    background: transparent !important;
}

a标签颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* a标签默认颜色 */

#article-container a {
    color: #00c4b6;
    text-decoration: none;
}

/* 鼠标悬停时的颜色 */

#article-container a:hover {
    color: #e58a8a;
    text-decoration: none;
}
/*a标签颜色*/
a {
    color: #00c4b6;
}

首页博客昵称颜色

1
2
3
4
5
6
7
8
/* 首页中间打字效果上方 */
#page-header #site_title {
    color: #80bdab;
}
/* 顶部导航栏 */
#nav a {
    color: #f9f2f4;
}

页脚超链接

1
2
3
4
/*页脚a标签字体颜色*/
#footer-wrap a {
    color: #00c4b6;
}

页脚字体颜色

1
2
3
4
5
/*页脚自定义字段字体颜色*/
/* 也就是配置文件里的footer_custom_text */
.footer_custom_text {
    color: #00c4b6;
}

手机端显示

1
2
3
4
5
6
7
8
/*移动端优化：去除归档、标签、最新文章、公告、、只保留网站统计*/

@media screen and (max-width: 800px) {
    #aside_content div:not(:last-child) {
        display: none;
        font-size: 13px;
    }
}

鼠标样式

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
/* 鼠标图标 */

body {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/Jkll8I.png), auto;
}


/*a标签*/

a:hover {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*按钮*/

button:hover {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

#rightside>div>button,
#rightside>div>a {
    display: block;
    margin-bottom: 2px;
    width: 30px;
    height: 30px;
    color: var(--btn-color);
    text-align: center;
    font-size: 16px;
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 打赏 */

.post-reward .reward-button {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 文章标签 */

.layout_post .tag_share .post-meta__tags {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 评论区 */

.vcol * {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

.v[data-class=v] .vicon {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}

.v[data-class=v] .vbtn {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/* 回复 */

.vat {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*i标签*/

i:hover {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*up酱*/

#upj:hover {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*页脚a标签*/

#footer-wrap a:hover {
    text-decoration: none;
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}


/*分页器*/

#pagination .page-number:hover {
    cursor: url(https://cdn.jsdelivr.net/gh/lete114/CDN@1.0/Use/JkuClT.png), auto;
}
/* 分页器的三个点(...) */
.space {
    color: #00c4b6;
}

滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 滚动条 */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #e58a8a;
    background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 2em;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-moz-selection {
    color: #fff;
    background-color: #e58a8a;
}

打字效果渐变

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
/* 打字效果渐变 */

@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

#subtitle {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#subtitle:before {
    background-color: rgba(0, 0, 0, 0);
}

JS修改

新建Hexo-Butterfly\themes\Butterfly-Master\source\js\Lete.js(js文件名自定义)

UP酱

1
2
3
4
/*添加图片top*/
var top_up = "<img id='upj' class='upj' style='max-width: 1000%; transform: translate(-70px,-70px);' src='https://cdn.jsdelivr.net/gh/lete114/CDN/Use/up.gif' title='回到顶部' >";
/*添加到返回顶部按钮下*/
document.getElementById("go-up").innerHTML += top_up;

手机端

1
2
3
4
5
6
7
8
/* 手机客户端导航栏默认隐藏 */
var mobile_sidebar_menus = document.getElementById("mobile-sidebar-menus");
var menus_item_child = mobile_sidebar_menus.getElementsByClassName("menus_item_child");
var menus_expand = mobile_sidebar_menus.getElementsByClassName("expand");
for (var i = 0; i < menus_item_child.length; i++) {
    menus_item_child[i].style.display = "none";
    menus_expand[i].className += " closed";
}

卖萌标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 可爱的Title
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/favicon.ico");
        document.title = '(つェ⊂) 我藏好了哦~~';
        clearTimeout(titleTime);
    } else {
        $('[rel="icon"]').attr('href', "/img/favicon.ico");
        document.title = '(*´∇｀*) 被你发现啦~~' + OriginTitle;
        titleTime = setTimeout(function() {
            document.title = OriginTitle;
        }, 2000);
    }
});

气泡

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
// 气泡
function qipao() {
    $('#page-header').circleMagic({
        radius: 10,
        density: .2,
        color: 'rgba(255,255,255,.4)',
        clearOffset: 0.99
    });
}! function(p) {
    p.fn.circleMagic = function(t) {
        var o, a, n, r, e = !0,
            i = [],
            d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
            l = this[0];

        function c() { e = !(document.body.scrollTop > a) }

        function s() { o = l.clientWidth, a = l.clientHeight, l.height = a + "px", n.width = o, n.height = a }

        function h() {
            if (e)
                for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
            requestAnimationFrame(h)
        }

        function f() {
            var t = this;

            function e() { t.pos.x = Math.random() * o, t.pos.y = a + 100 * Math.random(), t.alpha = .1 + Math.random() * d.clearOffset, t.scale = .1 + .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" + Math.floor(255 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.random().toPrecision(2) + ")" : t.color = d.color }
            t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
        }! function() {
            o = l.offsetWidth, a = l.offsetHeight,
                function() {
                    var t = document.createElement("canvas");
                    t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
                }(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
            for (var t = 0; t < o * d.density; t++) {
                var e = new f;
                i.push(e)
            }
            h()
        }(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
    }
}(jQuery);

// 调用气泡方法
qipao();

页脚博主

1
2
3
$(document).ready(function(e) {
    $('.copyright').html('©2020 <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;" class="fa fa-heartbeat"></i> Lete乐特');
});

引入

打开主题配置文件找到inject
在bottom下添加

1
2
3
bottom:
  - <link rel="stylesheet" href="https://blog.lete114.top/css/Lete.css">
  - <script data-pjax src="https://blog.lete114.top/js/Lete.js"></script>

持续更新…

CSS:https://blog.lete114.top/css/Lete.css
JS:https://blog.lete114.top/js/Lete.js

文章作者: Lete乐特
文章链接: https://yilia.lete114.top/article/Butterfly-config.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特 's Blog ！
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
评论
载入天数...载入时分秒...
本站总访问量次 |

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true