前言

没找到什么太好的美化教程，所以扒了一下源，页面大部分参考自Heo，在他的基础上修改了一下，做了一个适合自己的，CSS格式不通用，按需修改。修改过程如下：

重写post-copyright.pug文件

文件位置：Blog\themes\butterfly\layout\includes\post\

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
if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author || config.author
  - let authorHref = page.copyright_author_href || theme.post_copyright.author_href || config.url
  - let url = page.copyright_url || page.permalink
  - let info = page.copyright_info || _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
  .post-copyright
    .post-copyright__author
      a.post-copyright__original(title="本文为原创文章，著作权归Beerlee所有") 原创
      a.post-copyright-title(href=url_for(url))
        span=pageTitle
    .post-copyright-info-box
      span.post-copyright-meta
        i.fas.fa-circle-user.fa-fw
        = _p('post.copyright.author') + ": "
      span.post-copyright-info
      a.link(href=authorHref)=author
    .post-copyright__type
      span.post-copyright-meta
        i.fas.fa-square-arrow-up-right.fa-fw
        = _p('post.copyright.link') + ": "
      span.post-copyright-info
        a.link(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright__notice
      span.post-copyright-meta
        i.fas.fa-circle-exclamation.fa-fw
        = _p('post.copyright.copyright_notice') + ": "
      span.post-copyright-info!= '转载前请认真阅读本站 <a href="/agreement">版权协议</a>，文章采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" > CC BY-NC-SA 4.0 许可协议</a>'

引入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
#post .post-copyright {
    padding: 1rem 1.3rem;
    overflow: hidden;
    border: var(--style-border);
    border-width: 1px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    -ms-transition: .3s;
    transition: .3s;
    position: relative;
    margin: 2rem 0 .5rem;
    border-radius: 12px
}

@media screen and (max-width: 768px) {
    #post .post-copyright {
        margin:0
    }
}

#post .post-copyright .post-copyright__notice a,#post .post-copyright a.link {
    font-weight: 500;
    border-bottom: solid 2px var(--anzhiyu-lighttext);
    color: var(--anzhiyu-fontcolor);
    padding: 0 .2em;
    text-decoration: none
}

#post .post-copyright .post-copyright__notice a:hover,#post .post-copyright a.link:hover {
    color: var(--anzhiyu-white);
    background-color: var(--anzhiyu-main);
    border-radius: 4px
}

#post .post-copyright__author {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

#post .post-copyright__original,#post .post-copyright__reprint {
    background: var(--anzhiyu-main);
    color: var(--anzhiyu-card-bg);
    padding: .2rem 1rem;
    font-size: .8rem;
    border-radius: 8px;
    margin-right: .5rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

#post .post-copyright .anzhiyufont.anzhiyu-icon-copyright {
    position: absolute;
    font-size: 1.3em;
    top: -71px;
    right: -20px;
    font-size: 8.3em;
    z-index: -1;
    color: var(--anzhiyu-main)
}

@media screen and (min-width: 1365px) {
    #post .post-copyright .anzhiyufont.anzhiyu-icon-copyright {
        z-index:0
    }
}

#post .post-copyright:hover {
    -webkit-box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5);
    box-shadow: 0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)
}

#post .post-copyright .post-copyright-title {
    color: var(--fontcolor);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

#post .post-copyright .post-copyright-meta {
    color: var(--anzhiyu-main);
    font-weight: 700;
    min-width: 75px
}

#post .post-copyright .post-copyright-info {
    padding-left: 6px
}

#post .post-copyright .post-copyright-info a {
    word-break: break-word
}

#post .post-copyright .post-copyright-info a:hover {
    text-decoration: none
}



#post .post-copyright::before
{
  background: var(--heo-post-blockquote-bg);
  position: absolute;
  right: -26px;
  top: -120px;
  content: '\f25e';
  font-size: 200px;
  font-family: 'Font Awesome 5 Brands';
  opacity: 0.2;

}