Cuteen4.X主题美化合集

本文最后编写于2021-03-20，最后编辑于0天前，内容可能已经不具有时效性，请谨慎参考。

一、给导航栏加上天气

打开和风天气,地址：https://www.qweather.com/ 进入后点击和风天气插件→天气简约插件→创建→这里看你自己了→然后生成代码
生成的代码如下：

<div id="he-plugin-simple"></div>
<script>
WIDGET = {
"CONFIG": {
"modules": "01234",
"background": "1",
"tmpColor": "FFFFFF",
"tmpSize": "16",
"cityColor": "FFFFFF",
"citySize": "16",
"aqiColor": "FFFFFF",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "auto",
"fixed": "false",
"vertical": "top",
"horizontal": "left",
"key": "8d7ad00112284cc493dc3e31d8026b7c"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

在/usr/themes/Cuteen/base目录中，打开navbar.php文件，将第一行代码添加到第16行下方即可，在

二、头像呼吸光环和鼠标悬停旋转放大

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义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;
}
}

三、图片圆角及阴影化

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

img.lazy.loaded{
border-radius: 15px;
box-shadow: darkgrey 0px 0px 5px 5px;
}

四、文章边框、评论框、侧边栏圆角及阴影化

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

.post-ctx,.post-comment.mt-4,.sidebar-box {
background-clip: border-box;
border-radius: 15px;
box-shadow: -2px 8px 17px 0 rgb(157 167 255 / 36%), 0 6px 20px 0 rgb(255 255 255 / 19%);
}

.sidebar-banner{
border-radius: 20px 20px 0px 0px;
}

五、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="_blank" 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'];
}
}

六、添加复制提醒

没找到好看的复制提醒代码只能凑合用这个了,有好看的记得分享一下,在头部引用。

<script src="https://cdn.jsdelivr.net/gh/huiyio/Cuteen@0.04/css/layer.min.js"></script>

在后台底部自定义添加

<script>
document.addEventListener("copy",function(e){new Vue({data:function(){this.$notify({title:"复制成功",message:"若要转载请务必保留原文链接！",type:"success"});return{visible:false}}})})
</script>

七、滚动条显示位置百分比

在/usr/themes/Cuteen/base目录中，打开navbar.php文件，将以下代码添加到第10行下方即可，在

标签前面就行。

<div id="percentageCounter"></div>

打开后台→外观→设置外观→自定义设置→复制代码粘贴至底部自定义内容

//加载显示
$(window).scroll(function() {
var a = $(window).scrollTop(),
c = $(document).height(),
b = $(window).height();
scrollPercent = a / (c - b) * 100;
scrollPercent = scrollPercent.toFixed(1);
$("#percentageCounter").css({
    width: scrollPercent + "%"
});
}).trigger("scroll");

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

#percentageCounter {
position:fixed;
left:0;
top:0;
height:3px;
z-index:99999;
background-color:#448EF6;
}

八、动态标题

打开后台→外观→设置外观→自定义设置→底部自定义

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

九、添加转载说明

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

十、添加访问提示

打开后台→外观→设置外观→自定义设置→底部自定义

