王洪峰

本博客对handsome主题的一些小修改教程
本站已经用了很长时间的handsome主题了,但感觉主题缺一点什么,所以就自己给handsome做一些修改以下修改...
扫描右侧二维码阅读全文
09
2019/01

本博客对handsome主题的一些小修改教程

本站已经用了很长时间的handsome主题了,但感觉主题缺一点什么,所以就自己给handsome做一些修改
以下修改需要在/handsome/assset/css/新建一个handsome.css,然后在handsome/component/header.php第六十行左右添加一句

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css?v=1.3.2" type="text/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
}

4、下雪特效

这里用的是插件:
下载链接:https://plugins.typecho.me/plugins/snow-xmas.html

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

//网页焦点丢失修改网页标题
    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、评论框特效

下载特效JS文件:commentTyping.js,将其放在网站目录某个地方,然后编辑主题文件handsome/component/footer.php,在</body>后面添加以下代码。

<script type="text/javascript" src="(JS文件路径)"></script>

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

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

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

找到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:May 20th, 2019 at 09:24 am
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 23

    链接:https://pan.baidu.com/s/1Q6vHTc3NMmNFC4dI0kdf5Q 提取码:8w71
    链接:https://pan.baidu.com/s/1slN3z1qDjrWQK-0mgU0Dfg 提取码:gse3
    上面的是完整包,在rec刷完后刷底下的捐赠包。

Leave a Comment