效果图
参考leonus大佬的教程
1 2 3 4 5 6 7 8
| footer: owner: enable: false since: 2021 - custom_text: + custom_text: <div id="runtime"></div> copyright: false # Copyright of theme and framework
|
2,添加js
添加以下js内容到custom.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 29 30 31 32 33 34 35 36 37
| setInterval(() => { // let create_time = Math.round(new Date('2024-08-26 00:00:00').getTime() / 1000); //在此行修改建站时间 // 有苹果用户发现safari浏览器不能正常运行,百度了一下发现是格式化的问题,改成下面这种应该就可以了。感谢反馈。 let create_time = Math.round(new Date('2024/08/26 00:00:00').getTime() / 1000); //在此行修改建站时间 let timestamp = Math.round((new Date().getTime()) / 1000); let second = timestamp - create_time; let time = new Array(0, 0, 0, 0, 0);
var nol = function(h) { return h > 9 ? h : '0' + h; } if (second >= 365 * 24 * 3600) { time[0] = parseInt(second / (365 * 24 * 3600)); second %= 365 * 24 * 3600; } if (second >= 24 * 3600) { time[1] = parseInt(second / (24 * 3600)); second %= 24 * 3600; } if (second >= 3600) { time[2] = nol(parseInt(second / 3600)); second %= 3600; } if (second >= 60) { time[3] = nol(parseInt(second / 60)); second %= 60; } if (second >= 0) { time[4] = nol(second); } let currentTimeHtml = "" if (time[0] != 0) { currentTimeHtml += time[0] + ' YEAR ' } currentTimeHtml +="本站运行时间:" + time[1] + ' 天 ' + time[2] + ' 时 ' + time[3] + ' 分 ' + time[4] + ' 秒 '; document.getElementById("runtime").innerHTML = currentTimeHtml; }, 1000);
|
3,添加css
添加以下css内容到custom.css
内
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| /* 博客底部运行时间 */ div#runtime { width: fit-content; color: #fff; padding: 0 10px; border-radius: 10px; background-color: var(--theme-color); /* rgba(0, 0, 0, 0.7);这是大佬默认参数,我改了 */ margin: auto; /* 设置居中显示 */ }
[data-theme="dark"] div#runtime { color: var(--theme-color); /* #28b4c8; */ /* box-shadow: 0 0 5px rgba(28, 69, 218, 0.71);这是大佬默认参数,我注释掉了 */ }
|
4,引入到inject
分别把custom.css
和custom.js
引入到inject
1 2 3 4 5 6 7
| # Inject # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag) inject: head: - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"> bottom: - <script src="/js/custom.js"></script>
|
5,运行看效果