本帖内容基本全部来自于Nesxc的原帖,仅针对两处地方做了微调,将魔改范围局限于两个文件内部。将外链CSS的引入过程也加入到styl文件中,针对存在偏移隐患的表格宽度做了自适应适配。同时增加两个变量,以配合Butterfly的原生主题配置中的licenselicense_url配置项。添加了一些阴影效果增加质感。

资源下载

由于本教程涉及的所有修改对缩进格式等有严格要求,担心自己控制不好的可以直接下载静态资源。参照教程进行修改。

修改步骤

  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中的licenselicense_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: # 许可协议链接覆写
    ---