首页 生活随笔

请注意,本文发布于:2021 年 04 月 12 日 ,最后编辑于:2021 年 04 月 15 日,内容可能已经不具有时效性,请谨慎参考。

本帖所有代码、插件,都来自于互联网收集并进行优化、注释。

自定义美化

一、给评论框添加一个透明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;
    }
/*运行时间字体美化*/
最终效果可以参考本站底部,每次刷新颜色随机。




文章评论

    yzncqnen 访客IEWindows
    18天 前   回复

    Cuteen4.x主题美化记录贴 - Yehua's Blog
    ayzncqnen
    yzncqnen http://www.g8fofd0n9p1g8x4p34r9t568kw38y6z3s.org/
    [url=http://www.g8fofd0n9p1g8x4p34r9t568kw38y6z3s.org/]uyzncqnen[/url]

目录