Typecho Cuteen 主题美化

氢云

发布于 2023-03-31 10:59:19

1.8K0

发布于 2023-03-31 10:59:19

文章被收录于专栏：氢云小屋氢云小屋

美化列表

1. 给博客添加每日60s早报

前往 https://www.alapi.cn/ 注册一个账号复制自己的Token替换下边的 你的密钥内容

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

然后新建一篇文章，直接粘贴代码发布即可

2. 网站底部添加运行时间

在 usr/themes/cuteen/include/footer.php合适位置添加如下代码

<span id = "runtime_span"></span>
    <script type = "text/javascript">
    function show_runtime()
    {window.setTimeout("show_runtime()",1000);X=new 
    Date("1/01/2021 00:00:00"); //初始建站时间这里修改  月/日/年
    Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
    a=T/M;A=Math.floor(a);b=(a-A)*24;B=Math.floor(b);c=(b-B)*60;C=Math.floor((b-B)*60);D=Math.floor((c-C)*60);
    runtime_span.innerHTML="网站已运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
    </script>

3. 为博客添加随机一言

css文件配置：将以下代码放置在 usr/themes/cuteen/include/header.php 中的 <head></head> 里

<link rel="stylesheet" type="text/css" href="https://www.whbblog.cn/css/yiyan.css">

script 配置：将以下代码放置在 usr/themes/cuteen/post.php 中的合适位置。

<div class="qinian"><div class="text-center main-shadow yiyan-box radius8 them-box"><p id="hitokoto">获取中...</p><script src="https://v1.hitokoto.cn/?c=i&encode=js&select=%23hitokoto" defer></script></div></div>

效果如下：

4. 侧边栏添加小卡片

将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置

<section id="custom_html-2" class="bg-white dark:bg-black dark:bg-opacity-20 rounded border border-gray-900/10 relative mb-4">
  <div class="textwidget custom-html-widget">
    <aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
      <div class="textwidget widget-text">
        <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);} #flip-box-1{overflow:hidden;height:50px;border-radius:99px} #flip-box-1 div{height:50px} #flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%} #flip-box-1 div:first-child{animation:show 8s linear infinite} .flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)} .flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);} .flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);} .flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);} .flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);} .flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);} @keyframes show{0%{margin-top:-300px} 5%{margin-top:-250px} 16.666%{margin-top:-250px} 21.666%{margin-top:-200px} 33.332%{margin-top:-200px} 38.332%{margin-top:-150px} 49.998%{margin-top:-150px} 54.998%{margin-top:-100px} 66.664%{margin-top:-100px} 71.664%{margin-top:-50px} 83.33%{margin-top:-50px} 88.33%{margin-top:0} 99.996%{margin-top:0} 100%{margin-top:300px} }</style>
        <div id="container-box-1">
          <div class="container-box-1-1">坚持每天来逛逛，会让你</div>
          <div id="flip-box-1">
            <div>
              <div class="flip-box-1-1">生活也美好了！</div>
            </div>
            <div>
              <div class="flip-box-1-2">心情也舒畅了！</div>
            </div>
            <div>
              <div class="flip-box-1-3">走路也有劲了！</div>
            </div>
            <div>
              <div class="flip-box-1-4">腿也不痛了！</div>
            </div>
            <div>
              <div class="flip-box-1-5">腰也不酸了！</div>
            </div>
            <div>
              <div class="flip-box-1-6">工作也轻松了！</div>
            </div>
          </div>
          <div class="container-box-1-2">你好我也好，不要忘记哦!</div>
        </div>
      </div>
      <div class="clear">
      </div>
    </aside>
  </div>
</section>

效果展示：

5. 侧边栏添加和风天气组件

将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置

<section data-id="sidebar-weather" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
  <div id="he-plugin-standard">
  </div>
  <script>WIDGET = {
      "CONFIG": {
        "layout": "2",
        "width": "238",
        "height": "260",
        "background": "1",
        "dataColor": "FFFFFF",
        "borderRadius": "5",
        "key": "3180d3c43e524753ab8bcef69dba023a"
      }
    }</script>
  <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0">
  </script>
</section>

效果展示：

6. 侧边栏添加小姐姐组件

将以下代码放置在 usr/themes/cuteen/include/header.php 文件中末尾位置

<script src="https://www.whbblog.cn/js/jquery-latest.js"></script>

