butterfly页脚美化

首先页脚透明+会动的红心

\themes\Butterfly\source\css_layout\footer.styl 文件把background: $light-blue注释掉即可

themes\Butterfly\layout\includes\footer.pug 更改如下

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

参考小嘉大佬blog后更改的。
主要是增加页脚部分框架，主题等说明性的美化标签。
效果图：

附上代码 themes\butterfly\layout\includes\footer.pug
以留作参考，供日后修改。

.framework-info
      span.footer-separator 
      a(href='https://hexo.io')
        img(src=url_for(theme.footer.icon1) title='博客框架为Hexo' alt='hexo' data-ll-status='loading' class='entered loading')
      span.footer-separator 
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')
        img(src=url_for(theme.footer.icon2) title='主题采用butterfly' alt='主题采用butterfly' data-ll-status='loading' class='entered loading')
      span.footer-separator 
      a(href=url_for(theme.footer.owner.url))   
        img(src=url_for(theme.footer.icon3) title='本站项目由Gitee托管' alt='gitee托管' data-ll-status='loading' class='entered loading')
      span.footer-separator
      a(href='https://www.jsdelivr.com/') 
        img(src=url_for(theme.footer.icon4) title='本站使用JsDelivr为静态资源提供CDN加速' alt='jsd加速' data-ll-status='loading' class='entered loading')
      span.footer-separator
      a(href='http://creativecommons.org/licenses/by-nc-sa/4.0/') 
        img(src=url_for(theme.footer.icon5) title='本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可' alt='协议' data-ll-status='loading' class='entered loading')

yml修改。


footer:
  owner: 
    enable: true
    since: 2020
    url: https://gitee.com/darktom
  icon1: https://img.shields.io/badge/Frame-Hexo-blue?style=plastic&logo=hexo
  icon2: https://img.shields.io/badge/Theme-Butterfly-6513df?style=plastic&amp&logo=bitdefender
  icon3: https://img.shields.io/badge/Source-Gitee-d021d6?style=plastic&logo=Git
  icon4: https://img.shields.io/badge/CDN-jsDelivr-orange?style=plastic&amp&logo=jsDelivr
  icon5: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=plastic&amp&logo=Claris
  custom_text: Hi, welcome to my <a href="https://darktom.gitee.io/">blog</a>!
  copyright: true # Copyright of theme and framework

当然要想自己制作类似标签(徽章)可以访问shields

主要是资源整理