鼠标点击文字特效

<script type="text/javascript"> 
/* 鼠标点击特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("Docker",     "Kubernetes","Ingress","Prometheus","Envoy","Kong","Istio","CoreDNS","Microservices","Service Mesh","Cloud     Native","Lyafei"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        function randomColor() {
          var flakeColor = new Array("#FFDA65", "#00BFFF", "#BA55D3", "#FFA07A", "#87CEEB", "#FFB6C1");
          var snowColor = flakeColor[Math.floor(flakeColor.length * Math.random())];
          return snowColor;
        }
        $i.css({ 
            "z-index": 666666, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-size": "18px",
            "font-weight": "bold", 
            "-webkit-user-select":"none",
            "-moz-user-select":"none",
            "-ms-user-select":"none",
            "user-select":"none",
            "color": randomColor() 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

文章版式圆角化

/*文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

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

文章图片获取焦点放大

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

头像自动旋转

/*头像自动旋转*/
.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;
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

文章内打赏图标跳动

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

心知天气

先去心知天气官网 https://www.seniverse.com 注册申请免费天气数据 API 密钥

<!-- 心知天气 -->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>
  (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
window.SeniverseWeatherWidget('show', {
    flavor: "slim",
    location: "WTW3SJ5ZBJUY",
    geolocation: true,
    language: "auto",
    unit: "c",
    theme: "auto",
    token: "心知天气API授权Token",
    hover: "enabled",
    container: "tp-weather-widget"
  })
</script>
<!-- 心知结束 -->

GZIP加速网站

/* 开启gzip压缩 */
ob_start('ob_gzhandler');

开启 gzip 检查工具测试一下是否开启成功 http://tool.chinaz.com/gzips

Gravatar国内源

# https://secure.gravatar.com/avatar or https://cdn.v2ex.com/gravatar 也可
define('__TYPECHO_GRAVATAR_PREFIX__', 'http://fdn.geekzu.org/avatar/');

伪静态

因为我用的阿里云的虚拟主机，是 Apache 的环境，所以需要写一个重写规则，来隐藏 index.php，建立一个 .htaccess 文件，放到网站根目录下，文件内容如下

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]

如果是 Nginx，重写代码如下

if (!-e $request_filename) {
    rewrite ^(.*)$ /index.php$1 last;
}

彩虹标签云

<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});