前言

不知道大家对于默认的butterfly版权怎么看？如果不太满意可以按照如下教程进行美化。

教程

打开ROOT\themes\butterfly\layout\includes\post文件夹，将下列代码覆盖post-copyright.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
if theme.post_copyright.enable && page.copyright !== false
  - let author = page.copyright_author ? page.copyright_author : config.author
  - let url = page.copyright_url ? page.copyright_url : page.permalink
  .post-copyright
    .post-copyright__title
      span.post-copyright-info
        h #[=page.title]
    .post-copyright__type
      span.post-copyright-info
        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-a(style="display: inline-block;width: 120px")
            h 作者
            .post-copyright-cc-info
                h=author
        .post-copyright-c(style="display: inline-block;width: 120px")
            h 发布于
            .post-copyright-cc-info
                h=date(page.date, config.date_format)
        .post-copyright-u(style="display: inline-block;width: 120px")
            h 更新于
            .post-copyright-cc-info
                h=date(page.updated, config.date_format)
        .post-copyright-c(style="display: inline-block;width: 120px")
            h 许可协议
            .post-copyright-cc-info
                a.icon(rel='noopener' target='_blank' title='Creative Commons' href='https://creativecommons.org/')
                  i.fab.fa-creative-commons
                a(rel='noopener' target='_blank' title='CC BY 4.0' href='https://creativecommons.org/licenses/by/4.0/deed.zh') CC BY 4.0

注意，是覆盖，不是增加！

修改post.styl

打开ROOT\themes\butterfly\source\css_layout文件夹，修改post.styl文件

修改范围：.post-copyright至.post-outdate-notice
diff模式.

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
  .post-copyright
    position: relative
    margin: 2rem 0 .5rem
    padding: .5rem .8rem
    border: 1px solid var(--light-grey)
    transition: box-shadow .3s ease-in-out
+   overflow: hidden
+   border-radius: 12px!important
+   background-color: rgb(239 241 243)
    &:before
-     @extend .fontawesomeIcon
-     position: absolute
-     top: .1rem
-     right: .6rem
-     color: $theme-color
-     content: '\f1f9'
-     font-size: 1rem
+     position absolute
+     right -26px
+     top -120px
+     content '\f25e'
+     font-size 200px
+     font-family 'Font Awesome 5 Brands'
+     opacity .2
    &:hover
      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
    .post-copyright
      &-meta
        color: $light-blue
        font-weight: bold
      &-info
        padding-left: .3rem
        a
-         text-decoration: underline
+         text-decoration: none
          word-break: break-word
          &:hover
            text-decoration: none
+ .post-copyright-cc-info
+   color: $theme-color;
  .post-outdate-notice
    position: relative
    margin: 0 0 1rem
    padding: .5em 1.2em
    border-radius: 15px
    background-color: $noticeOutdate-bg
    color: $noticeOutdate-color

修改后的结果：

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
.post-copyright
  position: relative
  margin: 2rem 0 .5rem
  padding: .5rem .8rem
  border: 1px solid var(--light-grey)
  transition: box-shadow .3s ease-in-out
  overflow: hidden
  border-radius: 12px!important
  background-color: rgb(239 241 243)
  &: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 .2
  &:hover
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
  .post-copyright
    &-meta
      color: $light-blue
      font-weight: bold
    &-info
      padding-left: .3rem
      a
        text-decoration: none
        word-break: break-word
        &:hover
          text-decoration: none
.post-copyright-cc-info
  color: $theme-color;
.post-outdate-notice
  position: relative
  margin: 0 0 1rem
  padding: .5em 1.2em
  border-radius: 15px
  background-color: $noticeOutdate-bg
  color: $noticeOutdate-color

自定义css

新建copyright.css，适配夜间模式和美化字体样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
[data-theme="dark"]
  #post .post-copyright {
    background-color: rgb(7 8 10);
    text-shadow: #bfbeb8 1px 0 4px;
  }
[data-theme="dark"]
  #post .post-copyright {
    border: 1px solid rgb(19 18 18 / 35%);
  }
[data-theme="dark"]
  .post-copyright-info {
    color: #e0e0e4;
  }
#post .post-copyright__title{
    font-size:22px;
}
#post .post-copyright__notice{
    font-size:15px;
}

放入ROOT\themes\butterfly\source\css

配置主题文件

1
2
3
4
inject:
  head
    - <link rel="stylesheet" href="/css/copyright.css">
  bottom:

参考链接：https://www.imcharon.com/117/