前言
内容非原创,内容由互联网收集而来。
教程:
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});};
效果:
复制一段本站内容
大佬,人生倒计时分享下呗,太喜欢了
自己f12扒一下啊
f12会自动跳转另一个网页啊 https://www.feiyubk.com/usr/themes/Typecho-Joe-Theme/console.html
现在不会了
能问一下代码样式是怎么加的么
用的Code Prettify插件
https://www.xcnte.com/archives/523/
::aru:cryingface::
但是,左上角的红黄绿三个色块的那一栏要怎么加呢。挺喜欢这个设计的 ::aru:shy::
这个也是插件给的样式
喜欢的话 可以自己扒出来 ::aru:cheer::
文章中的js可以直接调用么
可以直接调用