Hexo页脚美化 - 成就云开发者社区

前言

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

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

操作

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

代码语言：javascript

复制

// 动态心跳
$(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文件：

代码语言：javascript

复制

inject:

bottom:

- <script src="/js/xxx.js"></script>

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

结尾

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