handsome魔改备忘

建议您到我的博客阅读

原贴地址https://zigao.tk/archives/11.htm

前言

刚换了handsome主题觉得不错，但是自己修改了一下。因为刚买所以不知道更新会不会覆盖掉
所以来记录一下

正文

主题后台修改

自定义CSS

[collapse status=“false” title=“自定义CSS”]

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 5px;
}

.panel-small{
    border: none;
    border-radius: 5px;
}

.item-thumb{
    border-radius: 5px;  
}
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: scale(1.15) rotate(1080deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 30px #FFEB92;
    }

    25% {
        box-shadow: 0 0 10px #FFEB92;
    }

    50% {
        box-shadow: 0 0 30px #FFEB92;
    }

    75% {
        box-shadow: 0 0 10px #FFEB92;
    }

    100% {
        box-shadow: 0 0 30px #FFEB92;
    }
}
/*评论头像旋转*/
.img-circle {
    transition: all 0.3s;
}
.img-circle:hover {
    transform: rotate(360deg);
}
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}
.app.container {
    box-shadow: 0 0 30px rgba(173, 173, 173, 0.35);
}
/*打卡*/
.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}
/*表情*/
.comment-content-true img {
    max-width:30%!important
}
/*3D标签云*/
/*彩色部分*/
#tag_cloud-2>div>a {
    color: #fff;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 5px;
    border: 0;
    border-radius: 3px;
    display: inline-block;
    line-height: 18px;
}

#tag_cloud-2>div>a:hover {
    background: #d02f53;
}
/*3D部分*/
#tag_cloud-2>div {
    position: relative;
    width: 240px;
    height: 240px;
    border: 2px black;
    margin: 0 10px 15px 0
}
#tag_cloud-2>div>a {
    position: absolute;
}

#tag_cloud-2>div>a:hover {
    display: block
}

[/collapse]

自定义JavaScript

[collapse status=“false” title=“自定义JavaScript”]

//网页标签获得/失去焦点时更改标题内容
var OriginTitile = document.title;
var titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        OriginTitile = document.title;
        document.title = "怎么走了(；д｀)ゞ";
        clearTimeout(titleTime)
    } else {
        document.title = "回来了ヾ(◍°∇°◍)ﾉﾞ)";
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});
//打卡
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, " 写得好好哟,支持支持！ ::tieba:Y.tb89:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章！ ::tieba:Y.tb94:: ")
    }
};

