以下教程来自网络，摘自多个博客，由本人整合而成，包含大多数美化教程，一方面为分享给他人，一方面防止更新后一夜回到解放前。

如有侵权请联系删除

首页列表最前方广告位

1.新年倒计时 

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

自定义CSS

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

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

/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
    }
}

2.打赏图标跳动 

/*打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

3.首页文章列表悬浮 

/*首页文章列表悬浮*/
.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);
}

4.文章标题居中 

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

5.自定义鼠标指针


除使用下面代码外，还可直接下载插件HoerMouse使用

/*自定义鼠标指针*/
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;
}

6.自定义右侧滚动条 

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-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;
}

7.首页文章版式阴影化 

/*首页文章版式阴影化*/
    /*阴影颜色修改rgba后面的值*/
    .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;
    }

8.首页文章标题颜色渐变 

/*首页文章a标签颜色渐变*/
.index-post-title a:hover{
     color:rgba(107, 209, 255, 1);
     transition:color 0.2s linear
}

9.文章图片悬停放大 

/*文章图片悬停放大*/
.entry-thumbnail {
    overflow: hidden;
}/*如果想放大并超出范围请删除上面代码*/
#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}
#post-content img:hover {
    transform: scale(1.05);
}

10.文章末尾转载说明

可使用插件Copyright

11.首页文章列表宽度


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

.blog-post{
  max-width: 900px;
  margin: 0 auto;
}

自定义javascript

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

1.鼠标点击爱心 

// 鼠标点击爱心
! 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);

2.彩色数字

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

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

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

//网页标签获得/失去焦点时更改标题内容
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)
    }
});

多处组合改动

1.复制弹框提醒


功能：当有人复制内容时，会提醒复制者若要转载请保留本文链接

第一步：将以下代码添加到后台主题外观设置-开发者设置-自定义输出head 头部的HTML代码

<!--复制弹框提醒-->
<script src="https://blog.kecho.top/other/layer.js"></script>

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

<!--复制弹框提醒-->
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};

2.首页一行文字打印效果


第一步：将以下代码添加到后台主题外观设置-开发者设置-自定义输出head 头部的HTML代码

<!--一言打字特效-->
<script src="https://i.gordsky.cn/assets/weiyu/jquery.min.js"></script>
<script src="https://i.gordsky.cn/assets/weiyu/typed.min.js"></script>

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

<!--一言打字特效-->
function typedword(){
$.ajax({
type:"get",url:"https://api.gqink.cn/api/page/love",data:{page:'index'},async:true,success:function(word){
var list=[];
for(var i=0;i<word.data.length;i++){list.push(word.data[i['word'])}$("#word").typed({strings:list,typeSpeed:20,loop:true,backDelay:3000,})}}}

第三步：将以下代码添加到后台主题外观设置-初级设置-首页一行文字介绍

<p>
<i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i>
<span id="word">
<i class="glyphicon glyphicon-heart" aria-hidden="true"></i>
</span>
<i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i>
<script>$(function(){typedword();})</script>
</p>

3.原生JS实现彩色3d云标签

1.彩色标签

自定义css

/*彩色标签，和javascript搭配使用*/
#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

//彩色标签，和css搭配使用
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();

2.3D标签

自定义css

/*3d标签，和javascript搭配使用*/
#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

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

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

然后后台pjax回调函数加上

colorfultags();
around3D();

文件改动

1.首页全站友链显示图片


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

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

2.左、右下角版权声明改动


去网站根目录，找到主题文件夹下handsomecomponentfooter.php修改原有声明代码，找到下方这段代码（在文件中可按Ctrl+F进行查找）

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>

修改为

<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="©2020 Kecho" target="_blank">
                    <span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020 Kecho</span>
                 </a>
            </div>
             <span> | </span>
            <div class="github-badge">
                <a href="http://www.beian.miit.gov.cn" title="赣ICP备 20004569号" target="_blank">
                   <span class="badge-subject">备案号</span><span class="badge-value bg-green">赣ICP备 20004569号</span>
                </a>
            </div>
            <span> | </span>
            <div class="github-badge">
                <a href="https://blog.kecho.top/sitemap.xml" title="SiteMap" target="_blank">
                   <span class="badge-subject">站点地图</span><span class="badge-value bg-purple">SiteMap</span>
                </a>
            </div>
     </span>
</div>

然后在自定义CSS中添加

/*最底部版权声明样式*/
.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
}

3.网站顶部彩虹条


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

.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)末尾添加

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

4.添加“字数统计”和“加载耗时”


此处原作者链接均已失效

5.转移到手机阅读


图标出现位置和二维码大小位置可自己修改对应CSS

6.添加访客3D地图

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

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

插入以下代码

<!--自定义访客地球-->
       <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>

其中height可以自己修改

然后去 找自己喜欢的地球样式，并且把它给的javascript代码复制下来

将复制的代码进行转义，将/转为\/，将"转为\"

将转义后的代码和下方代码合并在一起，放到后台自定义javascript中

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

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

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

7.评论框打字特效

版权属于：Kecho

本文链接：https://blog.kecho.top/archives/33/

转载时须注明出处及本声明

Last modification：May 28th, 2021 at 11:16 am
© 允许规范转载
如果觉得我的文章对你有用，请我喝杯奶茶吧