记录一下Typecho Cuteen 美化

首页 / 技术教程 / 正文

一、为你的博客加一个每日60秒早报

前言

相信大家已经看到本站置顶的其中一篇文章为“每日60S早报”,每日自动更新。下面教大家如何给自己的博客也添加一个

教程

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

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

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

3、修改好后复制,新建博客文章,粘贴到正文部分,这样60s早报的主体部分就配置好了

二、添加网站运行时间

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>

三、网站添加随机一言

效果展示

11231

配置教程

(1)css文件配置

把下面的代码放到 header.php 的 里面。

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

(2)script 配置

将以下代码放置在 post.php 中的合适位置。

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

四、侧边栏添加当前时间

效果展示

Test

教程

将以下代码放置在 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>

五、侧边栏添加小卡片

效果展示

Test

教程

将以下代码放置在 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>

六、侧边栏添加和风天气组件

效果展示

Test

教程

将以下代码放置在 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>

七、侧边栏添加小姐姐组件

效果展示

Test

教程

🚁 将以下代码放置在 header.php 文件中末尾的位置。

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

🚀 将以下代码放置在 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>

八、网站底部添加波浪

效果展示

效果见本博客底部,代码如下,请添加至合适的位置:

<!--底部波浪开始-->
<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(https://api.ixiaowai.cn/api/api.php); 
}

十、在线人数统计

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() ?>

十一、顶部跑马灯特效

自定义头部或页脚添加

<!-- 顶部跑马灯特效 -->
<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>
<!-- 顶部跑马灯特效 -->

十二、动态标题

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

<!--动态标题-->
<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>

十三、下雪特效

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

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

部分参考

木木博客

评论区
头像
    头像

    你好怎么联系你

      头像
      森语
      4天前
      回复

      QQ1035761010

    头像
    Timochan
    2022年11月04日 20:33
    回复

    诶嘿!建议搞一下伪静态,可能会让 URL 变得更好看一些(说白了就是 URL 重写)

      头像
      森语
      2022年11月07日 16:18
      回复

      好耶,调整好了٩(๑òωó๑)۶

        头像
        Timochan
        2022年11月07日 20:51
        回复

        好耶!

文章目录