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

一、网站底部添加运行时间” 进入后台外观-设置外观-增强设置-底部自定义内容，加入下方代码：

1
<p><p style="text-align: center;">本站已运行：<SPAN id=span_dt_dt style="color: #2F889A;"></SPAN> <SCRIPT language=javascript>function show_date_time(){
2
window.setTimeout("show_date_time()", 1000);
3
BirthDay=new Date("5/01/2020 10:00:01");//修改为自己的建站时间，格式：月/日/年  时/分/秒
4
today=new Date();
5
timeold=(today.getTime()-BirthDay.getTime());
6
sectimeold=timeold/1000
7
secondsold=Math.floor(sectimeold);
8
msPerDay=24*60*60*1000
9
e_daysold=timeold/msPerDay
10
daysold=Math.floor(e_daysold);
11
e_hrsold=(e_daysold-daysold)*24;
12
hrsold=Math.floor(e_hrsold);
13
e_minsold=(e_hrsold-hrsold)*60;
14
minsold=Math.floor((e_hrsold-hrsold)*60);
15
seconds=Math.floor((e_minsold-minsold)*60);
16
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> 秒';
17
}
18
show_date_time();</script></p>
19
</p>

二、为你的博客加一个每日60秒早报 1.前往 ALAPI 注册一个账号并登录

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

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

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

三、网站底部添加波浪 代码如下，请添加至合适的位置：

1
<!--底部波浪开始-->
2
<div class="wiiuii_layout">
3
<svg class="editorial"
4
     xmlns="http://www.w3.org/2000/svg"
5
     xmlns:xlink="http://www.w3.org/1999/xlink"
6
     viewBox="0 24 150 28"
7
     preserveAspectRatio="none">
8
 <defs>
9
 <path id="gentle-wave"
10
 d="M-160 44c30 0
11
    58-18 88-18s
12
    58 18 88 18
13
    58-18 88-18
14
    58 18 88 18
15
    v44h-352z" />
16
  </defs>
17
  <g class="parallax">
18
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
19
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
20
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
21
  </g>
22
</svg>
23
</div>
24
<style type='text/css'>
25
.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;}
26
</style>

四、主题白色背景改图片

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

1
/*背景*/
2
body::before {
3
    z-index: -1;
4
    content: "";
5
    top: 0;
6
    left: 0;
7
    right: 0;
8
    bottom: 0;
9
    opacity: 0.1;
10
    position: fixed;
11
    background: center/cover no-repeat;
12
    background-image: url();
13
}

五、在线统计人数 functions.php文件里，添加

1
//在线人数
2
function online_users() {
3
    $filename='online.txt'; //数据文件
4
    $cookiename='Nanlon_OnLineCount'; //Cookie名称
5
    $onlinetime=30; //在线有效时间
6
    $online=file($filename);
7
    $nowtime=$_SERVER['REQUEST_TIME'];
8
    $nowonline=array();
9
    foreach($online as $line){
10
        $row=explode('|',$line);
11
        $sesstime=trim($row[1]);
12
        if(($nowtime - $sesstime)<=$onlinetime){
13
            $nowonline[$row[0]]=$sesstime;
14
        }
15
    }
16
    if(isset($_COOKIE[$cookiename])){
17
        $uid=$_COOKIE[$cookiename];
18
    }else{
19
        $vid=0;
20
        do{
21
            $vid++;
22
            $uid='U'.$vid;
23
        }while(array_key_exists($uid,$nowonline));
24
        setcookie($cookiename,$uid);
25
    }
26
    $nowonline[$uid]=$nowtime;
27
    $total_online=count($nowonline);
28
    if($fp=@fopen($filename,'w')){
29
        if(flock($fp,LOCK_EX)){
30
            rewind($fp);
31
            foreach($nowonline as $fuid=>$ftime){
32
                $fline=$fuid.'|'.$ftime."\n";
33
                @fputs($fp,$fline);
34
            }
35
            flock($fp,LOCK_UN);
36
            fclose($fp);
37
        }
38
    }
39
    echo "$total_online";
40
}

