Handsome 主题美化教程
kecho
  更新于 2022-04-17      29 分钟

Handsome 是一款收费的 Typecho 主题，本文给出的 Handsome 主题美化教程收集自网络，部分内容可能随着主题更新而失效。

首页列表最前方广告位

新年倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<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>1</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>
</div>
<script type="text/javascript"> 
  function getRTime() {   
      var EndTime = new Date('2021/02/12 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>

自定义 CSS

以下内容添加到后台主题外观设置-开发者设置-自定义 CSS

头像呼吸环和鼠标悬停旋转放大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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(720deg);
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }
    25% {
        box-shadow: 0 0 16px #0f0;
    }
    50% {
        box-shadow: 0 0 4px #00f;
    }
    75% {
        box-shadow: 0 0 16px #0f0;
    }
    100% {
        box-shadow: 0 0 4px #f00;
    }
}

打赏图标跳动

1
2
3
4
5
6
7
8
9
10
11
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

自定义鼠标指针

可以使用下面代码，或者直接下载插件 HoerMouse 使用

1
2
3
4
5
6
7
8
9
body {
    cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
    cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
    cursor:url('鼠标指针图片链接'), auto;
}

自定义右侧滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

首页文章列表悬浮

1
2
3
4
5
6
7
.blog-post .panel:not(article) {
    transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 15px rgba(73, 90, 47, 0.5);
}

首页文章列表宽度

盒子模型下我感觉页面有点小，但非盒子模型下首页文章列表感觉太宽了，特别在首页设置了大头图情况下，图片看起来就更不美观了，所以可以用以下代码改窄一点。

1
2
3
4
.blog-post{
  max-width: 900px;
  margin: 0 auto;
}

首页文章版式阴影化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.panel{
    box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
    -moz-box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
}
.panel:hover{
    box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
    -moz-box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
}
.panel-small{
    box-shadow: 1px 1px 3px 3px rgba(255,255,255, 0.35);
    -moz-box-shadow: 1px 1px p3x 3px rgba(255,255,255, 0.35);
}
.panel-small:hover{
    box-shadow: 1px 1px p3x 3px rgba(135 206 250, 0.35);
    -moz-box-shadow: 1px 1px 3px 3px rgba(135 206 250, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}
span.baidu-record::before {
    font: normal normal normal 12px/1 FontAwesome;
    content: "\f024";
    margin-right: 3px;
}

首页文章标题颜色渐变

1
2
3
4
.index-post-title a:hover{
     color:rgba(107, 209, 255, 1);
     transition:color 0.2s linear
}

文章标题居中

1
2
3
4
5
6
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

文章图片悬停放大

1
2
3
4
5
6
7
8
9
10
11
.entry-thumbnail {
    overflow: hidden;
}
/*如果想放大并超出范围请删除上面代码*/
#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}
#post-content img:hover {
    transform: scale(1.05);
}

文章末尾转载说明

可使用插件 Copyright

自定义 JavaScript

以下内容添加到后台主题外观设置-开发者设置-自定义 JavaScript

鼠标点击爱心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
! function (e, t, a) {
  function n() {
    c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
  }
  function r() {
    for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
    requestAnimationFrame(r)
  }
  function o() {
    var t = "function" == typeof e.onclick && e.onclick;
    e.onclick = function (e) {
      t && t(), i(e)
    }
  }
  function i(e) {
    var a = t.createElement("div");
    a.className = "heart", d.push({
      el: a,
      x: e.clientX - 5,
      y: e.clientY - 5,
      scale: 1,
      alpha: 1,
      color: s()
    }), t.body.appendChild(a)
  }
  function c(e) {
    var a = t.createElement("style");
    a.type = "text/css";
    try {
      a.appendChild(t.createTextNode(e))
    } catch (t) {
      a.styleSheet.cssText = e
    }
    t.getElementsByTagName("head")[0].appendChild(a)
  }
  function s() {
    return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
  }
  var d = [];
  e.requestAnimationFrame = function () {
    return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
      setTimeout(e, 1e3 / 60)
    }
  }(), n()
}(window, document);

彩色数字

可用于将左侧各分类下文章数目变成彩色数字，右侧博客信息变成彩色，标签变成彩色。
如果启用 pjax，添加自定义 JavaScript 的同时还要将代码放入 pjax 函数中，否则无效。

1
2
3
4
5
6
7
8
9
10
11
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;
});

网页标签获得/失去焦点时更改标题内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//网页标签获得/失去焦点时更改标题内容
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)
    }
});

多处组合改动

复制弹窗提醒

第一步：将 layer.js 保存至自己的服务器上。

第二步：将以下代码添加到后台主题外观设置-开发者设置-自定义输出 head 头部的 HTML 代码，注意修改引用路径。

1
<script src="https://xxxx/layer.js"></script>

第三步：将以下代码添加到后台主题外观设置-开发者设置-自定义 JavaScript

1
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};

