本站已经用了很长时间的handsome主题了,但感觉主题缺一点什么,所以就自己给handsome做一些修改
以下主题管理页面自定义JS或CSS处直接添加即可。

1、自定义鼠标

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

2、首页文章版式圆角化

.panel{ border: none;border-radius: 15px;}
.panel-small{border: none;border-radius: 15px;}
.item-thumb{border-radius: 15px;}

3、首页文章图片获取焦点放大

.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);}

4、首页头像转动并放大

本项修改的是首页头像,将鼠标放至头像后使其转动并放大。

.thumb-lg{
    width:130px;
}
.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}
#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}
#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

5、文章页实现手机观看

原作者文章链接:点此查看
第一步、将以下代码加入handsome/component/sidebar.php的最底部
<style>
    /* 工具栏 - start */
    .tools-item {
        position: fixed;
        bottom: 20px;
        right: 227px;
        width: 56px;
        height: 45px;
        text-align: center;
    }

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

    #qrcode-img {
        position: fixed;
        bottom: 70px;
        right: 260px;
        display: none;
        box-shadow: 0 0 20px #B6DFE9;
       
        padding:25px;
        background: #fff;
    }
</style>
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/> 
<script type="text/javascript" src="jquery.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>

第二步、将以下代码拷贝至如下位置(大概134行)

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

插入位置
第三步、下载qrcode.min.js放在服务器上并修改第一部中的js引用即可

6、网页焦点丢失改变网页标题

//网页焦点丢失修改网页标题
    var OriginTitile = document.title;
    var yuanico = $('[rel="icon"]').attr("href");
    var hjurl = $('[rel="apple-touch-icon"]').attr("href");
    var titleTime;
    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            document.title = '网站崩溃了 QAQ ~ ' + OriginTitile;
            clearTimeout(titleTime);
        }
        else {
        document.title = '又好啦 OVO ~ ' + OriginTitile;
           titleTime = setTimeout(function() {
    document.title = OriginTitile;
    }, 2000);
        }
    });

6、鼠标点击社会主义核心价值观,可把这一段添加到第六个的文件后面。

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": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "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(); 
        }); 
    }); 
}); 

7、去掉首页一句话上的标题

找到usr/themes/handsome/index.php文件,找到大概下面这里,然后把h1标签给删掉

<header class="bg-light lter b-b wrapper-md">
<h1>xxxxxxxxxxx</h1>
<small class="text-muted letterspacing indexWords">
Last modification:January 2nd, 2020 at 01:49 pm
If you think my article is useful to you, please feel free to appreciate