本站已经用了很长时间的handsome主题了,但感觉主题缺一点什么,所以就自己给handsome做一些修改。
js代码添加到 主题设置->开发者设置->自定义js里,css代码添加到 主题设置->开发者设置->自定义css里。

一、自定义鼠标样式

/*鼠标cur文件自己替换*/
/*自定义鼠标*/
*{
cursor: url(https://wanghongfeng.cn/default.cur),pointer;
}
/*自定义超链接鼠标*/
a:hover{
cursor: url(https://wanghongfeng.cn/pointer.cur),pointer;
}


二、图片鼠片悬停放大

/*首页图片悬停放大*/
.item-thumb{transition: all 0.6s;}
.item-thumb:hover{transform: scale(1.03);}
.item-thumb-small{transition: all 0.6s;}
.item-thumb-small:hover{transform: scale(1.05);}


三、给文章里的图片四周加上一层阴影

.wrapper-lg img{
    box-shadow: darkgrey 0px 0px 5px 5px;
}


四、页脚美化

首先去/usr/theme/handsome/component/footer.php删除原来的底部版权,也就是删除如下代码:

 Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="_blank"
                                                                                                     href="https://www.ihewro.com/archives/489/">handsome</a>

接着添加以下代码到自定义CSS中:

/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

#这是优化底部栏的css,应该不会影响没开启炫酷透明功能时候的主题,如果有问题就删除下面这行即可
.wrapper {
  padding: 11px;
}

最后按照你的博客信息来修改以下代码,修改完分别填写到博客底部左侧信息、博客底部左侧信息。

<!-- 博客底部左侧信息 -->
<div class="github-badge">
<a href="./" title="©2020&nbsp;王洪峰'blog">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">王洪峰'blog</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://www.beian.miit.gov.cn" target="_blank" title="豫ICP备17025918号-1">
<span class="badge-subject">豫ICP备</span><span class="badge-value bg-green">17025918号-1</span>
</a>
</div>
<!-- 博客底部右侧信息 -->
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

五、博客上方的心知天气

首先打开心知天气的官网,注册账号,并开通免费版服务。
之后在/handsome/component/headnav.php中搜索<!-- / 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>
<!-- 心知结束-->


六、屏蔽F12、复制弹窗

/*屏蔽F12
这里设置为你自己的layer.js所在位置*/
<script src="https://cdn.bootcss.com/layer/2.1/layer.js"></script>
<script type="text/javascript">
//复制弹框
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};
//禁用F12
document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        layer.msg("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }

}    
</script>


七、网页失去焦点标题自动变化

<script>
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "网页已崩溃!";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来了! " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
</script>


八、鼠标点击特效

var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 100000000,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});


九、网页悬浮二维码图标

相关文件:点此下载
首先打开Handsome/compents/下的sidebar.php文件, 找到<? php if (IS_TOC): ?>(大概140行左右)字样,在这一行的前面一行添加如下代码

 <div id="qrcode" class="tools-item" title="阅读转移">手机观看<br/><div id="qrcode-img"></div><i  class=" fa fa-mobile  fa-3x" aria-hidden="false"></i></div>

再接着在sidebar.php的最后面 <? php endif; ?> 前面添加如下代码,将上面下载的文件上传到你的服务器之后把下面的链接修改即可。

     <style>
    /* 工具栏 - start */
    .tools-item {
        position: fixed;
        bottom: 20px;
        right: 247px;
        width: 56px;
        height: 45px;
        text-align: center;
    }

    .tools-item > i {
        display: inline;
        line-height: 45px;
    }

    #qrcode-img {
        position: fixed;
        bottom: 70px;
        right: 280px;
        display: none;
        box-shadow: 0 0 20px #B6DFE9;
       
        padding:25px;
        background: #fff;
    }
</style>
<link rel="stylesheet" href="你的font-awesome.min.css路径" type="text/css"/> 
<script type="text/javascript" src="你的qrcode.min.js路径"></script>
<script type="text/javascript">
    $(function(){
        var system = { 
            win: false, 
            mac: false, 
            xll: false
        }; 
        //检测平台 
        var p = navigator.platform; 
        system.win = p.indexOf("Win") == 0; 
        system.mac = p.indexOf("Mac") == 0; 
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
        if (system.win || system.mac || system.xll) { 
 
        } else {
            $("#qrcode").attr("hidden","hidden");
        } 

        var url = encodeURI(location.href);
        var select = true;
        $('#qrcode').hover(function() {
            if(select) {
                $('#qrcode-img').empty();
                new QRCode(document.getElementById("qrcode-img"), {
                    text: url,
                    width: 180,
                    height: 180,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.L
                });
                $('#qrcode-img').show();
                select = false;
            } else {
                $('#qrcode-img').hide();
                select = true;
            }
        });
    });
</script>


十、右侧博客信息处的加载时间以及总访客量

因为handsome 6.0的function.php是加密的,所以我们需要在var/Widget/Archive.php的1380行后面添加如下代码

/** 初始化皮肤函数01 */
$functionsFile01 = $this->_themeDir . 'functions01.php';
if ((!$this->_invokeFromOutside || $this->parameter->type == 404) && file_exists($functionsFile01)) {
    require_once $functionsFile01;
}

之后在handsome目录新建一个functions01.php,内容如下,其中访客总量里的sql语句里的表名需要改的和你的数据库里的表名一样:

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
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;
    }


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

之后打开Handsome/compents/下的sidebar.php文件,找到如下代码处
请输入图片描述
将代码复制到中间

<li class="list-group-item text-second"> <i class="glyphicon glyphicon-user text-muted"></i> <span class="badge
            pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
           <li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
           pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>


十一、在文章页面添加检测是否被百度收录

首先在上个功能中创建出来的functions01.php中添加如下代码

/**
* 提示文章百度是否收录
*/
function baidu_record() {
    $url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
    if(checkBaidu($url) == 1) {
        echo "百度已收录";
    } else {
        echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录!\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";
    }
}

function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) {
        return 1;
    } else {
        return -1;
    }
}

之后再handsome/post.php 里搜索如下代码

<?php $this->category(' '); ?></span></li>

在这段代码后边添加

<!--百度收录-->
<li class="meta-categories">
    <i class="glyphicon glyphicon-ok-circle" aria-hidden="true"></i>
    <span class="meta-value"><?php echo baidu_record() ?></span>
</li>
       

Last modification:August 25th, 2020 at 04:43 pm
If you think my article is useful to you, please feel free to appreciate