Butterfly主题魔改之footer

效果展示

电脑端
手机端

修改页脚处的“By”为跳动的爱心

用编辑器打开 /themes/Butterfly/layout/includes/footer.pug 文件，如图所示：

#footer-wrap
 if theme.footer.owner.enable
   - var now = new Date()
   - var nowYear = now.getFullYear()
   if theme.footer.owner.since && theme.footer.owner.since != nowYear
     .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
   else
     .copyright!= `&copy;${nowYear} By ${config.author}`
 if theme.footer.copyright
   .framework-info
     span= _p('footer.framework') + ' '
     a(href='https://hexo.io')= 'Hexo'
     span.footer-separator |
     span= _p('footer.theme') + ' '
     a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
 if theme.footer.custom_text
   .footer_custom_text!=`${theme.footer.custom_text}`
 if theme.footer.ICP.enable
   .icp
     a(href=theme.footer.ICP.url)
       if theme.footer.ICP.icon
         img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP')
     span=theme.footer.ICP.text

将第8行内容：

.copyright!= `&copy;${nowYear} By ${config.author}`

改为如下内容即可

.copyright!= `&copy; ${nowYear}&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heartbeat"></i>  ${config.author}`

如无其他魔改内容，直接复制下面内容替换原有代码即可：

#footer-wrap
 if theme.footer.owner.enable
   - var now = new Date()
   - var nowYear = now.getFullYear()
   if theme.footer.owner.since && theme.footer.owner.since != nowYear
     .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
   else
     .copyright!= `&copy; ${nowYear}&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heartbeat"></i>  ${config.author}`
 if theme.footer.copyright
   .framework-info
     span= _p('footer.framework') + ' '
     a(href='https://hexo.io')= 'Hexo'
     span.footer-separator |
     span= _p('footer.theme') + ' '
     a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
 if theme.footer.custom_text
   .footer_custom_text!=`${theme.footer.custom_text}`
 if theme.footer.ICP.enable
   .icp
     a(href=theme.footer.ICP.url)
       if theme.footer.ICP.icon
         img.icp-icon(src=url_for(theme.footer.ICP.icon) alt='ICP')
       span=theme.footer.ICP.text

在页脚处添加自定义标签

用编辑器打开 /themes/Butterfly/layout/includes/footer.pug 文件，在最后添加如下代码：
需要注意代码放的位置(两条- - - - -线之间的内容)还有格式和对齐。

if theme.footer.custom_text
  .footer_custom_text!=`${theme.footer.custom_text}`
-------------------------------------------------------
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://hexo.io/', target='_blank', title='由 Hexo 强力驱动', data-pjax-state='')
      span.badge-subject Powered
      span.badge-value.bg-red Hexo 5.2.0
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://github.com/', target='_blank', title='静态网页托管于 GitHub Pages 和 Gitee Pages', data-pjax-state='')
      span.badge-subject Hosted
      span.badge-value.bg-blue GitHub & Gitee
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='http://creativecommons.org/licenses/by-nc-sa/4.0/', target='_blank', title='本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可', data-pjax-state='')
      span.badge-subject
        i.fa.fa-copyright
      span.badge-value.bg-brightgreen BY-NC-SA 4.0
  .github-badge
    a(style='color:#fff', rel='external nofollow noopener noreferrer', href='https://github.com/jerryc127/hexo-theme-butterfly', target='_blank', title='站点使用Butterfly主题dev分支最新版', data-pjax-state='')
      span.badge-subject Theme
      span.badge-value.bg-lightgrey Butterfly 3.3.0-b2
------------------------------------------------------------
if theme.footer.ICP.enable
  .icp
    a(href=theme.footer.ICP.url)
      if theme.footer.ICP.icon
        img.icp-icon(src=url_for(theme.footer.ICP.icon))
      span=theme.footer.ICP.text

在 \themes\butterfly\source\css\ 目录下新建 github-badge.css 文件，内容如下：

/*底部信息*/
.github-badge {
    display:inline-block;
    border-radius:4px;
    text-shadow:none;
    font-size:13px;
    color:#fff;
    line-height:15px;
    margin-bottom:5px;
}
.github-badge a{
    display: inline-block;
    margin: 0 1px 5px;
}
.github-badge .badge-subject {
    display:inline-block;
    background-color:#4D4D4D;
    padding:4px 4px 4px 6px;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
.github-badge .badge-value {
    display:inline-block;
    padding:4px 6px 4px 4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
.github-badge .bg-brightgreen {
    background-color:#4DC820 !important;
}
.github-badge .bg-orange {
    background-color:#FFA500 !important;
}
.github-badge .bg-yellow {
    background-color:#D8B024 !important;
}
.github-badge .bg-blueviolet {
    background-color:#8833D7 !important;
}
.github-badge .bg-pink {
    background-color:#F26BAE !important;
}
.github-badge .bg-red {
    background-color:#e05d44 !important;
}
.github-badge .bg-blue {
    background-color:#007EC6 !important;
}
.github-badge .bg-lightgrey {
    background-color:#9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color:#555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color:#9f9f9f !important;
}

.github-badge .bg-blueviolet {
    background-color: #8833d7;
}

打开主题配置文件_config.butterfly.yml，找到 inject 配置项的 head 引入文件即可。
inject:
head:
- <link rel="stylesheet" href="css/github-badge.css.css">
如有问题请点击邮件或在底下评论与我联系