版权样式修改

本文修改主题为Butterfly主题，若使用其他主题，请自行确认修改位置。

原文出处

https://akilar.top/posts/8322f8e6/

效果预览

修改步骤

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

   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

2. 修改[Blogroot]\themes\butterfly\source\css\_layout\post.styl,直接复制以下内容，替换原文件。

   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-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: 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-color #07080a
         text-shadow #bfbeb8 0 0 2px
         border 1px solid rgb(19 18 18 / 35%)
         box-shadow 0 0 5px rgb(20, 120, 210)
         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

3. 默认项的配置

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

   # Site
   title: Akilarの糖果屋
   subtitle: Akilar.top
   description:
   keywords:
   author: Akilar #默认作者
   language: zh-CN
   timezone: ''

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

   post_copyright:
   enable: true
   decode: true
   license: CC BY-NC-SA 4.0
   license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

4. 页面覆写配置项，修改对应文章的front-matter

   ---
   title: Copyright-beautify # 文章名称
   date: 2021-03-02 13:52:46 # 文章发布日期
   updated: 2021-03-02 13:52:46 # 文章更新日期
   copyright_author: RandomEnch # 作者覆写
   copyright_url: https://blog.randench.cn/ # 原文链接覆写
   license: # 许可协议名称覆写
   license_url: # 许可协议链接覆写
   ---