<!-- 客户端信息 -->
<div id="fps" style="z-index:5;position:fixed;bottom:3px;left:3px;color:#2196F3;font-size:10px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kaliisra/myblogstatic/kehuduan-js/fetch.min.js"></script>
<script src="https://cdn.gmit.vip/layer/3.1.1/layer.js" type="text/javascript" charset="utf-8"></script>
<script>
/*网站打开提醒代码开始*/
$(function(){
    if(/*getCookie('msg') !=*/ 1){
        var t = document.createElement("a");
        t.href = document.referrer;
        var msgTitle = t.hostname;
        var name = t.hostname.split(".")[1];
        if("" !== document.referrer){
            switch (name) {
                case 'bing':
                    msgTitle = '必应搜索';
                    break;
                case 'baidu':
                    msgTitle = '百度搜索';
                    break;
                case 'so':
                    msgTitle = '360搜索';
                    break;
                case 'google':
                    msgTitle = '谷歌搜索';
                    break;
                case 'sm':
                    msgTitle = '神马搜索';
                    break;
                case 'sogou':
                    msgTitle = '搜狗搜索';
                    break;
                default:
                    msgTitle =  t.hostname;
            };
        };
        var time = (new Date).getHours();
        var msg = '';
        23 < time || time <= 5 ? msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？":
        5< time && time <= 7 ? msg = "早上好！一日之计在于晨，美好的一天就要开始了！":
        7< time && time <= 11 ? msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！":
        11< time && time <= 14 ? msg = "中午了，工作了一个上午，现在是午餐时间！":
        14< time && time <= 17 ? msg = "午后很容易犯困呢，今天的运动目标完成了吗？":
        17< time && time <= 19 ? msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~":
        19< time && time <= 21 ? msg = "晚上好，今天过得怎么样？":
        21< time && time <= 23 && (msg = "已经这么晚了呀，早点休息吧，晚安~");
        $.ajax({
            type:"get",
            url:"https://open.gmit.vip/web/api/UserInfo/",
            async:true,
            success:function(data){
                window.info = data;
                layer.msg("Hi~ 来自"+ data.data.location + '~<br/>通过 '+msgTitle+' 进来的朋友！<br/>使用 '+ data.data.os +"<br/>"+ data.data.browser +' 访问本站！' + '<br/>' + msg);
                var showFPS = (function(){
                    var requestAnimationFrame =
                        window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame ||
                        function(callback) {
                            window.setTimeout(callback, 1000/60);
                        };
                    var e,pe,pid,fps,last,offset,step,appendFps;

                    fps = 0;
                    last = Date.now();
                    step = function(){
                        offset = Date.now() - last;
                        fps += 1;
                        if( offset >= 1000 ){
                        last += offset;
                        appendFps(fps);
                        fps = 0;
                        };
                        requestAnimationFrame( step );
                    };
                    appendFps = function(fps){
                        var settings = {
                            timeout: 5000,
                            logError: true
                        };
                        $('#fps').html('<span style="float:left;">'+fps+'FPS</span><br/><span style="float:left">'+window.info.data.os+'</span><br/><span style="float:left;margin-top:1px;">'+window.info.data.browser+'</span><br/><span style="float:left;margin-top:1px;">'+window.info.data.location+'</span><br/><span style="float:left;margin-top:1px;"></span>');
                    };
                    step();
                })();
            }
        });
    };
});
</script>

如果不显示，在头部或者脚部添加以下代码

请输入<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>代码

十一、给评论框加背景图片

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

#comment-textarea {
background-image:url(https://txc.gtimg.com/data/298698/2021/0320/44debb49c87ad7e6062b32102c74eb4e.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;
}

十二、右键自定义

打开后台→外观→设置外观→自定义设置→复制代码粘贴至头部自定义内容

<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://blog.china97.cn/"><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:void(0);" onclick="baiduSearch();"><i class="fa fa-search 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://blog.china97.cn/Links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居 
</span></a></li>  
       <li><a href="https://blog.china97.cn/Message-Board.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>

十三、全局字体美化

打开后台→外观→设置外观→自定义设置→复制代码粘贴至自定义Css样式

@font-face{
font-family:FontStyle;
src:url("https://xxx");    //字体URL地址
format("truetype");
}
*{font-family:FontStyle;}
i{font-family:none;}
@media only screen and (min-width:0px) and (max-width:767px){.index-banner{height:50vh!important;}}

十四、顶部跑马灯特效

打开后台→外观→设置外观→-自定义设置→复制代码粘贴至头部自定义内容

<!-- 顶部跑马灯特效 -->
<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 async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">

在/usr/themes/Cuteen/base/footer.php中，大约48行添加以下代码

    <p class="busuzicss" style="font-size:14px;"><span id="busuanzi_container_site_pv" style="margin-right:3px"><i class="fa fa-users" aria-hidden="true" style="margin-right:5px"></i><span id="busuanzi_value_site_uv"></span>人</span> | <span id="busuanzi_container_site_pv" style="margin-left:3px"><i class="fa fa-eye" aria-hidden="true" style="margin-right:5px"></i><span id="busuanzi_value_site_pv"></span>次</span></p>