魔改前必看（我当你们都懂了，太细节的就不写在教程中了🤣🤣🤣）
1.博客魔改有风险，如果博客魔改出问题了又没有备份，可通过此项目查看基础源码进行回滚：jerryc127/hexo-theme-butterfly、ccknbc-actions/blog-butterfly.这部分魔改基本上都是大佬们造好的轮子，我按照大佬们的轮子结合自己的喜好进行魔改的，如有侵权请联系删除。
2.鉴于每个人的根目录名称都不一样，本帖博客根目录一律以[BlogRoot]指代。
3.本帖涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。
4.因为.pug和.styl以及.yml等对缩进要求较为严格，请尽量不要使用记事本等无法提供语法高亮的文本编辑器进行修改。
5.本帖基于Butterfly主题进行魔改方案编写，因此请读者优先掌握Butterfly主题官方文档的内容后再来进行魔改。
6.魔改会过程常常引入自定义的css与js文件，方法见Hexo博客添加自定义css和js文件(后续引入)
博客搭建与魔改系列教程导航🚥🚥🚥
1.🥬Hexo博客搭建基础教程(一)
2.🍒Hexo博客搭建基础教程(二)
3.🥪Hexo博客搭建基础教程(三)
4.🍀博客魔改教程总结(一) ⇦当前位置🪂
5.🍚博客魔改教程总结(二)
6.🎋博客魔改教程总结(三)
7.🥕博客魔改教程总结(四)
8.🍊博客魔改教程总结(五)

仿轻笑博客背景美化

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑
请查看教程内容

一.前言
因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找

二.教程开始

  1. 在 [BlogRoot]\themes\butterfly\layout\includes\head.pug 中引入 div模块
1
2
#web_bg
#svg_bg
  1. 在自定义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
#web_bg {
    position: fixed;
    z-index: -999;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -moz-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -o-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: -ms-linear-gradient(35deg, #0095c2 21%, #64e1C8f9 100%);
    background: linear-gradient(55deg, #0095c2 21%, #64e1C8f9 100%);
    background-attachment: local;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}
#svg_bg {
    background-image: url(https://www.myxz.top/img/background.svg);
    -webkit-background-size: initial;
    -moz-background-size: initial;
    background-size: initial;
    position: fixed;
    height: 100%;
    width: 100%;
    opacity: .2;
    background-position: center;
    z-index: -998;
}

导航栏居中教程

这里我放当前比较有效的教程

🪧引用站外地址，不保证站点的可用性和安全性
butterfly导航栏修改方案(自用方案)
安知鱼
🪧引用站外地址，不保证站点的可用性和安全性
关于Butterfly的导航栏的一些教程
Ariasakaの小窝
🪧引用站外地址，不保证站点的可用性和安全性
Butterfly的魔改教程：导航栏魔改美化
Meuicat
🪧引用站外地址，不保证站点的可用性和安全性
butterfly导航栏修改方案
莫言小栈

图标引入

这里分为两种不同位置的自定义iconfont图标
导航栏添加

🪧引用站外地址，不保证站点的可用性和安全性
菜单栏多色动态图标（店长）
Fomalhaut🥝
🪧引用站外地址，不保证站点的可用性和安全性
菜单栏多色动态图标
莫言小栈

社交添加

🪧引用站外地址，不保证站点的可用性和安全性
Social卡片彩色图标引入（店长）
Fomalhaut🥝

侧边栏美化以及侧边栏卡片美化（轻笑）

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑
请查看教程内容

  1. 前言
    因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找，喜欢这个风格的可以进行CTRL+C和CTRL+V

  2. 教程开始
    大部分已经有进行标识，对于以后可以进行维护

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
/* 侧边栏整体卡片样式调整 */
#aside-content .card-widget {
    border-width: 2px;
    border-style: solid;
    border-color: rgba(0, 255, 255, 0.6);
    border-image: initial;
    transition: 0.3s;
    background: rgba(255, 255, 255, .67);
}
/* 侧边栏整体卡片文字样式调整 */
#aside-content .card-widget.card-friend-link, .card-webinfo {
    font-size: 105%;
}
/* 侧边栏整体卡片和首页文章列表样式调整 */
#aside-content .card-widget, #recent-posts>.recent-post-item {
    border-radius: 18px;
}
/* 侧边栏本人介绍卡片样式调整 */
.avatar-img {
    border-radius: 25px!important;
    box-shadow: 2.2px 2.2px 2.2px rgba(10, 207, 233, .3)!important;
}
#aside-content > .card-widget:first-child {
    clip-path: polygon(0px 0px, 100% 0px, 100% 50%, 100% 100%, 80% 100%, 75% 99%, 25% 99%, 20% 100%, 0px 100%);
}
#aside-content .card-info .author-info__name {
    font-weight: 800!important;
    font-size: 1.8em!important;
}
#aside-content .card-info .author-info__description {
    margin-top: -.2em!important;
    font-size: 16.5px!important;
    font-weight: 700;
}
.card-info-data-item:not(:last-child)::after {
    opacity: .3;
    position: absolute;
    top: 11px;
    right: 0;
    content: "";
    width: 1px;
    height: 35px;
    background: var(--font-color);
}
.site-data > a .headline {
    color: var(--font-color);
    font-size: 1em!important;
}
.site-data > a .length-num {
    margin-top: -.42em!important;
    color: var(--text-highlight-color);
    font-size: 1.4em!important;
}
/* 侧边栏其他卡片样式调整 */
#aside-content .card-widget:not(.card-info):not(#card-tuijian):before {
    content: "";
    width: 12.5px;
    background: linear-gradient(to top, transparent, #ee6363bb);
    display: block;
    position: absolute;
    left: 0;
    height: 113px;
    bottom: 27px;
}
#aside-content .card-widget:not(.card-info):not(#card-tuijian) {
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 calc(100% - 52.5px), 12.5px calc(100% - 40px), 12.5px calc(100% - 50px), 0 calc(100% - 62.5px), 0 calc(100% - 82.5px), 12.5px calc(100% - 70px), 12.5px calc(100% - 80px), 0 calc(100% - 92.5px), 0 calc(100% - 112.5px), 12.5px calc(100% - 100px), 12.5px calc(100% - 112.5px), 12.5px calc(100% - 110px), 0 calc(100% - 122.5px), 0 calc(100% - 142.5px), 12.5px calc(100% - 130px), 12.5px calc(100% - 141.5px), 0 calc(100% - 154px), 0 0);
    border-left: none !important;
}

