本帖所有代码、插件,都来自于互联网收集并进行优化、注释。
自定义美化一、给评论框添加一个透明GIF动图
展开详细内容
打开后台-外观-设置外观-自定义设置-复制代码粘贴至```自定义Css样式```
#comment-textarea {
background-image:url(https://dl.wanghongfeng.cn/diy/comments.gif);/*括号内输入GIF链接*/
background-size:contain;
background-repeat:no-repeat;
background-position:right bottom;
transition:all 0.25s ease-in-out 0s;
}
textarea#comment-textarea:focus{
background-position-y:120px;
transition:all 0.25s ease-in-out 0s;
}
效果图如下:
二、给底部增加访问量
展开详细内容
打开后台-外观-设置外观-自定义设置-复制代码粘贴至```头部自定义内容```
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
找到/usr/themes/Cuteen/base/footer.php中,大约48行以下代码 <!-- 此处版权可以修改或删除,建议保留,谢谢 -->
<p class="small"> Powered by <a href="http://typecho.org" target="_blank">Typecho</a> ※ Theme is <a href="https://blog.zwying.com" target="_blank">Cuteen</a></p>
/*在这段下面添加代码*/
然后在下方添加以下代码
<!--网站访问量-->
<p class="busuzicss" style="font-size:14px;"><span id="busuanzi_container_site_pv" style="margin-right:3px"><i class="fa fa-users" aria-hidden="true" style="margin-right:5px"></i><span id="busuanzi_value_site_uv"></span>人</span> | <span id="busuanzi_container_site_pv" style="margin-left:3px"><i class="fa fa-eye" aria-hidden="true" style="margin-right:5px"></i><span id="busuanzi_value_site_pv"></span>次</span></p>
<!--网站访问量-->
三、在底部添加网站运行时间
展开查看详情
找到/usr/themes/Cuteen/base/footer.php中,大约48行以下代码
<!-- 此处版权可以修改或删除,建议保留,谢谢 -->
<p class="small"> Powered by <a href="http://typecho.org" target="_blank">Typecho</a> ※ Theme is <a href="https://blog.zwying.com" target="_blank">Cuteen</a></p>
/*在这段下面添加代码*/
然后在这两行任意位置添加以下信息,推荐是在版权信息下添加。
<p id="time">Tonm's Blog 的站点正在加载数据.....</p>
然后打开后台-外观-外观设置-自定义设置-复制代码粘贴至底部自定义内容
<!--底部运行时间-->
<script type="text/javascript">
var colorStr="";
var randomArr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
for(var i=0;i<6;i++){
colorStr+=randomArr[Math.ceil(Math.random()*(15-0)+0)];
}
var now =new Date();
function StorageTime() {
var grt= new Date("03/02/2020 00:00:00");//时间格式:月/日/年 时/分/秒
now.setTime(now.getTime()+250);
years = Math.floor((now - grt ) / 1000 / 60 / 60 / 24 /365);
days = Math.floor((now - grt ) / 1000 / 60 / 60 / 24 - (years * 365));
hours = Math.floor((now - grt ) / 1000 / 60 / 60 - (24 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)));
if(String(hours).length ==1 ){hours = "0" + hours;}
minutes = Math.floor((now - grt ) / 1000 /60 - (24 * 60 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)) - (60 * hours));
if(String(minutes).length ==1 ){minutes = "0" + minutes;}
seconds = Math.floor((now - grt ) / 1000 - (24 * 60 * 60 * Math.floor((now - grt ) / 1000 / 60 / 60 / 24)) - (60 * 60 * hours) - (60 * minutes));
if(String(seconds).length ==1 ){seconds = "0" + seconds;}
if(years!=0){var outputtime="本站已安全存活<span>"+years+"</span>年"+"<span>"+days+"</span>天"+"<span>"+hours+"</span>时"+"<span>"+minutes+"</span>分"+"<span>"+seconds+"</span>秒";}else{var outputtime="本站已安全存活<span>"+days+"</span>天"+"<span>"+hours+"</span>时"+"<span>"+minutes+"</span>分"+"<span>"+seconds+"</span>秒";}
document.getElementById("time").style.color="#"+colorStr;
document.getElementById("time").innerHTML = outputtime;
}
setInterval("StorageTime()",250);
</script>
<!--运行时间-->
然后再去自定义Css样式添加以下代码即可
/*运行时间字体美化*/
#time{
text-shadow: 0px 0px 3px blue;
text-align: center;
}
#time span{
color: red;
padding: 0 8px;
}
/*运行时间字体美化*/
最终效果可以参考本站底部,每次刷新颜色随机。