hexo-butterfly底部信息的修改

底部美化

1. 加入css，打开主题文件夹，找到function.styl文件路径\themes\butterfly\source\css\_global

2. 将以下代码加入即可，或者直接加入一个css文件自己链接

   /*底部信息*/
   
   .github-badge {
       margin-left: 5px;
       display: inline-block;
       border-radius: 4px;
       text-shadow: none;
       color: #fff;
       line-height: 15px;
       background-color: #abbac3;
       margin-bottom: 5px;
       font-size: 12px;
   }
   
   .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-blue {
       background: linear-gradient(to right, #3a6186, #89253e);
   }
   
   .github-badge .bg-brightgreen {
       background: linear-gradient(to right, #fc5c7d, #6a82fb);
   }
   
   .github-badge .bg-orange {
       background: linear-gradient(to right, #f0c27b, #4b1248);
   }
   
   .github-badge .bg-gradient {
       background: linear-gradient(to right, #3ca5f6, #a86af9);
   }
   
   .github-badge .bg-blueviolet {
       background: linear-gradient(to right, #654ea3, #eaafc8);
   }
   
   .github-badge .bg-DNS {
     background: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99);
   }

   修改_config.butterfly.yml

3. 将以下代码修改信息，并加入到footercustom_text中

   <div class="github-badge">
     <a
       style="color: #fff"
       rel="external nofollow noopener noreferrer"
       href="https://hexo.io/"
       target="_blank"
       title="由 Hexo 强力驱动"
       data-pjax-state=""
       ><span class="badge-subject"><i class="fab fa-superpowers"></i>Powered</span
       ><span class="badge-value bg-blue">Hexo</span></a
     >
   </div>
   <div class="github-badge">
     <a
       style="color: #fff"
       rel="external nofollow noopener noreferrer"
       href="https://cn.aliyun.com/"
       target="_blank"
       title="阿里云提供域名相关服务"
       data-pjax-state=""
       ><span class="badge-subject"
         ><i class="fa fa-jsfiddle" style="color: orange"></i>DNS</span
       ><span class="badge-value bg-DNS">Aliyun cloud</span></a
     >
   </div>
   <div class="github-badge">
     <a
       style="color: #fff"
       rel="external nofollow noopener noreferrer"
       href="https://www.upyun.com/?utm_source=lianmeng&amputm_medium=referral"
       target="_blank"
       title="又拍云CDN加速"
       data-pjax-state=""
       ><span class="badge-subject"
         ><img
           src="https://www.upyun.com/static/favicon-16x16.png"
           style="width: 12px; height: 11px"
         />又拍云</span
       ><span class="badge-value bg-blueviolet">加速 </span></a
     >
   </div>
   <div class="github-badge">
     <a
       style="color: #fff"
       rel="external nofollow noopener noreferrer"
       href="https://www.beian.miit.gov.cn/"
       target="_blank"
       title="备案信息"
       data-pjax-state=""
       ><span class="badge-subject"
         ><img
           src="xxxxxx"
           style="width: 12px; height: 11px"
         />晋ICP备</span
       ><span class="badge-value bg-orange">2020009500号-1</span></a
     >
   </div>

   看效果图

查看效果图

加入小熊效果

查看图例

修改footer.pug

1. 末尾位置加入两行代码

.bear
.bear1

将css引入即可

查看代码

• 手机端已隐藏

/* 底部优化 */
#footer-wrap .bear{
  position: absolute;
  top: 0;
  width: 200px;
  height: 100px;
  background: url(https://7.dusays.com/2021/01/30/ba145b935201b.png) no-repeat;
  animation: bear .6s steps(8) infinite,bear-move 2s forwards;
}
.bear1{
  position: absolute;
  top:0;
  width: 200px;
  height: 100px;
  right: 0;
  background: url(https://7.dusays.com/2021/01/30/68f8d90401d5a.png) no-repeat;
  transform: rotateY(180deg);
  animation: bear1 .6s steps(8) infinite,bear-move1 2s forwards;
}
@keyframes bear1{
  0%{
  }
  100%{
      background-position: -1600px 0;
  }
}
@keyframes bear-move1{
  0%{
      right: 0%;
  }
  100%{
      right: 25%;
      /* transform: translate(50%); */
      /* margin-left: -100px; */
      margin-right: -100px;
  }
}

@keyframes bear{
  0%{
  }
  100%{
      background-position: -1600px 0;
  }
}
@keyframes bear-move{
  0%{
      left: 0%;
  }
  100%{
      left: 25%;
      transform: translate(-50%);
      /* margin-left: -100px; */
  }
}

@media (max-width: 992px){
  .bear,.bear1{
      display: none;
  }
}