首页文章卡片美化（轻笑）

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑
请查看教程内容

  1. 前言
    因为这部分内容轻笑并没有有关于这个内容，所以我在这里写好了，方便以后查找，喜欢这个风格的可以进行CTRL+C和CTRL+V

  2. 在[BlogRoot]\source\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
/* 首页文章卡片样式表调整 */
#recent-posts > .recent-post-item >.recent-post-info > .article-title {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .content {
    text-align: center;
}
/* QCQX 首页文章卡片设置 */
#recent-posts>.recent-post-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    height: 200px
}
@media screen and (max-width: 768px) {
    #recent-posts>.recent-post-item {
        -webkit-box-orient:vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 300px
    }
}
/* QCQX 首页文章卡片设置 */
#recent-posts > .recent-post-item .post_cover img.post_bg {
    border-radius: 12px;
    transform: none;
}

首页添加随机banner（轻笑）

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑

教程地址

🪧引用站外地址，不保证站点的可用性和安全性
Banner随机文章展示(轻笑同款)
莫言小栈

首页文章隐藏文字

效果来源

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑
请查看教程内容

这种隐藏文字的方式可以给大家展示出来，整个效果是非常可观的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#recent-posts>.recent-post-item:hover .recent-post-info .content {
    opacity: 1;
    line-height: 1.5;
    transition: all .3s
}

#recent-posts>.recent-post-item:hover .recent-post-info {
    top: 0;
    transition: all .3s
}

#recent-posts>.recent-post-item>.recent-post-info>.content {
    opacity: 0;
    line-height: .7;
    transition: all .3s;
    bottom: 0
}

首页文章卡片美化

效果来源

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑
请查看教程内容

既然已经添加了文章文字隐藏，那么就可以进行美化文章卡片

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
/* 首页文章卡片颜色 */
#recent-posts>.recent-post-item {
    border: 2px solid rgba(0, 255, 255, .6);
    font-size: 14.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, .67);
}
/* 首页文章卡片的图片样式 */
#recent-posts>.recent-post-item .post_cover img.post_bg:hover {
    transform: none
}
/* 首页文章卡片样式表调整 */
#recent-posts > .recent-post-item >.recent-post-info > .article-title {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .article-meta-wrap {
    text-align: center;
}
#recent-posts > .recent-post-item >.recent-post-info > .content {
    text-align: center;
}
/* QCQX 首页文章卡片设置 */
#recent-posts>.recent-post-item {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    overflow: hidden;
    height: 200px
}
@media screen and (max-width: 768px) {
    #recent-posts>.recent-post-item {
        -webkit-box-orient:vertical;
        -moz-box-orient: vertical;
        -o-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 300px
    }
}
/* QCQX 首页文章卡片设置 */
#recent-posts > .recent-post-item .post_cover img.post_bg {
    border-radius: 12px;
    transform: none;
}
/* 首页文章卡片bar */
#recent-posts>.recent-post-item>.recent-post-info {
    padding: 0 40px;
    width: 57%
}