彩色 3D 云标签

  • 彩色标签
    以下内容添加到后台主题外观设置-开发者设置-自定义 CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #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;
    }

    以下内容添加到后台主题外观设置-开发者设置-自定义 JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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 标签
    以下内容添加到后台主题外观设置-开发者设置-自定义 CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    #tag_cloud-2>div {
        position: relative;
        width: 200px;
        height: 240px;
        border: 2px black;
        margin: 0 0px 0px 0
    }
    #tag_cloud-2>div>a {
        position: absolute;
    }

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

    以下内容添加到后台主题外观设置-开发者设置-自定义 JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    //3d标签，和css搭配使用
    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();

    如果启用了 pjax ，要实现 3D 彩色标签，则保持上面两个自定义 CSS 不变，将上面两个自定义 JavaScript 删掉，替换成下面这个自定义 JavaScript，然后后台 pjax 回调函数加上 colorfultags();around3D();

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    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++;
        });
    }
    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);
            }
        }
    }

文件改动

左侧导航全站友链显示头像

在 aside.php 文件中大约 213 行左右 “使用links插件，输出全站友链” 位置下方修改代码，在 php 代码中的 a 标签内加上：

1
<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" />

左、右下角彩色版权声明

找到主题文件夹下 handsomecomponentfooter.php 文件，找到下方这段代码（在文件中可按 Ctrl+F 进行查找）：

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

修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="wrapper bg-light">  
    <!--右下角-->
    <span class="pull-right hidden-xs text-ellipsis">
        <?php $this->options->BottomInfo(); ?>
        <div class="github-badge">
            <a href="http://www.typecho.org" title="Typecho" target="_blank">
                <span class="badge-subject">Powered by</span><span class="badge-value bg-blue">Typecho</span>
            </a>
        </div>
        <span> | </span>
        <div class="github-badge">
            <a href="https://www.ihewro.com/archives/489/" title="Handsome" target="_blank">
                <span class="badge-subject">Theme by</span><span class="badge-value bg-green">Handsome</span>
            </a>
        </div>
    </span>  
    <!--左下角-->
    <span class="text-ellipsis">
        <?php $this->options->BottomleftInfo(); ?>
        <div class="github-badge">
            <a href="https://blog.kecho.top" title="©2022 Kecho" target="_blank">
                <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2022 Kecho</span>
            </a>
        </div>
        <span> | </span>
        <div class="github-badge">
            <a href="http://www.beian.miit.gov.cn" title="赣ICP备 20004569号-1" target="_blank">
                <span class="badge-subject">备案号</span><span class="badge-value bg-green">赣ICP备 20004569号-1</span>
            </a>
        </div>
    </span>
</div>

然后在后台主题外观设置-开发者设置-自定义 CSS中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/*最底部版权声明样式*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 14px;
    background-color: #abbac3;
}
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.gundongtiao{
    animation: gundongtiao 1s infinite linear;
    height:2px;
    top:0;
    left:0;
    position: fixed;
    width:100%;
    z-index:9999;
}
@keyframes gundongtiao{
    0%{
        background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
    }
    20%{
        background: #000 linear-gradient(to left, #ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc,#5856d6);
    }
    40%{
        background: #000 linear-gradient(to left, #5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc);
    }
    60%{
        background: #000 linear-gradient(to left, #34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff);
    }
    80%{
        background: #000 linear-gradient(to left, #007aff,#34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa);
    }
    100%{
        background: #000 linear-gradient(to left, #5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#4cd964);
    }
}

第二步：在网站文件 footer.php (文件路径为 handsome/component/footer.php )末尾添加：

1
<div class="gundongtiao"></div>

添加访客 3D 地球

找到 handsome/component/sidebar.php 下方代码位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span>
     <span class="badge 
        pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
    </ul>
 </section> 

<!--插入位置-->

 <?php endif; ?>
 <?php if ($this->options->adContentSidebar != ""): ?>
 <!--广告位置-->
     <section id="a_d_sidebar" class="widget widget_categories wrapper-md clear">
         <h5 class="widget-title m-t-none text-md"><?php _me("广告") ?></h5>
         <?php $this->options->adContentSidebar(); ?>
    </section>
 <?php endif; ?>

插入以下代码：（可以修改其中的 height 来调整大小）

1
2
3
4
5
<!--自定义访客地球-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
    <h3 class="widget-title m-t-none text-md">访客统计</h3>
    <div id="visitors" class="tags l-h-2x" style="width:auto;height:185px;"></div>
</section>

然后去 RevolverMaps 找自己喜欢的地球样式，并且把它给的 JavaScript 代码复制下来，然后将复制的代码进行转义，即将 / 改为 \/ ，将 " 改为 \"，将转义后的代码和下方代码合并在一起，放到后台主题外观设置-开发者设置-自定义 JavaScript。

1
2
3
4
5
6
7
$(document).ready(function(){
$("#visitors").append("这里是您在 RevolverMaps 地球网站上复制的转义后的代码");
});
$(document).on('pjax:complete', function() {
$('#morphing').tooltip('show'); 
$("#visitors").append("这里是您在 RevolverMaps 地球网站上复制的转义后的代码");
});

如果你不会转义，也可以直接使用我转义好的：

1
<script type=\"text/javascript\" src=\"//rf.revolvermaps.com/0/0/8.js?i=51frwlq4tnv&m=0&c=ff0000&cr1=ffffff&f=arial&l=33&bv=65\" async=\"async\"><\/script>

评论框打字特效

详见 网页输入框打字特效

左侧导航栏输出优化

详见 Handsome 魔改教程：左侧边栏输出优化