前言

内容非原创,内容由互联网收集而来。

教程:

1.鼠标样式美化

首先准备好鼠标的图片样式
然后在 后台-->设置外观-->开发者设置-->自定义 CSS下加入一下代码：

/*鼠标样式*/
body {
cursor: url('https://s1.feiyubk.com/Blog/img/normal.cur'), auto
}
a, [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
cursor: url('https://s1.feiyubk.com/Blog/img/link.cur'), auto !important
}

2.给网站添加访客计数统计

1.首先在主题 handsome/libs/Content.php文件里加入以下统计代码

//总访问量
function theAllViews()
{
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}

如图:

2.在 handsome/component/sidebar.php添加显示代码

<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted"></i> <span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

如图:

3.效果图:

3.给网站添加加载耗时显示

1.首先在主题 handsome/libs/Content.php文件里加入以下统计代码

//加载耗时
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime() );
$timestart = $mtime[1] + $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime() );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display ) {
echo $r;
}
return $r;
}

如图:

2.在 handsome/component/sidebar.php添加显示代码

<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

如图:

3.效果图:

4.彩色标签云&博客信息

1.在 后台-->设置外观-->PJAX-->PJAX回调函数添加以下代码：

let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor
});

2.在 后台-->设置外观-->开发者设置-->自定义 JavaScript添加以下代码：

<!--彩色标签云&博客信息-->
let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor
});

效果图:

5.右侧列表导航栏图标颜色

在 后台-->设置外观-->开发者设置-->自定义CSS添加以下代码：

/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

效果图:

6.鼠标点击特效

在 后台-->设置外观-->开发者设置-->自定义输出head 头部的HTML代码添加以下代码：

<!--鼠标点击-->
<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div><script type="text/javascript" src="https://s1.feiyubk.com/Blog/js/sb.js"></script>

效果:
本站点两下鼠标

7.复制弹框版权提醒

在 后台-->设置外观-->开发者设置-->自定义输出head 头部的HTML代码添加以下代码：

<!--复制弹框-->
<script src="https://s1.feiyubk.com/Blog/js/tc.js"></script>

在 后台-->设置外观-->开发者设置-->自定义 JavaScript添加以下代码：

<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

效果:
复制一段本站内容