@media screen and (max-width: 768px) {
    #recent-posts>.recent-post-item>.recent-post-info {
        padding:2px 10px;
        width: 100%
    }
}
.recent-posts .recent-post-item .post-card-bar {
    width: 5px;
    height: 60px;
    margin: auto;
    position: absolute;
    border-radius: 30px
}
.recent-posts .recent-post-item .left+.recent-post-info+.post-card-bar {
    background: #00c4b6b6;
    right: 5px
}
.recent-posts .recent-post-item .right+.recent-post-info+.post-card-bar {
    background: #1dbfffb6;
    left: 5px
}
@media screen and (min-width: 768px) {
    #recent-posts>.recent-post-item .post_cover.left {
        padding:7px 0 7px 7px;
    }

    #recent-posts>.recent-post-item .post_cover.right {
        padding: 7px 7px 7px 0
    }
}

@media screen and (max-width: 768px) {
    .recent-posts .recent-post-item .post-card-bar {
        display:none
    }

    .ai-btn-box {
        justify-content: center
    }

    .ai-recommend .ai-recommend-item {
        width: 100%
    }

    #recent-posts>.recent-post-item .post_cover.left,#recent-posts>.recent-post-item .post_cover.right {
        transition: all .3s;
        padding: 5px 5px 0 5px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s
    }

    #recent-posts>.recent-post-item:hover .post_cover.left,#recent-posts>.recent-post-item:hover .post_cover.right {
        padding: 0
    }

    #recent-posts>.recent-post-item .post_cover img.post_bg {
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s
    }

    #recent-posts>.recent-post-item:hover .post_cover img.post_bg {
        border-radius: 12px 12px 5px 5px;
        -webkit-border-radius: 12px 12px 5px 5px;
        -moz-border-radius: 12px 12px 5px 5px;
        -ms-border-radius: 12px 12px 5px 5px;
        -o-border-radius: 12px 12px 5px 5px
    }
}

首页分类条美化

效果来源

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑
🪧引用站外地址，不保证站点的可用性和安全性
魔改笔记七：分类条及外链卡片
清羽飞扬
请查看教程内容

教程基于清羽飞扬的教程和轻笑的样式进行魔改，感兴趣的可以去看。

  1. 在[BlogRoot]\themes\butterfly\layout\includes中新建categoryBar.pug
1
2
3
4
5
6
7
8
9
.home-catalog-bar#catalog-bar
  i.fa-fw.fas.fa-shapes
  #catalog-list(class=is_home() ? 'home' : '')
    .category-bar-item.catalog-shouye-item(class=is_home() ? 'select' : '', id="home-catalog-item")
      a(href=url_for('/'))= __('博客')
    each item in site.categories.find({ parent: { $exists: false } }).data
      .category-bar-item(class=select ? (select === item.name ? 'select' : '') : '', id=item.name)
        a(href=url_for(item.path))= item.name
  a.category-bar-more(href=url_for('/categories/'))= __('更多分类')
  1. 然后将其添加到不同的位置，比如我这里实现了添加到分类页面等位置，配合上pjax可以做到无刷更新，效果很好，打开分类文件地址：[BlogRoot]\themes\butterfly\layout\category.pug和主页文件地址：[BlogRoot]\themes\butterfly\layout\index.pug，添加其中两行代码，去掉加号即为正常缩进。这个和原教程基本一样

注意：修改后需要将配置文件中，分类页面的主题改成index，否则不会显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
extends includes/layout.pug

block content
  if theme.category_ui == 'index'
    include ./includes/mixins/post-ui.pug
    #recent-posts.recent-posts.category_ui
+      #category-bar.category-bar
+        include includes/categoryBar.pug
      +postUI
      include includes/pagination.pug
  else
    include ./includes/mixins/article-sort.pug
    #category
      <div id="categories-chart" data-parent="true" style="height: 300px; padding: 10px;"></div>
      .article-sort-title= _p('page.category') + ' - ' + page.category
      +articleSort(page.posts)
      include includes/pagination.pug
1
2
3
4
5
6
7
8
9
extends includes/layout.pug

block content
  include ./includes/mixins/post-ui.pug
  #recent-posts.recent-posts
+    #category-bar.category-bar
+      include includes/categoryBar.pug
    +postUI
    include includes/pagination.pug
