关于

自定义CSS

自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS

标签云整齐排列

标签云整齐排列

QQ截图20200714165809.png

/*标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

文章内打赏图标跳动

文章内打赏图标跳动

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

手机适配中不显示热门及标签云

手机适配中不显示热门及标签云

将以下代码添加至后台-开发者设置-自定义CSS

/*手机不显示*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

文章标题居中

文章标题居中

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.panel-small h2{
    text-align: center; 
}
.panel-picture h3{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

自定义head

自定义head丨放入后台-外观设置-开发者设置-自定义头部-head

自定义body

自定义body丨放入后台-外观设置-开发者设置-自定义尾部-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://muyu.mobi/"><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://muyu.mobi/links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://muyu.mobi/message.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>

万能的控制台

万能的控制台

<!--输出控制台-->
<script type="text/javascript">
  console.clear();  //清空控制台
  console.log("\n %c Catalpa Blog  控制台--没什么可看的","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台,可写html代码
</script>

博客背景添加冒泡动画

博客背景添加冒泡动画

设置

    id: '',                           //容器ID
    num: 100,                        // 个数
    start_probability: 0.1,          // 如果数量小于num,有这些几率添加一个新的
    radius_min: 1,                   // 初始半径最小值
    radius_max: 2,                   // 初始半径最大值
    radius_add_min: .3,               // 半径增加最小值
    radius_add_max: .5,               // 半径增加最大值
    opacity_min: 0.3,                 // 初始透明度最小值
    opacity_max: 0.5,                // 初始透明度最大值
    opacity_prev_min: .003,            // 透明度递减值最小值
    opacity_prev_max: .005,            // 透明度递减值最大值
    light_min: 40,                 // 颜色亮度最小值
    light_max: 70,                 // 颜色亮度最大值
    is_same_color: false,          //泡泡颜色是否相同
    background:"#f1f3f4"           //背景颜色

复制这段内容并添加在前面,handsome主题可以在 开发者设置 自定义输出body 尾部的HTML代码中添加。

<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>

自定义JavaScript

自定义JavaScript丨放入后台-外观设置-开发者设置-自定义JavaScript

彩色标签云

彩色标签云

<!--左侧图标颜色and彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});

如果你的主题开启了pjax,需在后台pjax添加回调函数>pjax添加回调函数

let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

播放器音乐大小

播放器音乐大小

博客开启了自动播放的哥哥们必备

<!--音乐音量--><!--volume=0.5,数值越小音量越小-->
setTimeout(function (){    document.querySelector(".skPlayer-source").volume=0.5;}, 3000);

动态标题栏

动态标题栏

<!--图片链接可替换-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");
         document.title = '网页崩溃了!!!';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp");
         document.title = '咦,又好啦(✿◡‿◡)' ;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

其他修改

这个的话就是一般都是改源代码的了

复制弹窗

复制弹窗

函数调用方式

$.message({
    message: "这里有我的实验室,子站点,项目展示和联系方式!",
    title: "欢迎来到秘密基地!",
    type: "info",
    autoHide: !1,
    time: "10000"
})

参数

title:弹窗的标题
message:弹窗标题下方的文字
type: 弹窗类型
autoHide:默认即可
time:停留时间(毫秒,1秒为1000毫秒)

弹窗类型

  1. info 20200503090105.png
  2. success 20200503090143.png
  3. warning 20200503090308.png
    选择自己所需要的弹窗类型,填入type即可

调用实例
以下是目前本站所使用的调用方式:
网站加载完成并提示来路URL
20200503091550.png
将以下代码填入开发者设置 》》 自定义输出body 尾部的HTML代码

注意,要放在广告异步推送代码之前,放在后面可能会影响加载。

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问! 您来自:<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行,请不要使用广告屏蔽插件,谢谢!<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "5000"
})

</script>

复制成功之后弹窗提示
20200503091613.png

将以下代码填入开发者设置 》》 自定义Javascript

kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创,转载请注明出处!<br> 本文作者:风也<br>原文链接:"+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "15000"
    })
}}

如果你开启了PJAX,那么需要在主题设置》PJAX》PJAX回调函数一栏内填入以下函数,然后保存即可。

kaygb_copy();

独立页面或文章单独调用

此调用方式可实现在文章打开之后弹窗提示,我在我的独立页面秘密基地

20200503091641.png

使用时,只需要在文章内插入可执行代码,也就是用三个英文感叹号包裹

!!!

<script>
$.message({
    message: "这里有我的实验室,子站点,项目展示和联系方式!",
    title: "欢迎来到秘密基地!",
    type: "info",
    autoHide: !1,
    time: "10000"
})
</script>

!!!

关于弹窗时间
时间以毫秒计算,1000即代表着1秒,如果我们想让他显示十秒钟,time修改为10000即可!

文章内加一个正文结束

文章内加一个正文结束

在主题文件post.php

 <?php echo Content::postContent($this,$this->user->hasLogin());?>

代码下面加上

<div class="entry-content l-h-2x">
 <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
 <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div> 

版权声明

版权声明

在主题文件post.php内,刚刚加的正文到此结束下加上

<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>
&nbsp;&nbsp;&nbsp;
<span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br>
<span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br>
<span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
/div>

高级删除线

文章内添加一个高级删除线

首先在主题文件header.php内底部head标签上面添加以下代码

<!--高级删除线-->

span.CA a.external,span.CA a.external:visited,span.CA a.extiw,span.CA a.extiw:visited {
    color: #252525
}
.CA,.CA a,a .CA,.CA a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none
}
body:not(.CA_toggle_on) .CA:hover,body:not(.CA_toggle_on) .CA:active,body:not(.CA_toggle_on) .CA.off {
    transition: color .13s linear;
    color: #fff
}
body:not(.CA_toggle_on) .CA:hover a,body:not(.CA_toggle_on) a:hover .CA,body:not(.CA_toggle_on) .CA.off a,body:not(.CA_toggle_on) a:hover .CA.off {
    transition: color .13s linear;
    color: #add8e6
}
body:not(.CA_toggle_on) .CA.off .new,body:not(.CA_toggle_on) .CA.off .new:hover,body:not(.CA_toggle_on) .new:hover .CA.off,body:not(.CA_toggle_on) .CA.off .new,body:not(.CA_toggle_on) .CA.off .new:hover,body:not(.CA_toggle_on) .new:hover .CA.off {
    transition: color .13s linear;
    color: #ba0000
}
</style>

使用方法就是在文章内写以下,建议带(!!!)

!!!
<span class="CA" title="你知道的太多了">你想说啥</span>
!!!

删除线测试你想说啥

响应耗时和访客总数

响应耗时和访客总数

首先将以下代码加到/usr/themes/handsome/libs/Content.php中,放在class Content{}之前

    /*访问总量*/
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

    /*响应时间*/
    function timer_start() {
        global $timestart;
        $mtime = explode( ' ', microtime()  );
        $timestart = $mtime[1] + $mtime[0];
        return true; 
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3  ) {
        global $timestart, $timeend;
        $mtime = explode( ' ', microtime()  );
        $timeend = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision  );
        $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
        if ( $display  ) {
            echo $r;
        }
        return $r;
    }

