typecho cuteen主题美化记录（持续更新中）

文章	评论	标签
39	60	35

AI摘要：本文介绍了如何使用Typecho Cuteen主题进行美化。其中包括网站底部添加运行时间、为博客加一个每日60秒早报、网站底部添加波浪、主题白色背景改图片、在线统计人数、网站添加下雪特效、备案信息栏底部美化、指定日期自动黑白网页以及图片呼吸灯效果等。这些美化操作可以让你的博客更加个性化和吸引人。

进入后台外观-设置外观-增强设置-底部自定义内容，加入下方代码：

<p><p style="text-align: center;">本站已运行：<SPAN id=span_dt_dt style="color: #2F889A;"></SPAN> <SCRIPT language=javascript>function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("5/01/2020 10:00:01");//修改为自己的建站时间，格式：月/日/年  时/分/秒
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:#C40000>'+daysold+'</font> 天 <font style=color:#C40000>'+hrsold+'</font> 时 <font style=color:#C40000>'+minsold+'</font> 分 <font style=color:#C40000>'+seconds+'</font> 秒';
}
show_date_time();</script></p>
</p>

1.前往 ALAPI 注册一个账号并登录

2.在个人管理-个人中心页面复制你的Token,然后替换下方代码的“你的Token”

![60s-for-news](https://v2.alapi.cn/api/zaobao?token=你的Token&format=image)

3.新建博客文章，粘贴到正文部分，这样就好了

代码如下，请添加至合适的位置：

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>

进入后台-增强设置-自定义css样式

/*背景*/
body::before {
    z-index: -1;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    position: fixed;
    background: center/cover no-repeat;
    background-image: url(); 
}

functions.php文件里，添加

//在线人数
function online_users() {
    $filename='online.txt'; //数据文件
    $cookiename='Nanlon_OnLineCount'; //Cookie名称
    $onlinetime=30; //在线有效时间
    $online=file($filename); 
    $nowtime=$_SERVER['REQUEST_TIME']; 
    $nowonline=array(); 
    foreach($online as $line){ 
        $row=explode('|',$line); 
        $sesstime=trim($row[1]); 
        if(($nowtime - $sesstime)<=$onlinetime){
            $nowonline[$row[0]]=$sesstime;
        } 
    } 
    if(isset($_COOKIE[$cookiename])){
        $uid=$_COOKIE[$cookiename]; 
    }else{
        $vid=0;
        do{
            $vid++; 
            $uid='U'.$vid; 
        }while(array_key_exists($uid,$nowonline)); 
        setcookie($cookiename,$uid); 
    } 
    $nowonline[$uid]=$nowtime;
    $total_online=count($nowonline); 
    if($fp=@fopen($filename,'w')){ 
        if(flock($fp,LOCK_EX)){ 
            rewind($fp); 
            foreach($nowonline as $fuid=>$ftime){ 
                $fline=$fuid.'|'.$ftime."\n"; 
                @fputs($fp,$fline); 
            } 
            flock($fp,LOCK_UN); 
            fclose($fp); 
        } 
    } 
    echo "$total_online"; 
}

在要引入的地方，添加：

<?php echo online_users() ?>

后台-外观-设置外观-自定义设置-底部自定义内容

<!--下雪特效-->
<canvas id="Snow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(125,137,95,0.1);pointer-events: none;"></canvas>
<script>
    if(true){
        (function() {
            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
            window.requestAnimationFrame = requestAnimationFrame;
        })();
         
        (function() {
            var flakes = [],
                canvas = document.getElementById("Snow"),
                ctx = canvas.getContext("2d"),
                flakeCount = 200,
                mX = -100,
                mY = -100;
             
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
             
            function snow() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
             
                for (var i = 0; i < flakeCount; i++) {
                    var flake = flakes[i],
                        x = mX,
                        y = mY,
                        minDist = 150,
                        x2 = flake.x,
                        y2 = flake.y;
             
                    var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                        dx = x2 - x,
                        dy = y2 - y;
             
                    if (dist < minDist) {
                        var force = minDist / (dist * dist),
                            xcomp = (x - x2) / dist,
                            ycomp = (y - y2) / dist,
                            deltaV = force / 2;
             
                        flake.velX -= deltaV * xcomp;
                        flake.velY -= deltaV * ycomp;
             
                    } else {
                        flake.velX *= .98;
                        if (flake.velY <= flake.speed) {
                            flake.velY = flake.speed                        }
                        flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                    }
             
                    ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
                    flake.y += flake.velY;
                    flake.x += flake.velX;
                         
                    if (flake.y >= canvas.height || flake.y <= 0) {
                        reset(flake);
                    }
             
                    if (flake.x >= canvas.width || flake.x <= 0) {
                        reset(flake);
                    }
             
                    ctx.beginPath();
                    ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
                    ctx.fill();
                }
                requestAnimationFrame(snow);
            };
             
            function reset(flake) {
                flake.x = Math.floor(Math.random() * canvas.width);
                flake.y = 0;
                flake.size = (Math.random() * 3) + 2;
                flake.speed = (Math.random() * 1) + 0.5;
                flake.velY = flake.speed;
                flake.velX = 0;
                flake.opacity = (Math.random() * 0.5) + 0.3;
            }
             
            function init() {
                for (var i = 0; i < flakeCount; i++) {
                    var x = Math.floor(Math.random() * canvas.width),
                        y = Math.floor(Math.random() * canvas.height),
                        size = (Math.random() * 3) + 2,
                        speed = (Math.random() * 1) + 0.5,
                        opacity = (Math.random() * 0.5) + 0.3;
             
                    flakes.push({
                        speed: speed,
                        velY: speed,
                        velX: 0,
                        x: x,
                        y: y,
                        size: size,
                        stepSize: (Math.random()) / 30 * 1,
                        step: 0,
                        angle: 180,
                        opacity: opacity                    });
                }
             
                snow();
            };
             
            document.addEventListener("mousemove", function(e) {
                mX = e.clientX,
                mY = e.clientY            });
            window.addEventListener("resize", function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
            init();
        })();
    }
</script>

1.引入CSS

.sjxs{display: none;}
@media (max-width: 768px){.sjxs{display: block !important;}
.pcxs{display: block;}
@media (max-width: 768px){.pcxs{display: none;}

2.在路径/Cuteen/include/footer.php中加入代码：

</main>
<footer id="footer" class="bg-white p-4 text-center mt-4">

3.把footer标签里面的原有内容删了，直接覆盖下方代码即可

<!-- WAP --><span class="sjxs">
<p class="small" style="position: relative;bottom: 1.5px; font-size:15px; font-family="Verdana,Geneva,DejaVu Sans,sans-serif">
&copy; 2024 - <?php echo date('Y'); ?> ? 风尘落微雨</p>

<span style="font-size: 15px">
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">?<?php $this->options->ICP() ?></a>
<a href="https://blog.zwying.com/" target="_blank">?</a>
</span></span>

<!-- PC -->
<span class="pcxs">
<p class="small" style="font-size:15px; font-family="Verdana,Geneva,DejaVu Sans,sans-serif">&copy; 2022 - <?php echo date('Y'); ?> <a target="_blank" class="d-md-inline-flex nav-link" href="/index.php/Copyright.html" title="本站申明">?</a> 风尘落微雨</p>

<span style="position: relative;bottom: 3px;"><span style="font-size: 15px" id="timeDate">载入天数...</span><span style="font-size: 15px" id="times">载入时分秒...</span></span>
<script language="javascript"> 
    var now = new Date();
    function createtime(){
        var grt= new Date("9/06/2022 00:00:00");/*---这里是网站的启用时间--*/
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;}
        minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已稳定运行："+dnum +"&nbsp天&nbsp";
        document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒?";
    }
    setInterval("createtime()",250); 
</script> 
<br><a target="_blank" class="d-md-inline-flex nav-link" href="https://typecho.org" title="博客驱动为 Typecho"><img src="https://img.shields.io/badge/Powered-Typecho-d42328?style=flat&logo=Analogue"></a>
&nbsp<a target="_blank" class="d-md-inline-flex nav-link" href="https://blog.zwying.com" title="主题采用 Cuteen"><img src="https://img.shields.io/badge/Theme-Cuteen-9561cd?style=flat&logo=Pinterest"></a>
&nbsp<a target="_blank" class="d-md-inline-flex nav-link" href="https://beian.miit.gov.cn/#/Integrated/index" title="xICP备x号-3"><img src="https://img.shields.io/badge/萌ICP备-20241104号-4bc51d?style=flat&logo=Octane Render"></a>
&nbsp<a target="_blank" class="d-md-inline-flex nav-link" href="https://www.rainyun.com/?ref=MjQyNTc=" title="由 xx 提供云计算服务"><img src="https://img.shields.io/badge/TxCloud-腾讯云-f42187?style=flat&logo=Git Extensions"></a>
&nbsp<a target="_blank" class="d-md-inline-flex nav-link" href="https://cloud.tencent.com/" title="由 xx 提供CDN加速服务"><img src="https://img.shields.io/badge/CDN-TxCloud-148EFF?style=flat&logo=ONLYOFFICE"></a>
</span>

进入后台外观-设置外观-增强设置-底部自定义内容，加入下方代码。

<!-- 主页自动黑白哀悼 -->
<?php 
/** 
 * PHP判断一个日期
 */
// 拟设一个日期 
$aday = '2023-02-18 00:00:00'; 
// 截取日期部分，摒弃时分秒，注意类似1月1日应为01-01
$bday = substr($aday,0,10);
// 获取今天的日期，格式为 YYYY-MM-DD 
$cday = date('Y-m-d');
//使用IF当作字符串判断是否相等
if($bday==$cday){
echo <<<EOF
<!--灰白特效-->
<style type="text/css">
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>
<!--灰白特效-->
    <!--弹窗代码开始 -->
    <div class="web_notice" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999999;">
    <div style="position: fixed;top: 50%;left: 50%;width: 20%;background: #FFF;transform: translate(-50%, -50%);border-radius: 8px;padding: 30px 24px 28px 24px;">
    <h3 style="font-weight: bold;text-align: center;font-size: 26px;">本 站 公 告</h3><hr>
    <div style="font-size: 18px;margin-top: 24px;line-height: 30px;color: #707070;">清明时节雨纷纷，路上行人欲断魂！<br>
<font size=2 style="position: absolute;right: 30px;">—— 自动黑白哀悼</font>
</div>
    <a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 15px;line-height: 45px;margin: 0 auto;margin-top: 60px;border-radius: 80px;width: 29%;" onclick="javascript:document.querySelector('.web_notice').remove()">关闭</a></div></div>
    <!-- 弹窗代码结束 -->
EOF;
}else{

}
?>
<!-- 主页自动黑白哀悼 -->

下方代码放入自定义CSS

img{-webkit-animation:ani 2s linear infinite;}@keyframes ani{0%{box-shadow:0 0 0px #00BCD4;}25%{box-shadow:0 0 10px #00BCD4;}50%{box-shadow:0 0 20px #00BCD4;}75%{box-shadow:0 0 10px #00BCD4;}100%{box-shadow:0 0 0px #00BCD4;}}

十、Typecho评论区添加博主认证及评论等级

/**输出评论者等级*/
function dengji($i){
$db=Typecho_Db::get();
$mail=$db->fetchAll($db->select(array('COUNT(cid)'=>'rbq'))->from('table.comments')->where('mail = ?', $i)->where('authorId = ?','0'));
foreach ($mail as $sl){
$rbq=$sl['rbq'];}
if($rbq<1){
echo '<span class="commentapprove" style="color: #FFF;padding: .05rem .25rem;font-size: 8px;border-radius: 3px;background-color: #ff4500;margin-left:-10px;" >站长</span>';
}elseif ($rbq<3 && $rbq>=1) {
echo '<span class="commentapprove" style="color: #FFF;padding: .05rem .25rem;font-size: 8px;border-radius: 3px;background-color: #ff9300;margin-left:-10px;" >陌生人</span>';
}elseif ($rbq<9 && $rbq>=3) {
echo '<span class="commentapprove" style="color: #FFF;padding: .05rem .25rem;font-size: 8px;border-radius: 3px;background-color:#666;margin-left:-10px;" >点头之交</span>';
}elseif ($rbq<27 && $rbq>=9) {
echo '<span class="commentapprove" style="color: #FFF;padding: .05rem .25rem;font-size: 8px;border-radius: 3px;background-color:#666;margin-left:-10px;" >酒肉朋友</span>';
}elseif ($rbq<81 && $rbq>=27) {
echo '<span class="commentapprove" style="color: #FFF;padding: .05rem .25rem;font-size: 8px;border-radius: 3px;background-color:#999;margin-left:-10px;" >互相认同</span>';
}elseif ($rbq<100 && $rbq>=81) {
echo '<span class="commentapprove" style="color: #FFF;padding: .05rem .25rem;font-size: 8px;border-radius: 3px;background-color:#999;margin-left:-10px;" >交情莫逆</span>';
}elseif ($rbq>=100) {
echo '<span class="commentapprove" style="color: #FFF;padding: .05rem .25rem;font-size: 8px;border-radius: 3px;background-color:#336699;margin-left:-10px;" >生死之交</span>';
}
}

<?php dengji($comments->mail);?>

十一、Typecho评论区添加图片评论功能

在后台评论设置里添加允许使用的HTML标签和属性，打开在评论中使用 Markdown 语法，添加下面的代码

<img src="" data-original="" width="">
<a href="" data-fancybox="">

主题设置里添加自定义css

 #comments img {
            max-width: 100%;
            height: auto;
        }

<script>
        function openimgtp() {
            window.open("https://img.weirain.com", "newwindow", "height=600, width=800, top=100px, left=400px, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
        }
    </script>
    <div title="上传到图床后复制HTML代码到评论区窗口即可" class="smallscreen">
        <button type="button" onclick="openimgtp()" style="background-color:#90EE90; font-size:12px; border-color:#90EE90; z-index: 101; border-radius: 4px;">
            上传图片
        </button> 
        (上传到图床后复制HTML图像代码到评论区即可)
    </div>