建议您到我的博客阅读
原贴地址https://zigao.tk/archives/11.htm
前言
刚换了handsome主题觉得不错,但是自己修改了一下。因为刚买所以不知道更新会不会覆盖掉
所以来记录一下
正文
主题后台修改
自定义CSS
[collapse status=“false” title=“自定义CSS”]
/*首页文章图片获取焦点放大*/
.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);
}
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 5px;
}
.panel-small{
border: none;
border-radius: 5px;
}
.item-thumb{
border-radius: 5px;
}
/*头像呼吸光环和鼠标悬停旋转放大*/
.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(1080deg);
}
@keyframes light {
0% {
box-shadow: 0 0 30px #FFEB92;
}
25% {
box-shadow: 0 0 10px #FFEB92;
}
50% {
box-shadow: 0 0 30px #FFEB92;
}
75% {
box-shadow: 0 0 10px #FFEB92;
}
100% {
box-shadow: 0 0 30px #FFEB92;
}
}
/*评论头像旋转*/
.img-circle {
transition: all 0.3s;
}
.img-circle:hover {
transform: rotate(360deg);
}
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(173, 173, 173, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(173, 173, 173, 0.35);
}
/*打卡*/
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}
/*表情*/
.comment-content-true img {
max-width:30%!important
}
/*3D标签云*/
/*彩色部分*/
#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;
}
/*3D部分*/
#tag_cloud-2>div {
position: relative;
width: 240px;
height: 240px;
border: 2px black;
margin: 0 10px 15px 0
}
#tag_cloud-2>div>a {
position: absolute;
}
#tag_cloud-2>div>a:hover {
display: block
}
[/collapse]
自定义JavaScript
[collapse status=“false” title=“自定义JavaScript”]
//网页标签获得/失去焦点时更改标题内容
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)
}
});
//打卡
function a(a, b, c) {
if (document.selection) a.focus(),
sel = document.selection.createRange(),
c ? sel.text = b + sel.text + c: sel.text = b,
a.focus();
else if (a.selectionStart || "0" == a.selectionStart) {
var l = a.selectionStart,
m = a.selectionEnd,
n = m;
c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
c ? n += b.length + c.length: n += b.length - m + l;
l == m && c && (n -= c.length);
a.focus();
a.selectionStart = n;
a.selectionEnd = n
} else a.value += b + c,
a.focus()
}
var b = (new Date).toLocaleTimeString(),
c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
a(c, "滴!访客卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
},
zan: function() {
a(c, " 写得好好哟,支持支持! ::tieba:Y.tb89:: ")
},
cai: function() {
a(c, "骚年,我怀疑你写了一篇假的文章! ::tieba:Y.tb94:: ")
}
};
//复制代码
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: "复制成功",text: '如转载请注明出处!',showConfirmButton: false,timer: 2000});};
//3D标签云
//彩色效果
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效果
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();
[/collapse]
pjax回调函数
[collapse status=“false” title=“pjax回调函数”]
//Access控制台
window.Access.track()
//看板娘
pio.init(true)
//打卡
function a(a, b, c) {
if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
else if (a.selectionStart || "0" == a.selectionStart) {
var l = a.selectionStart,
m = a.selectionEnd,
n = m;
c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
c ? n += b.length + c.length : n += b.length - m + l;
l == m && c && (n -= c.length);
a.focus();
a.selectionStart = n;
a.selectionEnd = n
} else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
a(c, "滴!访客卡!打卡时间:" + b, ",请上车的乘客系好安全带~")
},
zan: function() {
a(c, " 写得好好哟,支持支持! ::tieba:Y.tb89:: ")
},
cai: function() {
a(c, "骚年,我怀疑你写了一篇假的文章! ::tieba:Y.tb94:: ")
}
};
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
for (var i = 0; i < pres.length; i++){
if (pres[i].getElementsByTagName('code').length > 0)
pres[i].className = 'line-numbers';}
Prism.highlightAll(true,null);}
//3D标签云
colorfultags();
around3D();
[/collapse]
自定义head
暂无
自定义body
[collapse status=“false” title=“自定义body”]
<!--漂亮的弹窗资源引入-->
<script src="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.all.js"></script>
<script src="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js"></script>
<link href="https://cdn.bootcss.com/limonte-sweetalert2/8.11.8/sweetalert2.css" rel="stylesheet">
![效果][1]
[/collapse]
改代码
博客信息
[collapse status=“false” title=“博客信息”]
修改handsome/component/sidebar.php
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span
class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载时间") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="eye"></i></span><span
class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
![效果][2]
[/collapse]
心知天气
[collapse status=“false” title=“心知天气”]
插入到/component/headnav.php中第55行
之后
<!-- 知心天气-->
<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
"flavor": "slim",
"location": "WX4FBXXFKE4F",
"geolocation": "enabled",
"language": "auto",
"unit": "c",
"theme": "chameleon",
"container": "tp-weather-widget",
"bubble": "enabled",
"alarmType": "badge",
"color": "#C6C6C6",
"uid": "公钥",
"hash": "密钥"
});
tpwidget("show");</script>
<!-- 知心结束-->
![效果][3]
[/collapse]
删除掉左侧栏的组成二字和分割线
[collapse status=“false” title=“删除掉左侧栏的组成二字和分割线”]
修改/component/aside.php
![F12看代码][4]
看到class是line dk我们删除掉它
<li class="line dk"></li>
<!--Components-->
<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
<span><?php _me("组成") ?></span>
</li>
```
删掉这么多
![效果][5]
[/collapse]
## 注意
这么多全加上会很卡可以删除文章头图放大的css会好一点
[1]: https://zigao.tk/usr/uploads/2020/02/3026200922.png
[2]: https://zigao.tk/usr/uploads/2020/02/98885327.png
[3]: https://zigao.tk/usr/uploads/2020/02/2489759288.png
[4]: https://zigao.tk/usr/uploads/2020/02/545234292.png
[5]: https://zigao.tk/usr/uploads/2020/02/1030645080.pngl