前言 {#前言}

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

操作 {#操作}

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

|------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 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 | // 动态心跳 $(document).ready(function(e) { $('.copyright').html('©2021 <i class="fa-fw fas fa-heartbeat card-announcement-animation cc_pointer"></i> By 竹山一叶'); }) $(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("1/20/2021 0:0: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()修改成自己网站搭建的时间（月/日/年 时:分:秒）
时间数字可以自由更换颜色

找到主题配置文件_config.butterfly.yml，在inject的bottom处引入该js文件：

|---------------|--------------------------------------------------------------| | 1 2 3 | inject: bottom: - <script src="/js/xxx.js"></script> |

重新部署和启动后，就可以看到效果啦：）

结语 {#结语}

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