将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置

<section data-id="sidebar-meimei" class="mb-4">
  <style>#player { margin: 10px auto; max-width: 100%; border-radius: 10px; display: block; } #xjjsp { display: none; } #ckxjj,#gbxjj { width: 100%; height: 40px; border: none; background-color: #f95491; color: #fff; margin-top: 10px; border-radius: 5px; font-size: 18px; cursor: pointer; transition: 0.2s; } #ckxjj:hover,#gbxjj:hover { background-color: #eeb4bf; } .kzsp { width: 100%; display: flex; justify-content: space-between; } .kzsp>button { border: none; height: 40px; padding: 0 30px; font-size: 16px; background-color: #f95491; border-radius: 10px; color: #fff; transition: 0.3s; cursor: pointer; } .kzsp>button:active { background-color: #e25a00; }</style>
  <button type="button" id="ckxjj">点我看小姐姐视频</button>
  <div id="xjjsp">
    <video id="player" src="" controls alt="小姐姐视频"></video>
    <div class="kzsp">
      <button id="switch">连续: 开</button>
      <button id="next">下一个</button>
    </div>
    <button type="button" id="gbxjj">关闭视频</button>
  </div>
  <script type="text/javascript" src="https://www.whbblog.cn/js/video.js">
  </script>
</section>

效果展示：

7. 网站底部添加波浪

在 usr/themes/cuteen/include/footer.php合适位置添加如下代码

<!--底部波浪开始-->
<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>

效果展示：见本站底部

8. 侧边栏当前时间

将以下代码放置在 usr/themes/cuteen/include/sidebar.php 文件中合适的位置

<section id="sidebar-current-time" class="bg-white dark:bg-black dark:bg-opacity-20 card card-bordered rounded border border-gray-900/10 relative mb-4">
  <div class="mx-4 py-2 my-2 flex items-center border-b border-gray-900/10">
    <svg class="w-5 h-5 mr-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8937" width="200" height="200">
      <path d="M512 514m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1afa29" p-id="8938" data-spm-anchor-id="a313x.7781069.0.i0" class="">
      </path>
      <path d="M512 512m-253.15 0a253.15 253.15 0 1 0 506.3 0 253.15 253.15 0 1 0-506.3 0Z" fill="#FFFFFF" p-id="8939">
      </path>
      <path d="M512 512m-203.07 0a203.07 203.07 0 1 0 406.14 0 203.07 203.07 0 1 0-406.14 0Z" fill="#1296db" p-id="8940" data-spm-anchor-id="a313x.7781069.0.i3" class="selected">
      </path>
      <path d="M622.12 497h-91.31a24.09 24.09 0 0 0-11.46-7.92V360.22a6 6 0 0 0-6-6h-2.81a6 6 0 0 0-6 6v128.93a24.06 24.06 0 1 0 26.19 38.08h91.49a6 6 0 0 0 6-6V503a6 6 0 0 0-6.1-6z" fill="#69B452" p-id="8941">
      </path>
    </svg>
    <span>当前时间</span>
  </div>
  <div class="my-3">
    <iframe src="https://www.whbblog.cn/currenttime/index.html" width="100%" height="110" frameborder="no">
    </iframe>
  </div>
</section>

效果展示：

9. 主题白色背景图片

在后台自定义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(背景图片链接或随机图片API链接);
}

效果展示：见本站

10. 在线人数统计

在usr/themes/cuteen/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"; 
}

在需要展示的地方添加如下代码，例如 usr/themes/cuteen/include/footer.php内

当前在线人数：<?php echo online_users() ?>

效果展示：

