前言 {#前言}

不知道大家对于默认的butterfly版权怎么看？如果不太满意可以按照如下教程进行美化。

教程 {#教程}

修改post-copyright.pug {#修改post-copyright-pug}

打开ROOT\themes\butterfly\layout\includes\post文件夹，将下列代码覆盖post-copyright.pug文件

|------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | 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 .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(style="display: inline-block;width: 120px") h 作者 .post-copyright-cc-info h=author .post-copyright-c(style="display: inline-block;width: 120px") h 发布于 .post-copyright-cc-info h=date(page.date, config.date_format) .post-copyright-u(style="display: inline-block;width: 120px") h 更新于 .post-copyright-cc-info h=date(page.updated, config.date_format) .post-copyright-c(style="display: inline-block;width: 120px") 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='CC BY 4.0' href='https://creativecommons.org/licenses/by/4.0/deed.zh') CC BY 4.0 |

注意，是覆盖，不是增加！

修改post.styl {#修改post-styl}

打开ROOT\themes\butterfly\source\css_layout文件夹，修改post.styl文件

修改范围：.post-copyright至.post-outdate-notice
diff模式.

|---------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | .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 - @extend .fontawesomeIcon - position: absolute - top: .1rem - right: .6rem - color: $theme-color - content: '\f1f9' - font-size: 1rem + 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: underline + 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 |

修改后的结果：

|------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | .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 |

自定义css {#自定义css}

新建copyright.css，适配夜间模式和美化字体样式

|---------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | [data-theme="dark"] #post .post-copyright { background-color: rgb(7 8 10); text-shadow: #bfbeb8 1px 0 4px; } [data-theme="dark"] #post .post-copyright { border: 1px solid rgb(19 18 18 / 35%); } [data-theme="dark"] .post-copyright-info { color: #e0e0e4; } #post .post-copyright__title{ font-size:22px; } #post .post-copyright__notice{ font-size:15px; } |

放入ROOT\themes\butterfly\source\css

配置主题文件 {#配置主题文件}

|-----------------|----------------------------------------------------------------------------------| | 1 2 3 4 | inject: head - <link rel="stylesheet" href="/css/copyright.css"> bottom: |

参考链接：https://www.imcharon.com/117/