Butterfly主题魔改教程，实现版权声明美化。


我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：Akilarの糖果屋的《（二创）Copyright-beautify》。

1.说明

本篇教程是转载Akilarの糖果屋的《（二创）Copyright-beautify》的教程贴，记录博客魔改历程，方便以后升级找到回家的路。

2.魔改步骤

  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 + .4, 'rem')

        code
          font-size: unit(fontsize, 'rem')

        &:before
          margin-left: unit((-(fontsize + .2)), 'rem')
          font-size: unit(fontsize, 'rem')

        &:hover
          padding-left: unit(fontsize + .6, 'rem')

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

        &:before
          position: absolute
          top: calc(50% - .35rem)
          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(1)

      h2
        headStyle(.9)

      h3
        headStyle(.8)

      h4
        headStyle(.7)

      h5
        headStyle(.6)

      h6
        headStyle(.6)

      ol,
      ul
        margin-top: .4rem
        padding: 0 0 0 .8rem
        list-style: none
        counter-reset: li

        +maxWidth768()
          padding: 0 0 0 .4rem

        p
          margin: 0 0 .5rem

        ol,
        ul
          padding-left: .6rem

          +maxWidth768()
            padding-left: .2rem

        li
          &:not(.tab)
            position: relative
            margin: .2rem 0

          &:hover
            &:before
              transform: rotate(360deg)

          &:before
            position: absolute
            top: 0
            left: 0
            background: $light-blue
            color: $white
            cursor: pointer
            transition: all .3s ease-out

      ol
        > li
          &:not(.tab)
            padding: .2em .2em .2em 1.8em

          &:before
            margin-top: .65em
            width: w = 1.45em
            height: h = w
            border-radius: .5 * w
            content: counter(li)
            counter-increment: li
            text-align: center
            font-size: .85em
            line-height: h

      ul
        > li:not(.tab)
          padding: .2em .2em .2em 1.4em

          &:hover
            &:before
              border-color: $pseudo-hover

          &:before
            $w = .42em
            top: .78em
            width: w = $w
            height: h = w
            border: .5 * w solid $light-blue
            border-radius: w
            background: transparent
            content: ''
            line-height: h

    no-beautify()
      ol,
      ul
        margin-top: .4rem

        p
          margin: 0 0 .5rem

        ol,
        ul
          padding-left: .5rem

        li
          position: relative
          margin: .3rem 0
          padding-left: .3rem

    #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 .8rem

      p
        margin: 0 0 .8rem

      iframe
        margin: 0 0 1rem

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

        &.post-content
          beautify()
      else
        no-beautify()

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

          &__tags
            display: inline-block
            margin: .4rem .4rem .4rem 0
            padding: 0 .6rem
            width: fit-content
            border: 1px solid $light-blue
            border-radius: .6rem
            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: .4rem 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: 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

        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: 2rem 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

    @keyframes flashlight
      from
        box-shadow 0 0 5px rgb(20, 120, 210)
      to
        box-shadow 0 0 2px rgb(20, 120, 210)

  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: Nesxc # 作者覆写
    copyright_url: https://www.nesxc.com/post/hexocc.html # 原文链接覆写
    license: # 许可协议名称覆写
    license_url: # 许可协议链接覆写
    ---

如有错误，欢迎评论区留言！