然后在/usr/themes/handsome/component/sidebar.php文件内,找到博客信息下面添加以下代码

<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
<span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
<span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

百度收录检测

百度收录检测

修改
1.在模板post.php加入(我是handsome,其他模板请查看更多->其他模板

<!--百度收录-->
<li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>

2.还是在post.php内加入(必须引入jquery

<script>
    function baidu_check(){
        $.getJSON("https://cn1.api.wfblog.net/baidu.php?domain="+window.location.href,function(result){ 
            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_push();
            }else{
                 $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-remove-circle');
                $('#baidu_result').text('查询收录失败');
            }
        });
    }
    function baidu_push(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    }
    baidu_check();
</script>

3.pjax回调函数

<!--百度收录-->
if((typeof baidu_check) !== "undefined"){

baidu_check();
}

其他模板
1.在模板functions.php末尾合适处加入以下代码

function baidu_check() {
    $url = baidu_url();
    $api = 'https://cn1.api.wfblog.net/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['HTTP_X_FORWARDED_PROTO'] == 'https')){
        return 'https'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    }else{
        return 'http'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    }
}

2.然后在你需要输出检测结果的地方加入<?php baidu_check(); ?>即可

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];
    }
}
?>

一键评论打卡

一键评论打卡

教程

此教程仅以Handsome主题为例 其他主题请修改相应代码
1.首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码: PJAX回调函数也加入这个代码
function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子!::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章!::funny:03:: ")
    }
};

2.打开主题目录的component/comments.php里面的126行到144行附近:

                    <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO" style="display: inline;"></div>
                                            <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
              <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
          <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

3.在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

效果
见文章下方评论

添加表情包

添加表情包

1.复制owo.json/usr/themes/handsome/usr/
2.上传并解压文件夹到/usr/themes/handsome/usr/img/emotion/
3.清除一下游览器缓存,然后刷新即可

博客介绍打字效果

博客介绍打字效果

首页左侧博主介绍
QQ截图20200714165033.png
将以下代码添加至后台-外观-初级设置-博主的介绍。