3. 在[BlogRoot]\source\css\custom.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
/* 首页分类条 */
.layout #recent-posts .home-catalog-bar {
    background: var(--mj-card-bg);
    border: var(--mj-style-border);
    margin-top: 12px;
    border-radius: 11px !important;
    transition: .3s;
    font-size: 15px;
    padding: 5px .8rem;
    animation: slide-in .5s .2s backwards;
    will-change: transform;
    -webkit-animation: slide-in .5s .2s backwards;
}

#catalog-bar {
    padding: .4rem .8rem;
    border-radius: .5rem;
    display: flex;
    border: 1px solid rgba(150, 150, 150, .2);
    justify-content: space-between;
}

#catalog-bar i {
    line-height: inherit;
}

#catalog-list {
    margin: 0 .5rem;
    display: flex;
}

.layout #recent-posts #catalog-bar #home-catalog-item {
    border-radius: .5rem;
}

.layout #recent-posts #catalog-bar .catalog-shouye-item {
    margin-right: 10px;
}

.layout #recent-posts #catalog-bar #home-catalog-item a {
    background: #00c4b6f1;
    color: #fff !important;
    margin: 0 .2em;
    padding: .2em .4em .3em;
    font-weight: 700;
    border-radius: .5rem;
    color: var(--font-color);
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

.catalog-list-item a {
    margin: 0 .2em;
    padding: .2em .4em .3em;
    font-weight: 700;
    border-radius: .5rem;
    color: var(--font-color);
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

.catalog-list-item a {
    margin: 0 .2em;
    padding: .2em .4em .3em;
    font-weight: 700;
    border-radius: .5rem;
    color: var(--font-color);
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    -ms-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

注意：要想实现点击切换后，高亮部分跟随分类页面走的部分，需要修改源码，打开[BlogRoot]\themes\butterfly\source\js\main.js，添加js函数，比如我添加到了778行左右，switchComments函数的上面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
   * 切换类别表
   */ 
  const setCategoryBarActive = () => {
    const categoryBar = document.querySelector("#category-bar");
    const currentPath = decodeURIComponent(window.location.pathname);
    const isHomePage = currentPath === GLOBAL_CONFIG.root;

    if (categoryBar) {
        const categoryItems = categoryBar.querySelectorAll(".category-bar-item");
        categoryItems.forEach(item => item.classList.remove("select"));

        const activeItemId = isHomePage ? "category-bar-home" : currentPath.split("/").slice(-2, -1)[0];
        const activeItem = document.getElementById(activeItemId);

        if (activeItem) {
            activeItem.classList.add("select");
        }
    }
};
  1. 然后再在引用部分执行这个函数，在同一个文件，找到下面的函数并添加函数的调用，位置看下方注释:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.refreshFn = function () {
  initAdjust()

  if (GLOBAL_CONFIG_SITE.isPost) {
    GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
    GLOBAL_CONFIG.relativeDate.post && relativeDate(document.querySelectorAll('#post-meta time'))
  } else {
    GLOBAL_CONFIG.relativeDate.homepage && relativeDate(document.querySelectorAll('#recent-posts time'))
    GLOBAL_CONFIG.runtime && addRuntime()
    addLastPushDate()
    toggleCardCategory()
    setCategoryBarActive()      // 切换类别栏目
  }

底部美化（其他版本）

🪧引用站外地址，不保证站点的可用性和安全性
博客魔改教程总结(四)
Fomalhaut🥝
🪧引用站外地址，不保证站点的可用性和安全性
页脚插件版
Marcus

侧边栏widget

🪧引用站外地址，不保证站点的可用性和安全性
博客魔改教程总结(四)
Fomalhaut🥝
🪧引用站外地址，不保证站点的可用性和安全性
Butterfly 微博热搜侧边栏
Eurkon

底部美化教程（轻笑版本）

原作者

✅来自本站，本站可确保其安全性，请放心点击跳转
轻笑Chuckle
漫天倾尘 风中轻笑

教程地址

🪧引用站外地址，不保证站点的可用性和安全性
底部美化（图标）
莫言小栈

友链朋友圈后端部署

🪧引用站外地址，不保证站点的可用性和安全性
Friend-Circle-Lite:轻量友链朋友圈
liushen
🪧引用站外地址，不保证站点的可用性和安全性
友链朋友圈部署文档
友链朋友圈

友链朋友圈前端部署(旧朋友圈)

🪧引用站外地址，不保证站点的可用性和安全性
友链朋友圈前端部署方案
莫言小栈

主流说说部署

🪧引用站外地址，不保证站点的可用性和安全性
即刻短文的三种部署方案
莫言小栈