前言

美化之前

美化的时候需要修改网站的源文件、添加样式、js之类的，需要一点基础，可以参考

引用站外地址
Hexo博客添加自定义css和js文件
Leonus

在添加完js、css后，一定要记得在_config.butterfly.yml的inject里引用

引用站外地址
Butterfly自用全局变量
June's Blog

效果

见文章底部，我去除了分享功能

参考亦封佬的效果

参考链接

样式是参考（爬自）亦小封佬的

引用站外地址
爱吃肉的猫
有肉有猫有生活

修改方案

1. 修改post.pug

修改[blogRoot]\themes\butterfly\layout\post.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
block content
  #post
    if top_img === false
      include includes/header/post-info.pug

    article#article-container.post-content!=page.content
    include includes/post/post-copyright.pug
-    .tag_share
+    .post_function
+      .post_function_box
+        if theme.reward.enable && theme.reward.QR_code
+          !=partial('includes/post/reward', {}, {cache: true})
+        a.post-privacy-btn(href='/privacy/')
+          i.fa.fa-lock
+          | 版权声明
      if (theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
-      include includes/third-party/share/index.pug
        
-    if theme.reward.enable && theme.reward.QR_code
-      !=partial('includes/post/reward', {}, {cache: true})

完整代码

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
extends includes/layout.pug

block content
  #post
    if top_img === false
      include includes/header/post-info.pug

    article#article-container.post-content!=page.content
    include includes/post/post-copyright.pug
    .post_function
      .post_function_box
        if theme.reward.enable && theme.reward.QR_code
          !=partial('includes/post/reward', {}, {cache: true})
        a.post-privacy-btn(href='/privacy/')
          i.fa.fa-lock
          | 版权声明
      if (theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]

    //- ad
    if theme.ad && theme.ad.post
      .ads-wrap!=theme.ad.post

    if theme.post_pagination
      include includes/pagination.pug
    if theme.related_post && theme.related_post.enable
      != related_posts(page,site.posts)

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

2. 修改post.styl

修改[blogRoot]\themes\butterfly\source\css\_layout\post.styl，第158行左右，将.tag_share替换为.post_function

1
2
3
4
5
6
7
#post
-  .tag_share
+  .post_function
    &:after
      display: block
      clear: both
      content: ''

3. 添加样式

标签的icon是从iconfont-阿里巴巴矢量图标库找的，自行修改哦

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
/* 文章底栏打赏分享样式 */
.post_function {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.post_function_box{
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-reward {
    margin-top: 0 !important;
    width: auto !important;
}

.post-reward .reward-button {
    background: #2ECC71;
    border-radius: 8px;
}

#post .post_function .post_function_box .post-privacy-btn {
    display: flex;
    color: var(--june-white);
    background-color: #3498DB;
    height: 40px;
    border-radius: 8px;
    align-items: center;
    padding: 0 24px;
    gap: 6px;
}

.post-meta__tag-list {
    display: flex !important;
    gap: 10px;
    margin-left: auto;
}

.post_function > .post-meta__tag-list > .post-meta__tags {
    display: flex !important;
    height: 40px;
    border-radius: 8px !important;
    align-items: center;
    margin: 0 !important;
    border: var(--style-border) !important;
    color: var(--font-color) !important;
}

.post-meta__tags:before {
    content: "\e661";
    font-family: iconfont!important;
    font-size: 12px;
    opacity: .4;
    padding-right: 2px
}

.post-reward:hover .reward-button,
.post_function .post_function_box .post-privacy-btn:hover,
.post_function > .post-meta__tag-list > .post-meta__tags:hover {
    color: var(--june-white) !important;
    background-color: var(--june) !important;
    transition: all .6s ease 0s;
}

#pagination.pagination-post{
    margin-top: 20px !important;
}

.post-reward .reward-main .reward-all {
    display: flex !important;
    background: white !important;
    border-radius: 8px;
    border: 1px solid transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.post-reward .reward-main .reward-all:before {
    display: none !important;
}

.post-reward .reward-main .reward-all:hover {
    border: 1px solid var(--june);
}

.post-reward .reward-main {
    width: auto !important;
}

@media (max-width: 768px) {
    .post_function {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .post-meta__tag-list{
        margin-bottom: 18px;
        margin-left: 0;
    }

    .post-reward {
        display: flex !important;
    }
}