魔改有风险，请提前做好备份

效果

点击查看效果

  • 修改前：

  • 修改后：

教程

参考：（二创）Copyright-beautify
博客魔改教程总结(二)

  1. 修改[BlogRoot]\themes\butterfly\layout\includes\post\post-copyright.pug,直接复制以下内容替换原文件内容。此处多次用到了三元运算符作为默认项设置，在确保有主题配置文件的默认项的情况下，也可以在相应文章的front-matter中重新定义作者，原文链接，开源许可协议等内容。

    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
    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
      - let license = page.license ? page.license : theme.post_copyright.license
      - let license_url = page.license_url ? page.license_url : theme.post_copyright.license_url
      .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
                h 作者
                .post-copyright-cc-info
                    h=author
            .post-copyright-c
                h 发布于
                .post-copyright-cc-info
                    h=date(page.date, config.date_format)
            .post-copyright-u
                h 更新于
                .post-copyright-cc-info
                    h=date(page.updated, config.date_format)
            .post-copyright-c
                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=license href=url_for(license_url))=license
    点击查看post-copyright.pug原本内容
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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
          span.post-copyright-meta= _p('post.copyright.author') + ": "
          span.post-copyright-info
            a(href=authorHref)=author
        .post-copyright__type
          span.post-copyright-meta= _p('post.copyright.link') + ": "
          span.post-copyright-info
            a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
        .post-copyright__notice
          span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
          span.post-copyright-info!= info

  2. 修改[BlogRoot]\themes\butterfly\source\css\_layout\post.styl,直接复制以下内容，替换原文件，这个文件就是自己调节样式的。其中，184行是白天模式的背景色，这里默认是我网站的渐变色，大家可以根据自己的喜好调节；253行是夜间模式的发光光圈颜色，大家也可以自行替换成自己喜欢的颜色：

    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    beautify()
      headStyle(fontsize)
        padding-left: unit(fontsize + 12, 'px')

        &:before
          margin-left: unit((-(fontsize + 6)), 'px')
          font-size: unit(fontsize, 'px')

        &:hover
          padding-left: unit(fontsize + 18, 'px')

      h1,
      h2,
      h3,
      h4,
      h5,
      h6
        transition: all .2s ease-out

        &:before
          position: absolute
          top: calc(50% - 7px)
          color: $title-prefix-icon-color
          content: $title-prefix-icon
          line-height: 1
          transition: all .2s ease-out
          @extend .fontawesomeIcon

        &:hover
          &:before
            color: $light-blue

      h1
        headStyle(20)

      h2
        headStyle(18)

      h3
        headStyle(16)

      h4
        headStyle(14)

      h5
        headStyle(12)

      h6
        headStyle(12)

      ol,
      ul
        p
          margin: 0 0 8px

      li
        &::marker
          color: $light-blue
          font-weight: 600
          font-size: 1.05em

        &:hover
          &::marker
            color: var(--pseudo-hover)

      ul > li
        list-style-type: circle

    #article-container
      word-wrap: break-word
      overflow-wrap: break-word

      a
        color: $theme-link-color

        &:hover
          text-decoration: underline

      img
        display: block
        margin: 0 auto 20px
        max-width: 100%
        transition: filter 375ms ease-in .2s

      p
        margin: 0 0 16px

      iframe
        margin: 0 0 20px

      if hexo-config('anchor')
        a.headerlink
          &:after
            @extend .fontawesomeIcon
            float: right
            color: var(--headline-presudo)
            content: '\f0c1'
            font-size: .95em
            opacity: 0
            transition: all .3s

          &:hover
            &:after
              color: var(--pseudo-hover)

        h1,
        h2,
        h3,
        h4,
        h5,
        h6
          &:hover
            a.headerlink
              &:after
                opacity: 1

      ol,
      ul
        ol,
        ul
          padding-left: 20px

        li
          margin: 4px 0

        p
          margin: 0 0 8px

      if hexo-config('beautify.enable')
        if hexo-config('beautify.field') == 'site'
          beautify()
        else if hexo-config('beautify.field') == 'post'
          &.post-content
            beautify()

      > :last-child
        margin-bottom: 0 !important

    #post
      .tag_share
        .post-meta
          &__tag-list
            display: inline-block

          &__tags
            display: inline-block
            margin: 8px 8px 8px 0
            padding: 0 12px
            width: fit-content
            border: 1px solid $light-blue
            border-radius: 12px
            color: $light-blue
            font-size: .85em
            transition: all .2s ease-in-out

            &:hover
              background: $light-blue
              color: var(--white)

        .post_share
          display: inline-block
          float: right
          margin: 8px 0
          width: fit-content

          .social-share
            font-size: .85em

            .social-share-icon
              margin: 0 4px
              width: w = 1.85em
              height: w
              font-size: 1.2em
              line-height: w

      .post-copyright
        position: relative
        margin: 40px 0 10px
        padding: 10px 16px
        border: 1px solid var(--light-grey)
        transition: box-shadow .3s ease-in-out
        overflow: hidden
        border-radius: 12px!important
        background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf);

        &: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: 6px

            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 20px
        padding: .5em 1.2em
        border-radius: 3px
        background-color: $noticeOutdate-bg
        color: $noticeOutdate-color

        if hexo-config('noticeOutdate.style') == 'flat'
          padding: .5em 1em .5em 2.6em
          border-left: 5px solid $noticeOutdate-border

          &:before
            @extend .fontawesomeIcon
            position: absolute
            top: 50%
            left: .9em
            color: $noticeOutdate-border
            content: '\f071'
            transform: translateY(-50%)

      .ads-wrap
        margin: 40px 0
    .post-copyright-m-info
      .post-copyright-a,
      .post-copyright-c,
      .post-copyright-u
        display inline-block
        width fit-content
        padding 2px 5px
    [data-theme="dark"]
      #post
        .post-copyright
          background #07080a
          text-shadow #bfbeb8 0 0 2px
          border 1px solid rgb(19 18 18 / 35%)
          box-shadow 0 0 5px var(--theme-color)
          animation flashlight 1s linear infinite alternate
      .post-copyright-info
        color #e0e0e4

    #post
      .post-copyright__title
        font-size 22px
      .post-copyright__notice
        font-size 15px
      .post-copyright
        box-shadow 2px 2px 5px
    点击查看post.styl原本内容
    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
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    beautify()
      headStyle(fontsize)
        padding-left: unit(fontsize + 12, 'px')

        &:before
          margin-left: unit((-(fontsize + 6)), 'px')
          font-size: unit(fontsize, 'px')

        &:hover
          padding-left: unit(fontsize + 18, 'px')

      h1,
      h2,
      h3,
      h4,
      h5,
      h6
        transition: all .2s ease-out

        &:before
          position: absolute
          top: calc(50% - 7px)
          color: $title-prefix-icon-color
          content: $title-prefix-icon
          line-height: 1
          transition: all .2s ease-out
          @extend .fontawesomeIcon

        &:hover
          &:before
            color: $light-blue

      h1
        headStyle(20)

      h2
        headStyle(18)

      h3
        headStyle(16)

      h4
        headStyle(14)

      h5
        headStyle(12)

      h6
        headStyle(12)

      ol,
      ul
        p
          margin: 0 0 8px

      li
        &::marker
          color: $light-blue
          font-weight: 600
          font-size: 1.05em

        &:hover
          &::marker
            color: var(--pseudo-hover)

      ul > li
        list-style-type: circle

    #article-container
      word-wrap: break-word
      overflow-wrap: break-word

      a
        color: $theme-link-color

        &:hover
          text-decoration: underline

      img
        display: block
        margin: 0 auto 20px
        max-width: 100%
        transition: filter 375ms ease-in .2s

      p
        margin: 0 0 16px

      iframe
        margin: 0 0 20px

      kbd
        margin: 0 3px
        padding: 3px 5px
        border: 1px solid #b4b4b4
        border-radius: 3px
        background-color: #f8f8f8
        box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 2px 1px 0 rgba(255, 255, 255, .6) inset
        color: #34495e
        white-space: nowrap
        font-weight: 600
        font-size: .9em
        font-family: Monaco, 'Ubuntu Mono', monospace
        line-height: 1em

      if hexo-config('anchor.button.enable')
        a.headerlink
          &:after
            @extend .fontawesomeIcon
            float: right
            color: var(--headline-presudo)
            content: $archor-button-icon
            font-size: .95em
            transition: all .3s

          &:hover
            &:after
              color: var(--pseudo-hover)

        if !hexo-config('anchor.button.always_show')
          a.headerlink
            &:after
              opacity: 0

          h1,
          h2,
          h3,
          h4,
          h5,
          h6
            &:hover
              a.headerlink
                &:after
                  opacity: 1

      ol,
      ul
        ol,
        ul
          padding-left: 20px

        li
          margin: 4px 0

        p
          margin: 0 0 8px

      if hexo-config('beautify.enable')
        if hexo-config('beautify.field') == 'site'
          beautify()
        else if hexo-config('beautify.field') == 'post'
          &.post-content
            beautify()

      > :last-child
        margin-bottom: 0 !important

    #post
      .tag_share
        &:after
          display: block
          clear: both
          content: ''

        .post-meta
          &__tag-list
            display: inline-block

          &__tags
            display: inline-block
            margin: 8px 8px 8px 0
            padding: 0 12px
            width: fit-content
            border: 1px solid $light-blue
            border-radius: 12px
            color: $light-blue
            font-size: .85em
            transition: all .2s ease-in-out

            &:hover
              background: $light-blue
              color: var(--white)

        .post_share
          display: inline-block
          float: right
          margin: 8px 0 0
          width: fit-content

          .social-share
            font-size: .85em

            .social-share-icon
              margin: 0 4px
              width: w = 1.85em
              height: w
              font-size: 1.2em
              line-height: w

      .post-copyright
        position: relative
        margin: 40px 0 10px
        padding: 10px 16px
        border: 1px solid var(--light-grey)
        transition: box-shadow .3s ease-in-out

        &:before
          @extend .fontawesomeIcon
          position: absolute
          top: 2px
          right: 12px
          color: $theme-color
          content: '\f1f9'
          font-size: 1.3em

        &: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: 6px

            a
              text-decoration: underline
              word-break: break-word

              &:hover
                text-decoration: none

      .post-outdate-notice
        position: relative
        margin: 0 0 20px
        padding: .5em 1.2em
        border-radius: 3px
        background-color: $noticeOutdate-bg
        color: $noticeOutdate-color

        if hexo-config('noticeOutdate.style') == 'flat'
          padding: .5em 1em .5em 2.6em
          border-left: 5px solid $noticeOutdate-border

          &:before
            @extend .fontawesomeIcon
            position: absolute
            top: 50%
            left: .9em
            color: $noticeOutdate-border
            content: '\f071'
            transform: translateY(-50%)

      .ads-wrap
        margin: 40px 0

  3. 默认项的配置

  • 作者：[BlogRoot]\_config.yml中的author配置项

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: 神奇的妙妙屋
    subtitle: '个人分享'
    description: '一个高三赶考生'
    keywords:
    author: 神奇
    language: zh-CN
    timezone: ''

  • 许可协议：[BlogRoot]\_config.butterfly.yml中的license和license_url配置项

    1
    2
    3
    4
    5
    post_copyright:
      enable: true
      decode: true
      license: CC BY-NC-SA 4.0
      license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
  1. 页面覆写配置项，修改对应文章的front-matter
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    title: butterfly渐变色版权美化 # 文章名称
    date: 2023-01-03 14:37:46 # 文章发布日期
    updated: 2023-01-03 14:37:46 # 文章更新日期
    copyright_author: 神奇 # 作者覆写
    copyright_url: https://tt3.pages.dev/ # 原文链接覆写
    license: # 许可协议名称覆写
    license_url: # 许可协议链接覆写
    ---