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

效果

点击查看效果
  • 修改前:

  • 修改后:

教程

参考:(二创)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中的licenselicense_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://www.ttiee.tech/ # 原文链接覆写
    license: # 许可协议名称覆写
    license_url: # 许可协议链接覆写
    ---