Hexo页脚美化

前言

本文将介绍如何美化页脚，效果展示在最底部。

教程链接：https://www.tqwba.com/x_d/jishu/298102.html

操作

1. 在\themes\butterfly\source\js目录下创建一个js文件，将如下代码写入该文件:

   // 动态心跳
   $(document).ready(function(e){
       $('.copyright').html('©2022 - 2023 <i class="fa-fw fas fa-heartbeat fa-beat" style="color: #f92672;"></i> By  懒觉猫先生 <div class="framework-info"> </div>');
   })
   $(document).ready(function(e){
       show_date_time();
   })
   
   //本站运行时间
   function show_date_time(){
   $('.framework-info').html('本站已运行<span id="span_dt_dt" style="color: #fff;"></span>');
   window.setTimeout("show_date_time()", 1000);
   BirthDay=new Date("5/16/2023 19:30:0");
   today=new Date();
   timeold=(today.getTime()-BirthDay.getTime());
   sectimeold=timeold/1000
   secondsold=Math.floor(sectimeold);
   msPerDay=24*60*60*1000
   e_daysold=timeold/msPerDay
   daysold=Math.floor(e_daysold);
   e_hrsold=(e_daysold-daysold)*24;
   hrsold=Math.floor(e_hrsold);
   e_minsold=(e_hrsold-hrsold)*60;
   minsold=Math.floor((e_hrsold-hrsold)*60);
   seconds=Math.floor((e_minsold-minsold)*60);
   span_dt_dt.innerHTML='<font style=color:#afb4db>'+daysold+'</font> 天 <font style=color:#f391a9>'+hrsold+'</font> 时 <font style=color:#fdb933>'+minsold+'</font> 分 <font style=color:#a3cf62>'+seconds+'</font> 秒';
   }

   • 更多图标和动画效果可以查看FontAwesome5的官网和文档
   • 将代码中的new Date()修改成自己网站搭建的时间（月/日/年 时:分:秒）
   • 时间数字可以自由更换颜色

2. 找到主题配置文件_config.butterfly.yml，在inject的 bottom处引入该js文件 同时加入 head处引入 jquery.min.js 确保能正常使用 ：

   inject:
       head:
           - <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
       bottom:
           - <script src="/js/xxx.js"></script>

重新部署，启动，就可以看到效果啦。

结尾

除了跳动的♥还可以有多种图案选择，可以到官网查看，自己DIY。

---