Typecho cuteen主题美化(未完待续~)

39711

{collapse}
{collapse-item label=”网站分享成卡片” open}
在后台头部自定义或者在head.php内添加以下内容

    <!-- QQCard BEGIN -->
    <meta itemprop="name" content="小白の博客"/>
    <meta itemprop="image" content="https://cos.aiyo99.com/cdn/img/head.jpeg" />
    <meta name="description" itemprop="description" content="我在等一个人..." />
    <!-- QQCard END -->

{/collapse-item}
{collapse-item label=”Typecho文章页添加百度收录检测 “}

post.php合适的地方添加
        <script>
            function baidu_check(){
                var url= window.location.href
                $.getJSON("https://www.xiaobai666.top/usr/themes/Cuteen/baidu.php?domain="+url,function(result){ //调用api
                    if (result.code == 200) {
                        $('#baidu_icon').removeClass('glyphicon-refresh');
                        $('#baidu_icon').addClass('glyphicon-ok-circle');
                        $('#baidu_result').text('百度已收录');
                    }else if(result.code == 403){
                        $('#baidu_icon').removeClass('glyphicon-refresh');
                        $('#baidu_icon').addClass('glyphicon-info-sign');
                        /*$('#baidu_result').text('百度未收录');*/
                        $('#baidu_result').html('<a style="color:red;" rel="external nofollow" title="点击提交收录！" target="_bl
    ank" href="https://ziyuan.baidu.com/linksubmit/url?sitename='+url+'">百度未收录</a>');
    
                    }else{
                        $('#baidu_icon').removeClass('glyphicon-refresh');
                        $('#baidu_icon').addClass('glyphicon-remove-circle');
                        $('#baidu_result').text('查询收录失败');
                    }
                });
            }
            baidu_check();
    </script>

在的位置添加
    <!--百度收录--> 
    <span class="item"><i class="iconfont icon-liulanqi"></i></span><span class="meta-value" id="baidu_result">加载中</span> 
api代码

    <?php
    /**
     * Baidu
     * @editer: Weifeng
     * @link: https://wfblog.net
     * @version: 1.0
     */
     
    error_reporting(0);
    header("Access-Control-Allow-Origin:*");
    header('Content-type: application/json');
     
    $domain = @$_GET['domain'];
    if(!isset($domain) || empty($domain) || $domain==''){
        $data = array(
            "code" => false,
            "msg" => "未传入请求参数！"
        );
        echo json_encode($data,JSON_UNESCAPED_UNICODE);
        exit;
    }
    if(substr($domain, -1) == '/'){
        $domain = substr($domain,0,strlen($domain)-1);
    }
     
    $data = checkBaidu($domain);
    echo json_encode($data,JSON_UNESCAPED_UNICODE);
     
    function checkBaidu($url){
        $header = array(
            "Host:www.baidu.com",
            "Content-Type:application/x-www-form-urlencoded",//post请求
            "Connection: keep-alive",
            "Referer:https://www.baidu.com",
            "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"
        );
        $url = 'https://www.baidu.com/s?ie=UTF-8&wd='.urlencode($url).'&usm=3&rsv_idx=2&rsv_page=1';
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt ($ch, CURLOPT_HTTPHEADER, $header);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        $output = curl_exec($ch);
        curl_close($ch);
        if(strpos($output, '没有找到') || strpos($output, '很抱歉')){
            $data = array(
                "code" => 403,
                "msg" => "该域名暂时未被百度收录！"
            );
        }else{
            $number = GetBetween($output,'<span class="nums_text">百度为您找到相关结果约','个</span>');
            if(empty($number) || $number == 0){
                $number = GetBetween($output,'<b>找到相关结果数约','个</b></p>');
                if(empty($number) || $number == 0){
                    $data = array(
                        "code" => false,
                        "msg" => "获取百度收录失败！"
                    );
                    return $data;
                }
            }
            $data = array(
                "code" => 200,
                "msg" => "该域名已被百度收录！",
                "number" => str_replace(',','',$number)
            );
        }
        return $data;
    }
     
    function GetBetween($content,$start,$end){
        $r = explode($start, $content);
        if (isset($r[1])){
            $r = explode($end, $r[1]);
            return $r[0];
        }
    }
    ?>
其他主题在functions.php添加

    //百度收录
    function baidu_check() {
        $url = baidu_url();
        $api = 'https://www.xiaobai666.top/usr/themes/Cuteen/baidu.php?domain='; //更改为你自己的API
        $result = json_decode(file_get_contents($api.$url));
        if($result['code'] == 200){
            echo '百度已收录';
        }elseif($result['code'] == 403){
            echo '<a style="color:red;" rel="external nofollow" title="点击提交收录" target="_blank" href="http://zhanzhang.baidu
    .com/sitesubmit/index?sitename='.$url.'">百度未收录</a>';
        }else{
            echo '查询收录失败';
        }
    }
    function baidu_url(){
        if((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTT
    P_X_FORWARDED_PROTO'] == 'https')){
            return 'https'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
        }else{
            return 'http'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
        }
    }

{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”添加天气” open}

给你提供两个天气插件
和风天气：https://console.qweather.com/
知心天气：https://www.seniverse.com/
方法都是一样的，要去申请key,我这里用的是和风天气
1、注册账号之后创建应用，样式随意，我选择的是第二个简约版的，最后生成代码
![和风天气][1]
在你想要显示的地方添加，如果和我一样，就直接在navbar.php中添加
    WIDGET = {
      CONFIG: {
        "modules": "01234",
        "background": 5,
        "tmpColor": "4A4A4A",
        "tmpSize": 16,
        "cityColor": "4A4A4A",
        "citySize": 16,
        "aqiSize": 16,
        "weatherIconSize": 24,
        "alertIconSize": 18,
        "padding": "10px 10px 10px 10px",
        "shadow": "1",
        "language": "auto",
        "borderRadius": 5,
        "fixed": "false",
        "vertical": "middle",
        "horizontal": "center",
        "key": "ffd1921ae0494d26a77c34a5012b8ec9"
      }
    }
    </script>
![和风天气][2]
如果你网站开启了pjax会有小bug :@(尴尬)

{/collapse-item}
{collapse-item label=”添加复制提醒”}

没找到好看的复制提醒代码只能凑合用这个了,有好看的记得分享一下 :@(高兴) ,在头部引用
    <script src="https://www.xiaobai666.top/usr/themes/Cuteen/static/layer/layer.js"></script>
在后台底部自定义添加
    <script>
       document.addEventListener("copy",function(e){new Vue({data:function(){this.$notify({title:"复制成功",message:"若要转载请务必保留原文链接！",type:"success"});return{visible:false}}})})
    </script>

{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”Typecho添加评论邮件通知”” open}
{anote icon=”” href=”https://www.aiyo99.com/archives/475.html” type=”secondary” content=”点击跳转”/}
{/collapse-item}
{collapse-item label=”进站提示”}
{anote icon=”” href=”https://www.aiyo99.com/archives/488.html” type=”secondary” content=”点击跳转”/}
{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”添加网站运行时间和加载时间” open}
{anote icon=”” href=”https://www.aiyo99.com/archives/476.html” type=”secondary” content=”点击跳转”/}
{/collapse-item}
{collapse-item label=”添加访问量统计”}
我这里用的是插件，当然你们也可以用代码
插件：https://wws.lanzous.com/iVAPflj0zfa 密码:8x7v
之后在后台启用，并在你想要显示的地方添加以下代码

这个是访问统计
    <p class="small"> <?php PageViews_Plugin::showPageViews(); ?>
这个是点击量
    PageViews_Plugin::showPageViews('点击量','次');

{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”添加在线人数统计” open}
在functios.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"; 
    }

在你想显示的地方添加，我这里添加在footer.php

    在线人数: <?php echo online_users() ?>人

{/collapse-item}
{collapse-item label=”网站添加灯笼”}
有两个样式
1、在后台底部自定义添加以下代码

    <!-- 灯笼样式开始 -->
    <style>
           @media only screen and (max-width: 760px) {
            .deng-box, .deng-box1 {
                display:none;
            }
        }
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .right {
                float: left!important;
            }
        }
        .deng-box {
            position: fixed;
            top: 20px;
            left: 10px;
            z-index: 3;
        }
        .deng-box1 {
            position: fixed;
            top: 20px;
            right: 10px;
            z-index: 3;
        }
        .deng-box1 .deng {
            position: relative;
            width: 120px;
            height: 90px;
            margin: 50px;
            background: #d8000f;
            background: rgba(216, 0, 15, 0.8);
            border-radius: 50% 50%;
            -webkit-transform-origin: 50% -100px;
            -webkit-animation: swing 5s infinite ease-in-out;
            box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
        }
        .deng {
            position: relative;
            width: 120px;
            height: 90px;
            margin: 50px;
            background: #d8000f;
            background: rgba(216, 0, 15, 0.8);
            border-radius: 50% 50%;
            -webkit-transform-origin: 50% -100px;
            -webkit-animation: swing 3s infinite ease-in-out;
            box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
        }
        .deng-a {
            width: 100px;
            height: 90px;
            background: #d8000f;
            background: rgba(216, 0, 15, 0.1);
            margin: 12px 8px 8px 10px;
            border-radius: 50% 50%;
            border: 2px solid #dc8f03;
        }
        .deng-b {
            width: 45px;
            height: 90px;
            background: #d8000f;
            background: rgba(216, 0, 15, 0.1);
            margin: -4px 8px 8px 26px;
            border-radius: 50% 50%;
            border: 2px solid #dc8f03;
        }
        .xian {
            position: absolute;
            top: -20px;
            left: 60px;
            width: 2px;
            height: 20px;
            background: #dc8f03;
        }
        .shui-a {
            position: relative;
            width: 5px;
            height: 20px;
            margin: -5px 0 0 59px;
            -webkit-animation: swing 4s infinite ease-in-out;
            -webkit-transform-origin: 50% -45px;
            background: #ffa500;
            border-radius: 0 0 5px 5px;
        }
        .shui-b {
            position: absolute;
            top: 14px;
            left: -2px;
            width: 10px;
            height: 10px;
            background: #dc8f03;
            border-radius: 50%;
        }
        .shui-c {
            position: absolute;
            top: 18px;
            left: -2px;
            width: 10px;
            height: 35px;
            background: #ffa500;
            border-radius: 0 0 0 5px;
        }
        .deng:before {
            position: absolute;
            top: -7px;
            left: 29px;
            height: 12px;
            width: 60px;
            content: " ";
            display: block;
            z-index: 999;
            border-radius: 5px 5px 0 0;
            border: solid 1px #dc8f03;
            background: #ffa500;
            background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
        }
        .deng:after {
            position: absolute;
            bottom: -7px;
            left: 10px;
            height: 12px;
            width: 60px;
            content: " ";
            display: block;
            margin-left: 20px;
            border-radius: 0 0 5px 5px;
            border: solid 1px #dc8f03;
            background: #ffa500;
            background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
        }
        .deng-t {
            font-family: 华文行楷;
            font-size: 26px;
            color: #dc8f03;
            font-weight: bold;
            line-height: 44px;
            text-align: center;
        }
        .night .deng-t,
        .night .deng-box,
        .night .deng-box1 {
            background: transparent !important;
        }
        @-moz-keyframes swing {
            0% {
                    -moz-transform: rotate(-10deg)
            }
            50% {
                 -moz-transform: rotate(10deg)
            }
            100% {
                    -moz-transform: rotate(-10deg)
            }
        }
        @-webkit-keyframes swing {
            0% {
                    -webkit-transform: rotate(-10deg)
            }
            50% {
                    -webkit-transform: rotate(10deg)
            }
            100% {
                    -webkit-transform: rotate(-10deg)
            }
        }
        </style>
        <div class="deng-box">
            <div class="deng">
                <div class="xian"></div>
                <div class="deng-a">
                    <div class="deng-b"><div class="deng-t">喜迎</div></div>
                </div>
                <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
            </div>
        </div>
        <div class="deng-box1">
            <div class="deng">
                <div class="xian"></div>
                <div class="deng-a">
                    <div class="deng-b"><div class="deng-t">新春</div></div>
                </div>
                <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
            </div>
        </div>
        <!-- 元宵节灯笼样式结束 -->

灯笼
2、在底部自定义添加

    <div class="dengl">
        <div class="d-box">
            <div class="d1"><span></span><span><p></p></span>
                <ul>
                    <li></li>
                    <li></li>
                    <li><span></span></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="d2"><span></span><span><p></p></span>
                <ul>
                    <li></li>
                    <li></li>
                    <li><span></span></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="d-box1">
            <div class="d1"><span></span><span><p></p></span>
                <ul>
                    <li></li>
                    <li></li>
                    <li><span></span></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="d2"><span></span><span><p></p></span>
                <ul>
                    <li></li>
                    <li></li>
                    <li><span></span></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

在头部自定义添加

    <link rel="stylesheet" href="https://ku.gitcc.cn/cdn/css/lantern.css">

灯笼样式2
本文灯笼样式参考：https://blog.fddmao.com/65.html
{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”评论区添加背景” open}
在自定义css中添加

    /**评论区**/
    #comment-textarea {
    background-image:url(https://cos.aiyo99.com/cdn/img/plk.gif);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:right bottom;
    transition:all 0.25s ease-in-out 0s;
    }
    textarea#comment-textarea:focus{
    background-position-y:120px;
    transition:all 0.25s ease-in-out 0s;
    }

{/collapse-item}
{collapse-item label=”头像旋转呼吸光环”}
在自定义css中添加

    /**头像旋转呼吸光环**/
    .friends-img.mr-2.lazy.loaded:hover{
    transform:rotate(360deg);
    }
    .comment-avatar:hover{
    transform:rotate(360deg);
    }
    .sidebar-comment-avatar.mr-1:hover{
    transform:rotate(360deg);
    }
    .friends-img.mr-2.lazy.loaded,.comment-avatar,.sidebar-comment-avatar.mr-1 {
        border-radius: 50%;
        animation: light 4s ease-in-out infinite;
        transition: all 0.5s;
    }
    @keyframes light {
        0% {
            box-shadow: 0 0 4px
    #ff1354;
        }
        25% {
        box-shadow: 0 0 16px #1ebbff;
        }
        50% {
        box-shadow: 0 0 4px #0ed39f;
        }
        75% {
        box-shadow: 0 0 16px #4fe7f4;
        }
        100% {
        box-shadow: 0 0 4px #f35444;
        }
    }

{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”图标跳动” open}

在自定义css中添加
    /*图标跳动*/
    #like.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex,#headingMoney.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex {
        animation: star 0.5s ease-in-out infinite alternate;
    }
 
    @keyframes star {
        from {
            transform: scale(1);
        }
 
        to {
            transform: scale(1.1);
        }
        }

{/collapse-item}
{collapse-item label=”评论添加@”}
在functions.php中添加

    //获取评论的锚点链接
    function get_comment_at($coid)
    {
        $db   = Typecho_Db::get();
        $prow = $db->fetchRow($db->select('parent,status')->from('table.comments')
            ->where('coid = ?', $coid));//当前评论
        $mail = "";
        $parent = @$prow['parent'];
        if ($parent != "0") {//子评论
            $arow = $db->fetchRow($db->select('author,status,mail')->from('table.comments')
                ->where('coid = ?', $parent));//查询该条评论的父评论的信息
            @$author = @$arow['author'];//作者名称
            $mail = @$arow['mail'];
            if(@$author && $arow['status'] == "approved"){//父评论作者存在且父评论已经审核通过
                if (@$prow['status'] == "waiting"){
                    echo '<p class="commentReview">（评论审核中）)</p>';
                }
                echo '<a href="#comment-' . $parent . '">@' . $author . '</a>';
            }else{//父评论作者不存在或者父评论没有审核通过
                if (@$prow['status'] == "waiting"){
                    echo '<p class="commentReview">（评论审核中）)</p>';
                }else{
                    echo '';
                }
            }
        } else {//母评论，无需输出锚点链接
            if (@$prow['status'] == "waiting"){
                echo '<p class="commentReview">（评论审核中）)</p>';
            }else{
                echo '';
            }
        }
    }

修改comment.php文件
原内容

    <div class="comment-content" data-expand="查看更多..."><p style="display: inline;"><?= Ctx::Comment($comments->content) ?></p>
    </div>
修改成
    <div class="comment-content" data-expand="查看更多..."><?php $parentMail = get_comment_at($comments->coid)?><?php echo $parentMail;?><p style="display: inline;"><?= Ctx::Comment($comments->content) ?></p>
    </div>

{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”右键美化” open}

在footer.php中</body>前面添加

    <style type="text/css">
        a {text-decoration: none;}
        div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font
    -size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
    (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
        div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
        div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
        div.usercm ul li a{color:#666;padding:0 15px;display:block}
        div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
        div.usercm ul li a i{margin-right:10px}
        a.disabled{color:#c8c8c8!important;cursor:not-allowed}
        a.disabled:hover{background-color:rgba(255,11,11,0)!important}
        div.usercm{background:#fff !important;}
        </style>
    <div class="usercm" style="left: 199px; top: 5px; display: none;">
        <ul>
            <li><a href="https://www.xiaobai666.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
            <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
            <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
            <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
            <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw
    "></i><span>重载网页</span></a></li>
            <li><a href="https://www.xiaobai666.top/friend.html"><i class="fa fa-meh-o fa-fw"></i><span>友链</span></a></li>  
               <li><a href="https://www.xiaobai666.top/33.html"><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span
    ></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        (function(a) {
            a.extend({
                mouseMoveShow: function(b) {
                    var d = 0,
                        c = 0,
                        h = 0,
                        k = 0,
                        e = 0,
                        f = 0;
                    a(window).mousemove(function(g) {
                        d = a(window).width();
                        c = a(window).height();
                        h = g.clientX;
                        k = g.clientY;
                        e = g.pageX;
                        f = g.pageY;
                        h + a(b).width() >= d && (e = e - a(b).width() - 5);
                        k + a(b).height() >= c && (f = f - a(b).height() - 5);
                        a("html").on({
                            contextmenu: function(c) {
                                3 == c.which && a(b).css({
                                    left: e,
                                    top: f
                                }).show()
                            },
                            click: function() {
                                a(b).hide()
                            }
                        })
                    })
                },
                disabledContextMenu: function() {
                    window.oncontextmenu = function() {
                        return !1
                    }
                }
            })
        })(jQuery);
     
        function getSelect() {
            "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没>
    还没选择文字呢！") : document.execCommand("Copy")
        }
        function baiduSearch() {
            var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
            "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
        }
        $(function() {
            for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c
     < b.length; c++) if (0 < a.indexOf(b[c])) {
                d = !1;
                break
            }
            d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
        });
    </script>

{/collapse-item}
{collapse-item label=”动态标题”}
在后台底部自定义添加

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

{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”添加打字机效果” open}
在任意位置添加,我在hero.php中</div>上面添加的

    <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>
或者修改hero.php中的代码
源代码:
    <p id="subheading" class="mt-3 h5 text-white d-flex">
    <?= Ctx::HeroTitle($this)[1] ?>
修改为
    <p id="chakhsu" class="mt-3 h5 text-white d-flex"></p>

{/collapse-item}
{collapse-item label=”添加转载说明”}
在post.php最下面添加

    <!--版权声明-->
    <script> 
    document.body.addEventListener('copy', function (e) { 
    if (window.getSelection().toString() && window.getSelection().toString().length > 10) { 
    setClipboardText(e); 
    } 
    }); 
    function setClipboardText(event) { 
    var clipboardData = event.clipboardData || window.clipboardData; 
    if (clipboardData) { 
    event.preventDefault(); 
    var htmlData = '' 
    + '著作权归作者所有。<br>' 
    + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>' 
    + '作者：<?php $this->author() ?><br>' 
    + '链接：' + window.location.href + '<br>' 
    + '来源：<?php $this->options->siteUrl(); ?><br><br>' 
    + window.getSelection().toString(); 
    var textData = '' 
    + '著作权归作者所有。\n' 
    + '商业转载请联系作者获得授权，非商业转载请注明出处。\n' 
    + '作者：<?php $this->author() ?>\n' 
    + '链接：' + window.location.href + '\n' 
    + '来源：<?php $this->options->siteUrl(); ?>\n\n' 
    + window.getSelection().toString(); 
    clipboardData.setData('text/html', htmlData); 
    clipboardData.setData('text/plain',textData); 
    } 
    } 
    </script>

{/collapse-item}
{/collapse}

{collapse}
{collapse-item label=”打字特效” open}
在footer.php中添加

    <!--评论框跳动的彩球,js链接 -->
    <script type="text/javascript" src="https://bqb.xiaobai666.top/js/commentTyping.js"></script>
![请输入图片描述][5]
自己去扒js代码或者引用我的 https://bqb.xiaobai666.top/js/commentTyping.js

{/collapse-item}
{collapse-item label=”网站底部文字跳动”}
在后台css自定义添加

    /*跳动文字css*/
    .Pshake{ 
        display: inline-block; 
        will-change: transform; -webkit-transform-origin: center center; -ms-transform-origin: center center; 
        transform-origin: center center; -webkit-animation: Pshake_Crazy 1s ease-in-out infinite; 
        animation: Pshake_Crazy 1s ease-in-out infinite;
     } 
    @keyframes Pshake_Crazy{ 
        10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);}
        20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);}
        30%{transform:translate(1.5px,0.5px) rotate(0.5deg);} 
        40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);} 
        50%{transform:translate(2.5px,1.5px) rotate(1.5deg);} 
        60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);} 
        70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);} 
        80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);} 
        90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);} 
        0%,100%{transform:translate(0,0) rotate(0);} 
    }

