Typecho Cuteen 主题美化 - 成就云开发者社区

美化列表

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

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

代码语言：javascript

复制

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

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

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

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

代码语言：javascript

复制

<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> 里

代码语言：javascript

复制

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

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

代码语言：javascript

复制

<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 文件中合适的位置

代码语言：javascript

复制

<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 文件中合适的位置

代码语言：javascript

复制

<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 文件中末尾位置

代码语言：javascript

复制

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

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

代码语言：javascript

复制

<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合适位置添加如下代码

代码语言：javascript

复制

<!--底部波浪开始-->
<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 文件中合适的位置

代码语言：javascript

复制

<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中添加如下代码

代码语言：javascript

复制

/*背景*/
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文件里添加如下代码

代码语言：javascript

复制

//在线人数
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内

代码语言：javascript

复制

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

效果展示：

代码语言：javascript

复制

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

11. 网站顶部跑马灯特效

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

代码语言：javascript

复制

<!-- 顶部跑马灯特效 -->
<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中添加如下代码

代码语言：javascript

复制

<!--动态标题-->
<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中添加如下代码

代码语言：javascript

复制

<!--下雪特效-->
<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(&#34;Snow&#34;),
            ctx = canvas.getContext(&#34;2d&#34;),
            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 &lt; 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 &lt; 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 &lt;= flake.speed) {
                        flake.velY = flake.speed                        }
                    flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
                }
         
                ctx.fillStyle = &#34;rgba(255,255,255,&#34; + flake.opacity + &#34;)&#34;;
                flake.y += flake.velY;
                flake.x += flake.velX;
                     
                if (flake.y &gt;= canvas.height || flake.y &lt;= 0) {
                    reset(flake);
                }
         
                if (flake.x &gt;= canvas.width || flake.x &lt;= 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 &lt; 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(&#34;mousemove&#34;, function(e) {
            mX = e.clientX,
            mY = e.clientY            });
        window.addEventListener(&#34;resize&#34;, function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
        init();
    })();
}

</script>

14. logo扫光

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

代码语言：javascript

复制

/* 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 合适位置添加如下代码

代码语言：javascript

复制

<!--禁止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 添加的代码

代码语言：javascript

复制

    <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 &gt; i; i++) {
                var l = document.createElement(&#34;span&#34;);
                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 &lt; l.length ? (c.prefixP &gt;= 0 &amp;&amp; (c.text += l[c.prefixP]), c.prefixP++) : &#34;forward&#34; === c.direction ? c.skillP &lt; t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay--:(c.direction = &#34;backward&#34;, c.delay = a) : c.skillP &gt; 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = &#34;forward&#34;)),
            r.textContent = c.text,
            r.appendChild(n(c.prefixP &lt; l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
            setTimeout(i, d)
        }
        var l = &#34;&#34;,
        o = [&#34;Walk between the black and white.&#34;, ].map(function(r) {
            return r + &#34;&#34;
        }),
        a = 2,
        g = 1,
        s = 5,
        d = 75,
        b = [&#34;rgb(110,64,170)&#34;, &#34;rgb(150,61,179)&#34;, &#34;rgb(191,60,175)&#34;, &#34;rgb(228,65,157)&#34;, &#34;rgb(254,75,131)&#34;, &#34;rgb(255,94,99)&#34;, &#34;rgb(255,120,71)&#34;, &#34;rgb(251,150,51)&#34;, &#34;rgb(226,183,47)&#34;, &#34;rgb(198,214,60)&#34;, &#34;rgb(175,240,91)&#34;, &#34;rgb(127,246,88)&#34;, &#34;rgb(82,246,103)&#34;, &#34;rgb(48,239,130)&#34;, &#34;rgb(29,223,163)&#34;, &#34;rgb(26,199,194)&#34;, &#34;rgb(35,171,216)&#34;, &#34;rgb(54,140,225)&#34;, &#34;rgb(76,110,219)&#34;, &#34;rgb(96,84,200)&#34;],
        c = {
            text: &#34;&#34;,
            prefixP: -s,
            skillI: 0,
            skillP: 0,
            direction: &#34;forward&#34;,
            delay: a,
            step: g
        };
        i()
    };
    chakhsu(document.getElementById(&#39;chakhsu&#39;));
&lt;/script&gt;</code></pre></div></div><p>在网站后台的首页设置-&gt;首页顶部小标题处添加如下代码</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">&lt;p id=&#34;chakhsu&#34; class=&#34;mt-3 h5 text-white d-flex&#34;&gt;&lt;/p&gt;</code></pre></div></div><p>效果参考本站首页

    17. 侧边栏标签云    

后台自定义CSS添加如下代码
代码语言：javascript
复制
/*侧栏标签云*/
.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 文件中合适位置添加如下代码
代码语言：javascript
复制
<!-- 标签云 -->
<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-&gt;widget(&#39;Widget_Metas_Tag_Cloud&#39;, &#39;ignoreZeroCount=1&amp;limit=28&#39;)-&gt;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+=(&lt;div class=&#34;flink-item ${bgs[Math.floor(Math.random() * 8)]}&#34;&gt;&lt;div class=&#34;flink-title&#34;&gt;&lt;a href=&#34;&lt;?php $tags-&gt;permalink(); ?&gt;&#34;&gt;&lt;?php $tags-&gt;name(); ?&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;)}str+=&lt;/div&gt;;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 文件中合适位置添加如下代码

最新回复的下面添加

随便看看的下面添加
代码语言：javascript
复制
<span class="ios"></span>
后台自定义CSS添加如下代码
代码语言：javascript
复制
/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;

}
效果展示：
IOS小点点展示
    19. 评论框图片    


后台自定义CSS添加如下代码
代码语言：javascript
复制
/评论框图片/

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 文件中合适位置添加如下代码
代码语言：javascript
复制
<!-- 顶部阅读进度条 -->
<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(&#39;scroll&#39;, function () {
        progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
        progressBar.value = window.scrollY;
  });

});

</script>

<!-- 顶部阅读进度条 -->
后台自定义CSS添加如下代码
代码语言：javascript
复制
/* 阅读进度条 /

#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添加如下代码
代码语言：javascript
复制
    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 文件中合适位置添加如下代码
代码语言：javascript
复制
<!-- 百度一下 -->
<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添加如下代码
代码语言：javascript
复制
/*侧栏百度一下*/
.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添加如下代码
代码语言：javascript
复制
/*鼠标样式*/
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添加如下代码
代码语言：javascript
复制
/*网格背景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);
}
效果展示：
 
网格背景展示