![在线人数展示](https://img.qybk.cc/img/20230322/6.png/ys)

11. 网站顶部跑马灯特效

网站后台自定义头部/底部/ footer.php/ header.php中添加如下代码

<!-- 顶部跑马灯特效 -->
<style>
    #top-grrk{
    background:url(https://external-30160.picsz.qpic.cn/e94ff0137dfb6cc51925d4ccf61d2541);
    height:2px;
    position:fixed;
    width:100%;
    Z-index:10000;
}
</style>    
<div id="top-grrk"></div>
<!-- 顶部跑马灯特效 -->

效果展示：见本站顶部

12. 动态标题

网站后台自定义头部/底部/ footer.php/ header.php中添加如下代码

<!--动态标题-->
<script>
//崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "╭(°A°)╮ 页面崩溃啦 ~";
clearTimeout(titleTime);
} else {
document.title = "(ฅ>ω<*ฅ) 噫又好了~" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>

效果展示：见本站标题

13. 网站下雪特效

网站后台自定义头部/底部/ footer.php/ header.php中添加如下代码

<!--下雪特效-->
<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>

14. logo扫光

在网站后台自定义CSS中添加如下代码

/* logo 扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* logo 扫光结束 */

效果展示：见本站左上角 氢云小屋字样

15. 禁止F12

在 usr/themes/cuteen/include/footer.php 合适位置添加如下代码

<!--禁止f12-->
<script type="text/javascript">
        window.onload = function(){
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            document.oncontextmenu = function (){
                return false;
            }
        }
    </script>
<!--禁止f12-->

16. 首页小标题添加打字机效果

在随意位置添加代码，我是在 usr/themes/cuteen/include/hero.php 添加的代码

    <script>
        var chakhsu = function(r) {
            function t() {
                return b[Math.floor(Math.random() * b.length)]
            }
     
            function e() {
                return String.fromCharCode(94 * Math.random() + 33)
            }
     
            function n(r) {
                for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                    var l = document.createElement("span");
                    l.textContent = e(),
                    l.style.color = t(),
                    n.appendChild(l)
                }
                return n
            }
     
            function i() {
                var t = o[c.skillI];
                c.step ? c.step--:(c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay--:(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")),
                r.textContent = c.text,
                r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
                setTimeout(i, d)
            }
            var l = "",
            o = ["Walk between the black and white.", ].map(function(r) {
                return r + ""
            }),
            a = 2,
            g = 1,
            s = 5,
            d = 75,
            b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
            c = {
                text: "",
                prefixP: -s,
                skillI: 0,
                skillP: 0,
                direction: "forward",
                delay: a,
                step: g
            };
            i()
        };
        chakhsu(document.getElementById('chakhsu'));
    </script>

在网站后台的首页设置->首页顶部小标题处添加如下代码

<p id="chakhsu" class="mt-3 h5 text-white d-flex"></p>

效果参考本站首页

17. 侧边栏标签云

后台自定义CSS添加如下代码

/*侧栏标签云*/
.flink-item{width:63px;height: 25px; margin:3px; background-color:#57b027; border-radius:2px; text-align: center;}
.flink-title a{ font-size:10px; color:#ffffff; margin:3px; }
.flink-title a:hover{ color:#cccccc; }
.bg-1{background-color:#b57dff!important}
.bg-2{background-color:#465efb!important}
.bg-3{background-color:#f9bb3c!important}
.bg-4{background-color:#f55555!important}
.bg-5{background-color:#f6969a!important}
.bg-6{background-color:#e92b6f!important}
.bg-7{background-color:#8c76f!important}
.bg-8{background-color:#3fa5ff!important}

在 usr/themes/cuteen/include/sidebar.php 文件中合适位置添加如下代码

<!-- 标签云 -->
<section class="sidebar-comment-box card mt-4">
<div class="px-3 py-2 my-2 d-flex align-items-center border-bottom">
<svg t="1678186881052" class="icon icon-20 me-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13180" width="20" height="20"><path d="M511.744 514.7136m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z" fill="#1296db" p-id="13181" data-spm-anchor-id="a313x.7781069.0.i20" class="selected"></path><path d="M405.0432 356.4544l154.9824-143.4624c24.9344-23.0912 65.3312-23.296 90.5728-0.4608l100.5056 91.0336c14.9504 13.5168 15.6672 35.584 1.6384 49.9712l-347.6992 2.9184zM293.376 356.1472l94.976-142.0288c16.7936-26.7264 52.3776-37.8368 83.2512-26.0096 23.2448 8.9088 45.0048 17.3056 44.3392 17.3056-1.4336 0-163.6352 150.016-163.6352 150.016l-58.9312 0.7168zM749.6192 402.176H280.1664c-44.9536 0-81.4592 36.4544-81.4592 81.4592v213.0944c0 44.9536 36.4544 81.4592 81.4592 81.4592h469.4528c44.9536 0 81.4592-36.4544 81.4592-81.4592V483.584c-0.0512-44.9536-36.5056-81.408-81.4592-81.408z m-430.7968 237.7216c-27.4944 0-49.7664-22.272-49.7664-49.7664s22.272-49.7664 49.7664-49.7664c27.4944 0 49.7664 22.272 49.7664 49.7664s-22.272 49.7664-49.7664 49.7664z" fill="#FFFFFF" p-id="13182"></path></svg>
  <span>标签云</span> <span class="ios"></span> </div>
<div class="px-2 pb-3">

<ul class="flinks"><li></li><li></li><li></li><li></li></ul>
<?php $this->widget('Widget_Metas_Tag_Cloud', 'ignoreZeroCount=1&limit=28')->to($tags); ?>
<?php while($tags->next()): ?>
<script>document.querySelectorAll('ul.flinks').forEach(function(e){let a=e;if(a){let ns=a.querySelectorAll("li");let str='<div style="display:inline-block;; float:left">';let bgid=0;const bgs=["bg-1","bg-2","bg-3","bg-4","bg-5","bg-6","bg-7","bg-8"];for(let i=0;i<ns.length;i+=4){str+=(`<div class="flink-item ${bgs[Math.floor(Math.random() * 8)]}"><div class="flink-title"><a href="<?php $tags->permalink(); ?>"><?php $tags->name(); ?></a></div></div>`)}str+=`</div>`;let n1=document.createElement("div");n1.innerHTML=str;a.parentNode.insertBefore(n1,a);a.style="display: none;"}else{console.log('No such id "flinks"')}});</script>
<?php endwhile; ?>

</div></section>
<!-- 标签云 -->

效果展示：

18. PC端侧边栏仿IOS小点点

在 usr/themes/cuteen/include/sidebar.php 文件中合适位置添加如下代码最新回复的下面添加随便看看的下面添加

<span class="ios"></span>

后台自定义CSS添加如下代码

/*PC端侧栏仿ios小点点*/
.ios {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d !important;
    width: 10px;
    height: 10px;
z-index:999;
    -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    box-shadow: 19px 0 #fdbc40, 40px 0 #35cd4b;
    float: right;
    right: 58px;
    top: 22px;
z-index:100;
}

效果展示：

19. 评论框图片

后台自定义CSS添加如下代码

/*评论框图片*/
textarea.form-control {
 resize: vertical;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  margin-bottom: 2px;
  background-image: url(https://xxi.icu/usr/themes/Cuteen/static/img/lin/pinglunbg.webp);
  transition: all 0.25s ease-in-out 0s;
}

效果展示：

20. 文章顶部阅读进度条

在 usr/themes/cuteen/include/header.php 文件中合适位置添加如下代码

<!-- 顶部阅读进度条 -->
<progress id="content_progress" value="0"></progress>
<script>
document.addEventListener('DOMContentLoaded', function () {
      var winHeight = window.innerHeight,
            docHeight = document.documentElement.scrollHeight,
            progressBar = document.querySelector('#content_progress');
      progressBar.max = docHeight - winHeight;
      progressBar.value = window.scrollY;

      document.addEventListener('scroll', function () {
            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
            progressBar.value = window.scrollY;
      });
});
</script>
<!-- 顶部阅读进度条 -->

后台自定义CSS添加如下代码

/* 阅读进度条 */
#content_progress {
      /* Positioning */
      position: fixed;
      left: 0px;
      top: 50px;
      z-index: 188;
      width: 100%;
      height: 2px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      background-color: transparent;
      color: #BABABA;
}

#content_progress::-webkit-progress-bar {
      background-color: transparent;
}

#content_progress::-webkit-progress-value {
      background-color: #B8B8B8;/* 修改颜色 */
}

#content_progress::-moz-progress-bar {
      background-color: #BF3EFF;
}
/* 阅读进度条 */

效果展示：见本站

21. 图片呼吸灯效果

后台自定义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;}}

效果展示：见本站

22. 侧边栏百度优化

在 usr/themes/cuteen/include/sidebar.php 文件中合适位置添加如下代码

<!-- 百度一下 -->
<section class="sidebar-comment-box card mt-4">
<div class="px-3 py-2 my-2 d-flex align-items-center border-bottom">
<svg t="1676984611515" class="icon icon-20 me-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13091" width="200" height="200"><path d="M852.6 367.6c16.3-36.9 32.1-90.7 32.1-131.8 0-109.1-119.5-147.6-314.5-57.9-161.4-10.8-316.8 110.5-355.6 279.7 46.3-52.3 117.4-123.4 183-151.7C316.1 378.3 246.7 470 194 565.6c-31.1 56.9-66 148.8-66 217.5 0 147.9 139.3 129.8 270.4 63 47.1 23.1 99.8 23.4 152.5 23.4 145.7 0 276.4-81.4 325.2-219H694.9c-78.8 132.9-295.2 79.5-295.2-71.2h493.2c9.6-65.4-2.5-143.6-40.3-211.7zM224.8 648.3c26.6 76.7 80.6 143.8 150.4 185-133.1 73.4-259.9 43.6-150.4-185z m174-163.3c3-82.7 75.4-142.3 156-142.3 80.1 0 153 59.6 156 142.3h-312z m276.8-281.4c32.1-15.4 72.8-33 108.8-33 47.1 0 81.4 32.6 81.4 80.6 0 30-11.1 73.5-21.9 101.8-39.3-63.5-98.9-122.4-168.3-149.4z" p-id="13092" data-spm-anchor-id="a313x.7781069.0.i5" class="" fill="#1296db"></path></svg>
                <span>百度一下</span>
                <span class="ios"></span></div>
<div class="px-3 searchs">
<mip-form method="get" url="https://www.baidu.com/s" class="mip-element mip-layout-container">
<form action="https://www.baidu.com/s" method="GET" target="_blank">
<input type="text" name="wd" validatetarget="q" validatetype="must" placeholder="关键词:氢云小屋" value="www.qybk.cc">
<div target="q">关键词:氢云小屋</div>
<input type="submit" value="搜索">
</form><font size=1.5>🔎点击搜索，可帮助本站seo优化！</font>
</mip-form>
</div></section>

后台自定义CSS添加如下代码

/*侧栏百度一下*/
.searchs {padding-top:8px;padding-bottom:0px;padding-right:10px;padding-left:10px;
overflow: hidden;transition: all 0.3s;border-radius: 4px;position: relative;margin: 0px 0px 15px 0px;}.mip-layout-container, .mip-layout-fixed-height {margin: 0px 0px 0px 0px;display: block;position: relative;}mip-form form {position: relative;}.searchs input[type="text"] {border: #45B6F7 1px solid;border-radius: 4px;width: calc( 100% - 2px );}mip-form input[type='text'], mip-form input[type='input'], mip-form input[type='datetime'], mip-form input[type='email'], mip-form input[type='number'], mip-form input[type='tel'], mip-form input[type='url'] {padding-right: 30px;}.searchs input {outline: none;}mip-form input, mip-form textarea, mip-form select {border: 1px solid #f1f1f1;padding: 6px;display: block;box-sizing: border-box;-webkit-box-sizing: border-box;resize: none;font-size: 16px;}mip-form div {display: none;color: #ec1f5c;font-size: 13px;text-align: left;padding: 0 10% 0 3%;}.searchs input[type="submit"] {position: absolute;right: 2px;top: 2px;background-color: #45B6F7;color: #fff;font-size: 13px;margin: 2px;height: 30px;line-height: 30px;padding: 0 10px;}mip-form input[type='submit'] {border: 1px solid #f1f1f1;border-radius: 5px;color: #333;background-color: #d8d7d7;}.searchs input {outline: none;}.tit {background-color: #FF5E52;position: relative;top: -15px;display: inline-block;color: #fff;padding: 4px 15px;font-size: 14px;}.tit strong {font-weight: normal;}.tit {background-color: #FF5E52;position: relative;top: -15px;display: inline-block;color: #fff;padding: 4px 15px;font-size: 13px;}

效果展示：

23. 鼠标美化

后台自定义CSS添加如下代码

/*鼠标样式*/
body {
    cursor:url('https://xxi.icu/usr/themes/Cuteen/static/img/lin/shubiao (5).cur'), auto;
}
select, input, textarea, a, button {
    cursor:url('https://xxi.icu/usr/themes/Cuteen/static/img/lin/shubiao (6).cur'), auto;
}

24. 网格背景

后台自定义CSS添加如下代码

/*网格背景css*/
body {
z-index:1;
    background-position: center top;
    background-size: 28px 28px;
    background-color: #f9f9f9;
    background-image: linear-gradient(to right,rgba(37,82,110, 0.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(37,82,110, 0.1) 1px,transparent 1px);
}

效果展示：