在要引入的地方，添加：

1
<?php echo online_users() ?>

六、网站添加下雪特效 后台-外观-设置外观-自定义设置-底部自定义内容

1
<!--下雪特效-->
2
<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>
3
<script>
4
    if(true){
5
        (function() {
6
            var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
7
            function(callback) {
8
                window.setTimeout(callback, 1000 / 60);
9
            };
10
            window.requestAnimationFrame = requestAnimationFrame;
11
        })();
12

13
        (function() {
14
            var flakes = [],
15
                canvas = document.getElementById("Snow"),
16
                ctx = canvas.getContext("2d"),
17
                flakeCount = 200,
18
                mX = -100,
19
                mY = -100;
20

21
            canvas.width = window.innerWidth;
22
            canvas.height = window.innerHeight;
23

24
            function snow() {
25
                ctx.clearRect(0, 0, canvas.width, canvas.height);
26

27
                for (var i = 0; i < flakeCount; i++) {
28
                    var flake = flakes[i],
29
                        x = mX,
30
                        y = mY,
31
                        minDist = 150,
32
                        x2 = flake.x,
33
                        y2 = flake.y;
34

35
                    var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
36
                        dx = x2 - x,
37
                        dy = y2 - y;
38

39
                    if (dist < minDist) {
40
                        var force = minDist / (dist * dist),
41
                            xcomp = (x - x2) / dist,
42
                            ycomp = (y - y2) / dist,
43
                            deltaV = force / 2;
44

45
                        flake.velX -= deltaV * xcomp;
46
                        flake.velY -= deltaV * ycomp;
47

48
                    } else {
49
                        flake.velX *= .98;
50
                        if (flake.velY <= flake.speed) {
51
                            flake.velY = flake.speed                        }
52
                        flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
53
                    }
54

55
                    ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";
56
                    flake.y += flake.velY;
57
                    flake.x += flake.velX;
58

59
                    if (flake.y >= canvas.height || flake.y <= 0) {
60
                        reset(flake);
61
                    }
62

63
                    if (flake.x >= canvas.width || flake.x <= 0) {
64
                        reset(flake);
65
                    }
66

67
                    ctx.beginPath();
68
                    ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
69
                    ctx.fill();
70
                }
71
                requestAnimationFrame(snow);
72
            };
73

74
            function reset(flake) {
75
                flake.x = Math.floor(Math.random() * canvas.width);
76
                flake.y = 0;
77
                flake.size = (Math.random() * 3) + 2;
78
                flake.speed = (Math.random() * 1) + 0.5;
79
                flake.velY = flake.speed;
80
                flake.velX = 0;
81
                flake.opacity = (Math.random() * 0.5) + 0.3;
82
            }
83

84
            function init() {
85
                for (var i = 0; i < flakeCount; i++) {
86
                    var x = Math.floor(Math.random() * canvas.width),
87
                        y = Math.floor(Math.random() * canvas.height),
88
                        size = (Math.random() * 3) + 2,
89
                        speed = (Math.random() * 1) + 0.5,
90
                        opacity = (Math.random() * 0.5) + 0.3;
91

92
                    flakes.push({
93
                        speed: speed,
94
                        velY: speed,
95
                        velX: 0,
96
                        x: x,
97
                        y: y,
98
                        size: size,
99
                        stepSize: (Math.random()) / 30 * 1,
100
                        step: 0,
101
                        angle: 180,
102
                        opacity: opacity                    });
103
                }
104

105
                snow();
106
            };
107

108
            document.addEventListener("mousemove", function(e) {
109
                mX = e.clientX,
110
                mY = e.clientY            });
111
            window.addEventListener("resize", function() {
112
                canvas.width = window.innerWidth;
113
                canvas.height = window.innerHeight;
114
            });
115
            init();
116
        })();
117
    }
118
</script>

七、备案信息栏底部美化

1.引入CSS

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

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

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

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

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

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