在你想跳动的地方添加class=”Pshake”
请输入图片描述
{/collapse-item}
{/collapse}

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
Typecho
# Typecho# 美化
喜欢就支持一下吧
点赞11 分享
小黑的头像-罗小黑资源网大会员
0白嫖ChatGPT 120美金账户教程-罗小黑资源网
0白嫖ChatGPT 120美金账户教程
0白嫖ChatGPT 120美金账户教程
1年前 258
世界，您好！-罗小黑资源网
世界，您好！
世界，您好！
1年前 256
编译安装MySQL5.7-罗小黑资源网
编译安装MySQL5.7
编译安装MySQL5.7
3年前 217
LINUX运维学习之综合架构篇——架构搭建准备-罗小黑资源网
LINUX运维学习之综合架构篇——架构搭建准备
LINUX运维学习之综合架构篇——架构搭建准备
4年前 212
子比主题美化教程(备忘录)【已更新48】-罗小黑资源网
子比主题美化教程(备忘录)【已更新48】
子比主题美化教程(备忘录)【已更新48】
2年前 202
K8S Nubale3.3部署-罗小黑资源网
K8S Nubale3.3部署
K8S Nubale3.3部署
2年前 197
相关推荐
Typecho Cuteen主题美化-罗小黑资源网
Typecho Cuteen主题美化
Typecho Cuteen主题美化
3年前 186
Typecho添加emoji表情-罗小黑资源网
Typecho添加emoji表情
Typecho添加emoji表情
3年前 125
利用crontab+bypy实现自动备份数据到百度网盘（centos）-罗小黑资源网
利用crontab+bypy实现自动备份数据到百度网盘（centos）
利用crontab+bypy实现自动备份数据到百度网盘（centos）
3年前 117
Joe主题侧边栏添加奥运会奖牌排名教程-罗小黑资源网
Joe主题侧边栏添加奥运会奖牌排名教程
Joe主题侧边栏添加奥运会奖牌排名教程
3年前 104
Typecho cuteen主题美化(未完待续~)-罗小黑资源网
Typecho cuteen主题美化(未完待续~)
Typecho cuteen主题美化(未完待续~)
3年前 97
Joe主题海报插件美化-罗小黑资源网
Joe主题海报插件美化
Joe主题海报插件美化
3年前 97
评论 共3条
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]
代码