<span class="text-muted text-xs block">
<div id="chakhsu"></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 = ["我爱吃土豆" ].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></span> </span>

首页倒计时

首页倒计时

650410678.png
将以下代码添加至后台-开发者设置-首页列表最前方广告位。

/*首页倒计时*/
<style> 
.gn_box{     border: none;     border-radius: 15px; } 
.gn_box {     padding: 10px 14px;     margin: 10px;     margin-bottom: 20px;     text-align: center;     background-color: #fff; } 
#t_d{     color: #982585;     font-size: 18px; } 
#t_h{     color: #8f79c1;     font-size: 18px; } 
#t_m{     color: #65b4b5;     font-size: 18px; } 
#t_s{     color: #83caa3;     font-size: 18px; } 
</style> 
<div class="gn_box">     
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font  color=#8C0073>年</font><font color=#75008A>-</font>
<font color=#5E00A1>新</font><font color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font></h1><center>
<div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span id="t_s"> 秒</span></div></center>
<script type="text/javascript"> 
function getRTime() {   
    var EndTime = new Date('2020/01/25 00:00:00');  
    var NowTime = new Date();  
    var t = EndTime.getTime() - NowTime.getTime();         
    var d = Math.floor(t / 1000 / 60 / 60 / 24);         
    var h = Math.floor(t / 1000 / 60 / 60 % 24);         
    var m = Math.floor(t / 1000 / 60 % 60);         
    var s = Math.floor(t / 1000 % 60); 
    var day = document.getElementById("t_d");
    if (day != null) {
        day.innerHTML = d + " 天";   
    }
    var hour = document.getElementById("t_h");
    if (hour != null) {
        hour.innerHTML = h + " 时";  
    }
    var min = document.getElementById("t_m");
    if (min != null) {
        min.innerHTML = m + " 分";   
    }
    var sec = document.getElementById("t_s");
    if (sec != null) {
        sec.innerHTML = s + " 秒";
    }
}     
setInterval(getRTime, 1000);     
</script> </div>

404页面自动返回

404页面自动返回

打开/usr/themes/handsome/404.php,在第130行左右,在 h1 class="text-shadow text-white">404 后面添加:

<br>
<small class="text-muted letterspacing">
<b id="sp">10</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>

然后把下面这段放到最后的/body

<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=10;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>

给typecho加上心知天气

给typecho加上心知天气

1.知心天气官网www.seniverse.com注册申请免费API 密钥
2.将以下代码放入/usr/themes/handsome/component/headnav.php第55行!-- / search form --之后并更换你的公钥秘钥即可


<!-- 知心天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "公钥",
    "hash": "密钥"
});
tpwidget("show");</script>
<!-- 知心结束-->

时光机添加置顶视频

时光机添加置顶视频

将以下代码分别添加至/usr/themes/handsome/component/ssy.php?php if ($comments->have()): ?> div class="streamline b-l m-l-lg m-b padder-v"之后

<!--梦想视频-->
<div id="comment-867" class="comment-body comment-parent comment-odd comment-by-author">
<div class="panel-heading pos-rlt b-b b-light">
<center>你的梦想是什么!</center>
</div>
<div class="panel-body">
<p><video src="视频地址" style="background-image:url(视频封面图);background-size: cover;" preload="preload"></video><div class="play-button"></div></p> </div>
</div>

插件

解压包,不要做修改文件名上传至Typecho博客/usr/plugins文件夹内,后台启用!
插件 介绍 地址
CodePrettify Mac风格代码高亮 本地下载
tagshelper 后台编辑文章时增加标签选择列表 本地下载
ShortLinks 把外部链接转换为内链接 本地下载
AliceStyle 萌卜兔's 美化插件 本地下载
CommentFilter 评论过滤器 本地下载
CommentPush 评论通知推送多服务 本地下载
EditorMD Markdown 编辑器 Editor.md 本地下载
MarkdownParse 更快、更强的 Markdown 解析插件 本地下载
PartiallyPassword 文章部分加密 本地下载
权限狗 修改注册时默认用户组 本地下载
ServerStatus Typecho服务器状态插件 本地下载
UserAgent 显示评论人使用的操作系统和浏览器信息 本地下载
WeTypecho插件 微信QQ小程序通用WeTypechoAPI接口插件 本地下载
WowScroll 一款基于wow.js的元素初次加载动画插件 本地下载
END
本文作者:
本文地址:https://muyu.mobi/21.html
文章标题:本站基于Handsome主题的修改(备忘)
版权说明:若无注明,本文皆さくら荘丨樱花庄原创,转载请保留文章出处。
Last modification:September 10th, 2020 at 12:21 pm
If you think my article is useful to you, please feel free to appreciate