10
<!-- PC -->
11
<span class="pcxs">
12
<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>
13

14
<span style="position: relative;bottom: 3px;"><span style="font-size: 15px" id="timeDate">载入天数...</span><span style="font-size: 15px" id="times">载入时分秒...</span></span>
15
<script language="javascript">
16
    var now = new Date();
17
    function createtime(){
18
        var grt= new Date("9/06/2022 00:00:00");/*---这里是网站的启用时间--*/
19
        now.setTime(now.getTime()+250);
20
        days = (now - grt ) / 1000 / 60 / 60 / 24;
21
        dnum = Math.floor(days);
22
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
23
        hnum = Math.floor(hours);
24
        if(String(hnum).length ==1 ){hnum = "0" + hnum;}
25
        minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
26
        mnum = Math.floor(minutes);
27
        if(String(mnum).length ==1 ){mnum = "0" + mnum;}
28
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
29
        snum = Math.round(seconds);
30
        if(String(snum).length ==1 ){snum = "0" + snum;}
31
        document.getElementById("timeDate").innerHTML = "本站已稳定运行："+dnum +"&nbsp天&nbsp";
32
        document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒?";
33
    }
34
    setInterval("createtime()",250);
35
</script>
36
<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>
37
&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>
38
&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>
39
&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>
40
&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>
41
</span>

八、指定日期自动黑白网页

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

1
<!-- 主页自动黑白哀悼 -->
2
<?php
3
/**
4
 * PHP判断一个日期
5
 */
6
// 拟设一个日期
7
$aday = '2023-02-18 00:00:00';
8
// 截取日期部分，摒弃时分秒，注意类似1月1日应为01-01
9
$bday = substr($aday,0,10);
10
// 获取今天的日期，格式为 YYYY-MM-DD
11
$cday = date('Y-m-d');
12
//使用IF当作字符串判断是否相等
13
if($bday==$cday){
14
echo <<<EOF
15
<!--灰白特效-->
16
<style type="text/css">
17
html {
18
-webkit-filter: grayscale(100%);
19
-moz-filter: grayscale(100%);
20
-ms-filter: grayscale(100%);
21
-o-filter: grayscale(100%);
22
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
23
_filter:none;
24
}
25
</style>
26
<!--灰白特效-->
27
    <!--弹窗代码开始 -->
28
    <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;">
29
    <div style="position: fixed;top: 50%;left: 50%;width: 20%;background: #FFF;transform: translate(-50%, -50%);border-radius: 8px;padding: 30px 24px 28px 24px;">
30
    <h3 style="font-weight: bold;text-align: center;font-size: 26px;">本 站 公 告</h3><hr>
31
    <div style="font-size: 18px;margin-top: 24px;line-height: 30px;color: #707070;">清明时节雨纷纷，路上行人欲断魂！<br>
32
<font size=2 style="position: absolute;right: 30px;">—— 自动黑白哀悼</font>
33
</div>
34
    <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>
35
    <!-- 弹窗代码结束 -->
36
EOF;
37
}else{
38

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

九、图片呼吸灯效果 下方代码放入自定义CSS

1
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评论区添加博主认证及评论等级

先在functions.php文件里面合适的位置添加下面代码

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

然后再主题的comment.php文件里面合适的位置添加下面代码即可

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

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

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

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

主题设置里添加自定义css

1
 #comments img {
2
            max-width: 100%;
3
            height: auto;
4
        }

在主题的comment.php文件里面合适的位置添加下面代码即可

1
<script>
2
        function openimgtp() {
3
            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");
4
        }
5
    </script>
6
    <div title="上传到图床后复制HTML代码到评论区窗口即可" class="smallscreen">
7
        <button type="button" onclick="openimgtp()" style="background-color:#90EE90; font-size:12px; border-color:#90EE90; z-index: 101; border-radius: 4px;">
8
            上传图片
9
        </button>
10
        (上传到图床后复制HTML图像代码到评论区即可)
11
    </div>

风尘落微雨

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

文章分享

评论区

目录