请输入代码：

确认
图片

    请登录后查看评论内容

用户封面
小黑的头像-罗小黑资源网大会员
0白嫖ChatGPT 120美金账户教程-罗小黑资源网
0白嫖ChatGPT 120美金账户教程
0白嫖ChatGPT 120美金账户教程
1年前 258
世界，您好！-罗小黑资源网
世界，您好！
世界，您好！
1年前 256
编译安装MySQL5.7-罗小黑资源网
编译安装MySQL5.7
编译安装MySQL5.7
3年前 217
LINUX运维学习之综合架构篇——架构搭建准备-罗小黑资源网
LINUX运维学习之综合架构篇——架构搭建准备
LINUX运维学习之综合架构篇——架构搭建准备
4年前 212
子比主题美化教程(备忘录)【已更新48】-罗小黑资源网
子比主题美化教程(备忘录)【已更新48】
子比主题美化教程(备忘录)【已更新48】
2年前 202
K8S Nubale3.3部署-罗小黑资源网
K8S Nubale3.3部署
K8S Nubale3.3部署
2年前 197
0白嫖ChatGPT 120美金账户教程-罗小黑资源网
258人已阅读
0白嫖ChatGPT 120美金账户教程
TOP1
ChatGPT注册-罗小黑资源网
ChatGPT注册【国内教程】
1年前145人已阅读
TOP2
基于NFS创建动态存储storageclass-罗小黑资源网
基于NFS创建动态存储storageclass
1年前109人已阅读
TOP3
K8S部署nacos-罗小黑资源网
K8S部署nacos
1年前151人已阅读
TOP4
世界，您好！-罗小黑资源网
世界，您好！
1年前256人已阅读
TOP5
K8S部署grafana-罗小黑资源网
K8S部署grafana
1年前133人已阅读
TOP6
非交互式随机图片防火墙软件源码软件分享软件软件身心健康负载均衡负载 均衡视频脚本美化教程美化网络网站备案网易云音乐人网易云网易云编辑器
丫头୧⍤⃝?的头像-罗小黑资源网

丫头୧⍤⃝?1年前0

表情[x37]-罗小黑资源网
头像

一位WordPress评论者1年前0

您好，这是一条评论。若需要审核、编辑或删除评论，请访问仪表盘的评论界面。评论者头像来自 Gravatar。
头像

mrpyk1年前0

mrpyk
头像

吴辉传1年前0

1234567
头像

xiiiii1年前0

感谢分享~
头像

念1年前0

不错不错
头像

QLoe1年前0

感谢分享
头像

A1年前0

::(呵呵)

腾讯云自媒体分享计划