//复制代码
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: "复制成功",text: '如转载请注明出处！',showConfirmButton: false,timer: 2000});};
//3D标签云
//彩色效果
function colorfultags(){
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#f60", "#45B6F7", "#15a287", "#5cb85c", "#d9534f", "#567e95", "#00a67c", "#b37333"];
let count = 1;
tags.forEach(tag => {
    tagsColor = colorArr[count%8];
    tag.style.backgroundColor = tagsColor;
    count++;
});
}
window.onload=colorfultags();
//3D效果
function around3D() {
  var oDiv = document.getElementById('tag_cloud-2').getElementsByTagName('div')[0];
  if (null == oDiv) {
    return
  } else {
    var radius = 80;
    var d = 200;
    var dtr = Math.PI / 180;
    var mcList = [];
    var lasta = 1;
    var lastb = 1;
    var distr = true;
    var tspeed = 11;
    var size = 200;
    var mouseX = 0;
    var mouseY = 10;
    var howElliptical = 1;
    var aA = null;
    var i = 0;
    var oTag = null;
    aA = oDiv.getElementsByTagName('a');
    for (i = 0; i < aA.length; i++) {
      oTag = {};
      aA[i].onmouseover = (function(obj) {
        return function() {
          obj.on = true;
          this.style.zIndex = 9999;
          this.style.color = '#fff';
          this.style.background = '#0099ff';
          this.style.padding = '5px 5px';
          this.style.filter = "alpha(opacity=100)";
          this.style.opacity = 1;
        }
      })(oTag)
      aA[i].onmouseout = (function(obj) {
        return function() {
          obj.on = false;
          this.style.zIndex = obj.zIndex;
          this.style.color = '#fff';
          this.style.background = '#30899B';
          this.style.padding = '5px';
          this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
          this.style.opacity = obj.alpha;
          this.style.zIndex = obj.zIndex;
        }
      })(oTag)
      oTag.offsetWidth = aA[i].offsetWidth;
      oTag.offsetHeight = aA[i].offsetHeight;
      mcList.push(oTag);
    }
    sineCosine(0, 0, 0);
    positionAll();
    (function() {
      update();
      setTimeout(arguments.callee, 40);
    })();

    function update() {
      var a, b, c = 0;
      a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
      b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
      lasta = a;
      lastb = b;
      if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
        return;
      }
      sineCosine(a, b, c);
      for (var i = 0; i < mcList.length; i++) {
        if (mcList[i].on) {
          continue;
        }
        var rx1 = mcList[i].cx;
        var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
        var rz1 = mcList[i].cy * sa + mcList[i].cz * ca;

        var rx2 = rx1 * cb + rz1 * sb;
        var ry2 = ry1;
        var rz2 = rx1 * (-sb) + rz1 * cb;

        var rx3 = rx2 * cc + ry2 * (-sc);
        var ry3 = rx2 * sc + ry2 * cc;
        var rz3 = rz2;

        mcList[i].cx = rx3;
        mcList[i].cy = ry3;
        mcList[i].cz = rz3;

        per = d / (d + rz3);

        mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
        mcList[i].y = ry3 * per;
        mcList[i].scale = per;
        var alpha = per;
        alpha = (alpha - 0.6) * (10 / 6);
        mcList[i].alpha = alpha * alpha * alpha - 0.2;
        mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
      }
      doPosition();
    }

    function depthSort() {
      var i = 0;
      var aTmp = [];
      for (i = 0; i < aA.length; i++) {
        aTmp.push(aA[i]);
      }
      aTmp.sort(
        function(vItem1, vItem2) {
          if (vItem1.cz > vItem2.cz) {
            return -1;
          } else if (vItem1.cz < vItem2.cz) {
            return 1;
          } else {
            return 0;
          }
        }
      );
      for (i = 0; i < aTmp.length; i++) {
        aTmp[i].style.zIndex = i;
      }
    }


    function positionAll() {
      var phi = 0;
      var theta = 0;
      var max = mcList.length;
      for (var i = 0; i < max; i++) {
        if (distr) {
          phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
          theta = Math.sqrt(max * Math.PI) * phi;
        } else {
          phi = Math.random() * (Math.PI);
          theta = Math.random() * (2 * Math.PI);
        }

        mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
        mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
        mcList[i].cz = radius * Math.cos(phi);

        aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
        aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
      }
    }

    function doPosition() {
      var l = oDiv.offsetWidth / 2;
      var t = oDiv.offsetHeight / 2;
      for (var i = 0; i < mcList.length; i++) {
        if (mcList[i].on) {
          continue;
        }
        var aAs = aA[i].style;
        if (mcList[i].alpha > 0.1) {
          if (aAs.display != '')
            aAs.display = '';
        } else {
          if (aAs.display != 'none')
            aAs.display = 'none';
          continue;
        }
        aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
        aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
        
        aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
        aAs.zIndex = mcList[i].zIndex;
        aAs.opacity = mcList[i].alpha;
      }
    }

    function sineCosine(a, b, c) {
      sa = Math.sin(a * dtr);
      ca = Math.cos(a * dtr);
      sb = Math.sin(b * dtr);
      cb = Math.cos(b * dtr);
      sc = Math.sin(c * dtr);
      cc = Math.cos(c * dtr);
    }
  }
}
window.onload = around3D();

[/collapse]

pjax回调函数

[collapse status=“false” title=“pjax回调函数”]

//Access控制台
window.Access.track()
//看板娘
pio.init(true)

//打卡
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, " 写得好好哟,支持支持！ ::tieba:Y.tb89:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章！ ::tieba:Y.tb94:: ")
    }
};

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

//3D标签云
colorfultags();
around3D();

[/collapse]

自定义head

暂无

自定义body

[collapse status=“false” title=“自定义body”]

<!--漂亮的弹窗资源引入-->
<script src="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>
<script src="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<link href="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.css" rel="stylesheet">

![效果][1]
[/collapse]

改代码

博客信息

[collapse status=“false” title=“博客信息”]
修改handsome/component/sidebar.php

<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span
    class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载时间") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="eye"></i></span><span 
    class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

![效果][2]

[/collapse]

心知天气

[collapse status=“false” title=“心知天气”]
插入到/component/headnav.php中第55行 之后

<!-- 知心天气-->
    <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>
<!-- 知心结束-->

![效果][3]

[/collapse]

删除掉左侧栏的组成二字和分割线

[collapse status=“false” title=“删除掉左侧栏的组成二字和分割线”]
修改/component/aside.php
![F12看代码][4]
看到class是line dk我们删除掉它

<li class="line dk"></li>
<!--Components-->
<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
<span><?php _me("组成") ?></span>
</li>
```
删掉这么多
![效果][5]
[/collapse]

## 注意
这么多全加上会很卡可以删除文章头图放大的css会好一点

  [1]: https://zigao.tk/usr/uploads/2020/02/3026200922.png
  [2]: https://zigao.tk/usr/uploads/2020/02/98885327.png
  [3]: https://zigao.tk/usr/uploads/2020/02/2489759288.png
  [4]: https://zigao.tk/usr/uploads/2020/02/545234292.png
  [5]: https://zigao.tk/usr/uploads/2020/02/1030645080.pngl