代码来源于网络如有侵权还请告知，代码在typecho v1.2版本测试通过
一、自定义CSS
自定义CSS丨放入后台-外观设置-开发者设置-自定义CSS
1.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;
}
}
1.2左侧文章图标和评论头像鼠标悬停旋转
左侧文章图标和评论头像鼠标悬停旋转
/* 左侧文章图标和评论头像鼠标悬停旋转 */
.img-circle {
transition: all 0.3s;
}
.img-circle:hover {
transform: rotate(360deg);
}
.img-square {
transition: all 0.3s;
border-radius: 50% !important;
}
.img-square:hover {
transform: rotate(360deg);
}
1.3文章内打赏图标跳动
文章内打赏图标跳动
/* 文章内打赏图标跳动 */
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
1.4标签云整齐排列
标签云整齐排列
/*标签云整齐排列*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
1.5文章标题居中
文章标题居中
/*文章标题居中*/
.panel h2{
text-align: center;
}
.panel-small h2{
text-align: center;
}
.panel-picture h3{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
1.6首页文章图片获取焦点放大
首页文章图片获取焦点放大
/* 首页文章图片获取焦点放大 */
.item-thumb{
background-size: 100% 100%;
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);
}
1.7首页文章列表悬停上浮
首页文章列表悬停上浮
/* 首页文章列表悬停上浮 */
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
1.8首页头图悬停放大并超出范围
首页头图悬停放大并超出范围
/* 首页头图悬停放大并超出范围 */
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
1.9文章内头图和图片悬停放大并超出范围
文章内头图和图片悬停放大并超出范围
/* 文章内头图和图片悬停放大并超出范围 */
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
1.10文章头图图片显示全部
文章头图图片显示全部
/*头图图片显示比例*/
.item-thumb {
background-size: 100% 100% !important;
}
1.11右侧导航栏图标颜色
右侧导航栏图标颜色
/* 右侧导航栏图标颜色 */
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
1.12粗体上色
粗体上色
/* 粗体上色 */
strong{
color: rgb(255, 153, 0);
}
1.13小字体背景色
小字体背景色
/*小字体背景色*/
.badge {
background-color: #15A4CC;
}
1.14右侧导航栏
右侧导航栏
/*右侧导航栏*/
.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;}
1.15panel阴影
panel阴影
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
.app.container {
box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
1.16右侧栏气泡颜色加深
右侧栏气泡颜色加深
/* 右侧栏气泡颜色加深 */
div.post-tags>a,aside.asideBar .badge{background-color:#777}
1.17时光机圆形头像
时光机圆形头像
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
1.18美化网站右侧滚动条样式
1.18.1滚动条的尺寸
滚动条的尺寸
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 6px
}
1.18.2定义滚动条轨道
定义滚动条轨道
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
1.18.3定义滑块 内阴影+圆角
定义滑块 内阴影+圆角
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #30B07F;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
1.19自定义鼠标样式
自定义鼠标样式
/*鼠标*/
body {
cursor:url('https://kouketsu.top/src/assets/cursor/default.cur'), auto;
}
select, input, textarea, a, button {
cursor:url('https://kouketsu.top/src/assets/cursor/pointer.cur'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
cursor:url('https://kouketsu.top/src/assets/cursor/default.cur'), auto;
}
二、自定义body
自定义body丨放入后台-外观设置-开发者设置-自定义尾部-body
2.1五颜六色字体
五颜六色字体
<!-- 五颜六色字体开始 -->
<script>
function sjcolor(){
var colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999", "#3bca6e", "#f23232", "#834e75", "#23b7e5", "#f60"];
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > a > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > b").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#post-panel > div > div > div > div.panel-body > div.nav-tabs-alt > ul > li > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#post-panel > div > div > div > div").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#post-panel > div.blog-post > div > div.post-meta.wrapper-lg > h2 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#small_widgets > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#small_widgets > ul").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > div > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll(".m-l-xs").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#search_input").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > div > div a >span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#header > div > ul > li > div > div > div > div > div > div > a > span > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#tag_toc > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > header > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#typedWord").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#tag_cloud-2 h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#tag_cloud-2 a").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#blog_info > ul > li > span.badge.pull-right").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#blog_info > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > h4 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > small > span > span.meta-value").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-comments > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > div > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > small > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-random > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-random > ul > li > div > h4 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-random > ul > li > div > small > span > span.meta-value").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#sidebar > section.widget.widget_categories.wrapper-md.clear.visible-lg.visible-md > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
}sjcolor();
</script>
<!--五颜六色字体结束-->
2.2右键自定义
右键自定义
<!--右键自定义-->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:16px!important;width:136px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="https://kouketsu.top/"><i class = "iconfont icon-shouye"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class = "iconfont icon-copy"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class = "iconfont icon-sousuo"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class = "iconfont icon-qianjin"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class = "iconfont icon-houtui"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class = "iconfont icon-shuaxin"></i><span>重载网页</span></a></li>
<li><a href="https://kouketsu.top/index.php/friends.html"><i class = "iconfont icon-icon_jiaoyou"></i><span>和我当邻居</span></a></li>
<li><a href="https://kouketsu.top/index.php/liuyan.html"><i class = "iconfont icon-liuyan"></i><span>给我留言吧</span></a></li>
<li><a href="https://kouketsu.top/index.php/bilibili.html"><i class = "iconfont icon-bofangqi-bofangxiaodianshi"></i><span>追番进度</span></a></li>
<li><a href="https://kouketsu.top/index.php/movie.html"><i class = "iconfont icon-yingshi1"></i><span>电影院</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
<!--右键自定义-->
2.3输出控制台
输出控制台
<!--输出控制台-->
<script type="text/javascript">
console.clear(); //清空控制台
console.log("\n %c Catalpa Blog 控制台--没什么可看的","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;"); //万能控制台，可写html代码
</script>
<!--输出控制台-->
2.4防止复制
防止复制
<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>
2.5防调试
防调试
<!--防调试--> <script type="text/javascript"> $(document).ready(function () { document.oncontextmenu = function () { return false; } //document.onselectstart = function () { // return false; // } //document.oncopy = function () { //return false; // } document.onkeydown = function () { //f12 if (window.event && window.event.keyCode == 123) { event.keyCode = 0; event.returnValue = false; layer.msg("别看代码了=.=") return false; } //ctrl+u if (event.ctrlKey && window.event.keyCode == 85) { return false; } //ctrl+shift+i if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) { return false; } // Ctrl+S else if ((event.ctrlKey) && (event.keyCode == 83)) { return false; } }; }); </script> <!--<script> // 反调试函数,参数：开关，执行代码 function endebug(off, code) { if (!off) { ! function(e) { function n(e) { function n() { return u; } function o() { window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized ? t("on") : (a = "off", console.log(d), console.clear(), t(a)); } function t(e) { u !== e && (u = e, "function" == typeof c.onchange && c.onchange(e)); } function r() { l || (l = !0, window.removeEventListener("resize", o), clearInterval(f)); } "function" == typeof e && (e = { onchange: e }); var i = (e = e || {}).delay || 500, c = {}; c.onchange = e.onchange; var a, d = new Image; d.__defineGetter__("id", function() { a = "on" }); var u = "unknown"; c.getStatus = n; var f = setInterval(o, i); window.addEventListener("resize", o); var l; return c.free = r, c; } var o = o || {}; o.create = n, "function" == typeof define ? (define.amd || define.cmd) && define(function() { return o }) : "undefined" != typeof module && module.exports ? module.exports = o : window.jdetects = o }(), jdetects.create(function(e) { var a = 0; var n = setInterval(function() { if ("on" == e) { setTimeout(function() { if (a == 0) { a = 1; setTimeout(code); } }, 200); } }, 100); }) } } endebug(false, function() { // 非法调试执行的代码(不要使用控制台输出的提醒) document.write("检测到非法调试,请关闭后刷新重试!"); }); </script>--> <script> //debug调试时跳转页面 var element = new Image(); Object.defineProperty(element,'id',{get:function(){window.location.href="https://muyu.love"}}); console.log(element); </script>
三、自定义JavaScript
自定义JavaScript丨放入后台-外观设置-开发者设置-自定义JavaScript
3.1浏览器动态标题
浏览器动态标题
<!--浏览器动态标题开始-->
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！';
clearTimeout(titleTime);
}
else {
document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>
<!--浏览器动态标题结束-->
3.2彩色标签云
如果你设置了全局彩色字体，此处可忽略
3.2.1方法一
方法一
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;
});
3.2.2方法二
方法二
<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--彩色标签云-->
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;
});
<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中；
3.3左侧彩色图标
左侧彩色图标
< !--左侧彩色图标-->
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#7887EB",
"#ABDEF3",
"#6CC3E8",
"#86DEF3",
"#7887EB",
"#9BA8F5",
"#7988EC",
"#B3BCF5",
"#ABDEF3",
"#B3BCD7",
"#91D7F3",
"#7988EC",
"#9CD2E9",
"#9BA8F5",
"#B3BCF5"];
leftHeader.forEach(tag=> {
tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)]; tag.style.color=tagsColor
}
);
如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中；
3.4左上角加上FPS
左上角加上FPS
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中；
3.5播放器音乐大小
播放器音乐大小
<!--音乐音量--><!--volume=0.5,数值越小音量越小-->
setTimeout(function (){ document.querySelector(".skPlayer-source").volume=0.5;}, 3000);
3.6复制成功提示代码开始
复制成功提示代码开始
/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创，转载请注明出处！<br> 本文作者：kouketsu<br>原文链接："+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */
四、其他修改
下面基本上修改的是源代码，修改之前记得备份，以免出现问题
4.1添加背景图片
添加背景图片
在后台>外观设置>盒子模型/透明模式下的背景样式选择,勾选图片背景模式>背景颜色 / 图片添加链接
https://kouketsu.top/src/assets/images/2233.png
4.2博客介绍彩色特效
博客介绍彩色特效
后台>设置外观>初级设置>博客介绍添加以下代码
<span class="text-muted text-xs block"><div id="chakhsu"></div><script>var chakhsu=function (r) { function t() { return b[Math.floor(Math.random() * b.length)] } function e() { return String.fromCharCode(94 * Math.random() + 33) } function n(r) { for (var n=document.createDocumentFragment(), i=0; r > i; i++) { var l=document.createElement("span"); l.textContent=e(), l.style.color=t(), n.appendChild(l) } return n } function i() { var t=o[c.skillI]; c.step ? c.step--: (c.step=g, c.prefixP < l.length ? (c.prefixP >=0 && (c.text +=l[c.prefixP]), c.prefixP++) : "forward"===c.direction ? c.skillP < t.length ? (c.text +=t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction="backward", c.delay=a) : c.skillP > 0 ? (c.text=c.text.slice(0, -1), c.skillP--) : (c.skillI=(c.skillI + 1) % o.length, c.direction="forward")), r.textContent=c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l="❤", o=["何须仰望别人，自己亦是风景"].map(function (r) { return r + "" } ), a=2, g=1, s=5, d=75, b=["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c= { text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g } ; i() } ; chakhsu(document.getElementById('chakhsu')); </script></span></span>
4.3导航栏设置QQ头像
导航栏设置QQ头像
将地址中的123456修改为自己QQ然后将地址添加到初级设置 - 头像图片地址
https://blog.tianlei.work/qqtx.php?qq=123456
4.4左侧边栏导航
左侧边栏导航
后台>设置外观>高级设置>左侧边栏导航
{
"name": "项目仓库",
"class": "iconfont icon-github-fill",
"link": "https://kouketsu.top/index.php/github.html",
"target":"_self"
},
{
"name": "影视",
"class": "iconfont icon-yingshi1",
"link": "https://kouketsu.top/index.php/movie.html",
"target":"_self"
},
{
"name": "图床",
"class": "iconfont icon-xiangce1",
"link": "https://kouketsu.top/index.php/category/image/",
"target":"_self"
},
{
"name": "网盘",
"class": "iconfont icon-changyonglogo45",
"link": "https://kouketsu.top/src/pages/NetDisk/NetDisk.html",
"target":"_self"
},
{
"name": "音乐",
"class": "iconfont icon-yinle",
"link": "https://kouketsu.top/",
"target":"_self"
},
{
"name": "日记",
"class": "iconfont icon-riji",
"link": "https://kouketsu.top/",
"target":"_self"
},
{
"name": "bilibili追番",
"class": "iconfont icon-bofangqi-bofangxiaodianshi",
"link": "https://kouketsu.top/index.php/bilibili.html",
"target":"_self"
},
{
"name": "情侣鱼塘",
"class": "iconfont icon-zhenghunjiaoyou",
"link": "https://kouketsu.top/src/pages/Love/Love.html",
"target":"_self"
},
4.5首页最前方添加轮播图
首页最前方添加轮播图
后台>开发者设置>首页列表最前方广告位添加以下代码
<div id="index-carousel" class="box-shadow-wrap-normal border-radius-6 carousel slide m-b-md" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#index-carousel" data-slide-to="0" class=""></li>
<li data-target="#index-carousel" data-slide-to="1" class="active"></li>
</ol>
<div class="carousel-inner border-radius-6" role="listbox">
<div class="item border-radius-6"> <a href="https://kouketsu.top/" style="cursor: url("
https://kouketsu.top/src/assets/cursor/miku1.png"), pointer;"> <img class="border-radius-6"
src="https://kouketsu.top/src/assets/images/carousel-img01.png" data-holder-rendered="true">
<div class="carousel-caption">
<h3>愿你走出半生</h3>
<p></p>
</div>
</a> </div>
<div class="item border-radius-6 active"> <a href="https://kouketsu.top/" style="cursor: url("
https://kouketsu.top/src/assets/cursor/miku2.png"), pointer;"> <img class="border-radius-6"
src="https://kouketsu.top/src/assets/images/carousel-img02.png" data-holder-rendered="true">
<div class="carousel-caption">
<h3>归来仍是少年</h3>
<p> </p>
</div>
</a> </div>
</div> <a class="left carousel-control" href="#index-carousel" role="button" data-slide="prev" style="cursor: url("
https://kouketsu.top/src/assets/cursor/miku1.png"), pointer;"> <svg class="glyphicon-chevron-left"
viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#index-carousel"
role="button" data-slide="next" style="cursor: url(" https://kouketsu.top/src/assets/cursor/miku2.pngr"),
pointer;"> <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="glyphicon-chevron-right" aria-hidden="true">
<polyline points="9 18 15 12 9 6"></polyline>
</svg> <span class="sr-only">Next</span> </a>
</div>
4.6首页倒计时
首页倒计时
将以下代码添加至后台>开发者设置>首页列表最前方广告位。
/*首页倒计时*/
<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/01/01 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>
4.7首页快捷搜索
首页快捷搜索
下面代码添加至后台>首页列表最前方广告位
<div class="row visible-lg visible-md"><div class="col-lg-12"><div class="panel panel-default"><div class="panel-heading"><i class="fa fa-search" aria-hidden="true"></i> 快捷搜索 </div><div class="panel-body"><div class="nav-tabs-alt"><ul class="nav nav-tabs nav-justified"><li class="active"><a data-target="#tab-1" role="tab" data-toggle="tab" aria-expanded="true">百度</a></li><li class=""><a data-target="#tab-2" role="tab" data-toggle="tab" aria-expanded="false">搜狗</a></li><li class=""><a data-target="#tab-3" role="tab" data-toggle="tab" aria-expanded="false">360</a></li><li class=""><a data-target="#tab-4" role="tab" data-toggle="tab" aria-expanded="false">必应</a></li><li class=""><a data-target="#tab-5" role="tab" data-toggle="tab" aria-expanded="false">谷歌</a></li></ul></div><div class="row-row"><div class="cell scrollable hover"><div class="cell-inner"><div class="tab-content"><div class="tab-pane active" id="tab-1"><div class="wrapper-md"><div class="input-group m-b"><span class="input-group-addon">百度搜索</span><input type="text" id="baidu" class="form-control" placeholder="请输入搜索内容"></div><div class="text-center"><button class="btn m-b-xs w-xs btn-info" onclick="window.open('https://www.baidu.com/s?ie=UTF-8&wd='+$('#baidu').val())">搜索</button></div></div></div><div class="tab-pane" id="tab-2"><div class="wrapper-md"><div class="input-group m-b"><span class="input-group-addon">搜狗搜索</span><input type="text" id="sogou" class="form-control" placeholder="请输入搜索内容"></div><div class="text-center"><button class="btn m-b-xs w-xs btn-info" onclick="window.open('https://www.sogou.com/web?_asf=www.gqink.cn&query='+$('#sogou').val())">搜索</button></div></div></div><div class="tab-pane" id="tab-3"><div class="wrapper-md"><div class="input-group m-b"><span class="input-group-addon">360搜索</span><input type="text" id="so" class="form-control" placeholder="请输入搜索内容"></div><div class="text-center"><button class="btn m-b-xs w-xs btn-info" onclick="window.open('https://www.so.com/s?ie=utf-8&fr=www.gqink.cn&src=www.gqink.cn&q='+$('#so').val())">搜索</button></div></div></div><div class="tab-pane" id="tab-4"><div class="wrapper-md"><div class="input-group m-b"><span class="input-group-addon">必应搜索</span><input type="text" id="bing" class="form-control" placeholder="请输入搜索内容"></div><div class="text-center"><button class="btn m-b-xs w-xs btn-info" onclick="window.open('https://cn.bing.com/search?qs=n&form=www.gqink.cn&scope=web&sp=-1&q='+$('#bing').val())">搜索</button></div></div></div><div class="tab-pane" id="tab-5"><div class="wrapper-md"><div class="input-group m-b"><span class="input-group-addon">谷歌搜索</span><input type="text" id="Google" class="form-control" placeholder="请输入搜索内容"></div><div class="text-center"><button class="btn m-b-xs w-xs btn-info" onclick="window.open('https://www.google.com/search?q='+$('#Google').val())">搜索</button></div></div></div></div></div></div></div></div></div></div></div>
4.8右侧边栏添加响应耗时和访客总数
响应耗时和访客总数
首先将以下代码加到/usr/themes/handsome/libs/Content.php中，放在class Content{}之前
/*访问总量*/
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}
/*响应时间*/
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;
}
然后在/usr/themes/handsome/component/sidebar.php文件内，找到博客信息下面添加以下代码
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
<span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
<span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
4.9右侧边栏添加全站字数
右侧边栏添加全站字数
在 component/sidebar.php的开头加入下面的代码:
<?php
//字数统计
function allOfCharacters() {
$chars = 0;
$db = Typecho_Db::get();
$select = $db ->select('text')->from('table.contents');
$rows = $db->fetchAll($select);
foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
$unit = '';
if($chars >= 10000) { $chars /= 10000; $unit = '万'; }
else if($chars >= 1000) { $chars /= 1000; $unit = '千'; }
$out = sprintf('%.2lf %s',$chars, $unit);
return $out;
}
?>
在 component/sidebar.php处，选择合适位置加入以下代码（可以放在刚才响应耗时代码后面）
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
<span class="badge
pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
4.10右侧边栏添加在线人数
在线人数
首先将以下代码加在functions.php 文件位置在 /usr/themes/handsome/functions.php中
//在线人数
function online_users() {
$filename='online.txt'; //数据文件
$cookiename='Nanlon_OnLineCount'; //Cookie名称
$onlinetime=30; //在线有效时间
$online=file($filename);
$nowtime=$_SERVER['REQUEST_TIME'];
$nowonline=array();
foreach($online as $line){
$row=explode('|',$line);
$sesstime=trim($row[1]);
if(($nowtime - $sesstime)<=$onlinetime){
$nowonline[$row[0]]=$sesstime;
}
}
if(isset($_COOKIE[$cookiename])){
$uid=$_COOKIE[$cookiename];
}else{
$vid=0;
do{
$vid++;
$uid='U'.$vid;
}while(array_key_exists($uid,$nowonline));
setcookie($cookiename,$uid);
}
$nowonline[$uid]=$nowtime;
$total_online=count($nowonline);
if($fp=@fopen($filename,'w')){
if(flock($fp,LOCK_EX)){
rewind($fp);
foreach($nowonline as $fuid=>$ftime){
$fline=$fuid.'|'.$ftime."\n";
@fputs($fp,$fline);
}
flock($fp,LOCK_UN);
fclose($fp);
}
}
echo "$total_online";
}
在 component/sidebar.php处，选择合适位置加入以下代码（可以放在刚才代码后面）
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></i></span>
<span class="badge
pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="users"></i></span>
4.11右侧边栏添加百度收录总量
右侧边栏添加百度收录总量
注意API挂了会影响网站打开慢或者打不开等情况，请自行删除一下代码！
将下方代码粘贴至/usr/themes/handsome/component目录下的sidebar.php文件内。的博客信息下方合适位置
将下方代码粘贴至/usr/themes/handsome/component目录下的sidebar.php文件内。的博客信息下方合适位置
<!--百度收录-->
<script> <?php //查询本站收录域名
function baidu($baidu){ $url= $_SERVER['HTTP_HOST'];
$baidu="http://api.jybkw.cn/baidu/?domain=$url";
$str = file_get_contents($baidu); preg_match_all('/\d+/',$str,$arr);
$arr=join('',$arr[0]); echo $arr; } ?>
</script class="fa fa-paw" aria-hidden="true">
<!--百度收录-->
<li class="list-group-item text-second"><span class="blog-info-icons"> <i class="fa fa-paw"></i></span> <span
class="badge
pull-right"><?php echo baidu($baidu) ?></span><?php _me("百度收录") ?></li>
4.12右侧边栏添加二维码
右侧边栏添加二维码
打开/usr/themes/handsome/component文件夹下的sidebar.php在大概81行的section之后，也就是随机文章那一块之后,博客信息之前。当然具体位置可以按照自己的喜好来。
后面另起一行，填入以下的代码保存即可：
后面另起一行，填入以下的代码保存即可：
<section id="blog_qrurl" class="widget widget_categories wrapper-md clear">
<script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<h5 class="widget-title m-t-none text-md"><?php _me("移动端阅读") ?></h5>
<style>
#qrcode img{
max-width: 100%;
}
@media (max-width: 767px){
#qrcode{
display: none;
}
}
</style>
<div id="qrcode"></div>
<script>
var elText = window.location.href;
new QRCode(document.getElementById("qrcode"), elText);
</script>
</section>
4.13右侧边栏每日pixiv热榜图片
右侧边栏每日pixiv热榜图片
Github
主题设置>开发者设置>全局右侧广告位添加以下代码:
<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:240px; height:380px;"></iframe>
4.14右侧边栏添加人生倒计时
人生倒计时
第一步，先找到路径/usr/themes/handsome/component/aside.php，在217行左右添加如下代码
第一步，先找到路径/usr/themes/handsome/component/aside.php，在217行左右添加如下代码 <!-- 人生倒计时代码 -->
<section id="blog_info" class="widget widget_categories wrapper-md clear">
<h5 class="widget-title m-t-none text-md">
<svg t="1619320804283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15797" data-spm-anchor-id="a313x.7781069.0.i8" width="30" height="30"><path d="M171.733333 141.866667m-18.133333 0a18.133333 18.133333 0 1 0 36.266667 0 18.133333 18.133333 0 1 0-36.266667 0Z" fill="#71BCFF" p-id="15798"></path><path d="M864 210.133333m-17.066667 0a17.066667 17.066667 0 1 0 34.133334 0 17.066667 17.066667 0 1 0-34.133334 0Z" fill="#71BCFF" p-id="15799"></path><path d="M865.066667 288m-11.733334 0a11.733333 11.733333 0 1 0 23.466667 0 11.733333 11.733333 0 1 0-23.466667 0Z" fill="#71BCFF" p-id="15800"></path><path d="M796.8 780.8m-9.6 0a9.6 9.6 0 1 0 19.2 0 9.6 9.6 0 1 0-19.2 0Z" fill="#71BCFF" p-id="15801"></path><path d="M840.533333 743.466667l-9.6-6.4 6.4-9.6c1.066667-1.066667 0-2.133333-1.066666-3.2-1.066667-1.066667-2.133333 0-3.2 1.066666l-6.4 9.6-9.6-6.4c-1.066667-1.066667-2.133333 0-3.2 1.066667-1.066667 1.066667 0 2.133333 1.066666 3.2l9.6 6.4-6.4 9.6c-1.066667 1.066667 0 2.133333 1.066667 3.2s2.133333 0 3.2-1.066667l6.4-9.6 9.6 6.4c1.066667 1.066667 2.133333 0 3.2-1.066666 0-1.066667 0-2.133333-1.066667-3.2zM894.933333 114.133333L874.666667 101.333333l12.8-20.266666c1.066667-2.133333 1.066667-5.333333-1.066667-6.4-2.133333-1.066667-5.333333-1.066667-6.4 1.066666L867.2 96l-19.2-12.8c-2.133333-1.066667-5.333333-1.066667-6.4 1.066667-1.066667 2.133333-1.066667 5.333333 1.066667 6.4l19.2 12.8-12.8 20.266666c-1.066667 2.133333-1.066667 5.333333 1.066666 6.4 2.133333 1.066667 5.333333 1.066667 6.4-1.066666l12.8-20.266667 19.2 12.8c2.133333 1.066667 5.333333 1.066667 6.4-1.066667s2.133333-5.333333 0-6.4zM275.2 81.066667l7.466667-11.733334c1.066667-1.066667 0-3.2-1.066667-3.2s-3.2 0-3.2 1.066667l-7.466667 11.733333-11.733333-7.466666c-1.066667-1.066667-3.2 0-3.2 1.066666s0 3.2 1.066667 3.2l11.733333 7.466667-7.466667 11.733333c-1.066667 1.066667 0 3.2 1.066667 3.2 1.066667 1.066667 3.2 0 3.2-1.066666l7.466667-11.733334 11.733333 7.466667c1.066667 1.066667 3.2 0 3.2-1.066667 1.066667-1.066667 0-3.2-1.066667-3.2l-11.733333-7.466666z" fill="#d81e06" p-id="15802" data-spm-anchor-id="a313x.7781069.0.i9" class="selected"></path><path d="M826.666667 419.2c0-160-130.133333-290.133333-290.133334-290.133333S246.4 259.2 246.4 419.2c0 138.666667 97.066667 253.866667 227.2 282.666667h-72.533333c-8.533333 0-16 7.466667-16 16v2.133333c0 8.533333 7.466667 16 16 16H672c8.533333 0 16-7.466667 16-16v-2.133333c0-8.533333-7.466667-16-16-16h-72.533333c130.133333-28.8 227.2-144 227.2-282.666667zM628.266667 789.333333H443.733333c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16h184.533334c8.533333 0 16-7.466667 16-16v-2.133334c0-9.6-6.4-16-16-16zM586.666667 878.933333h-100.266667c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16H586.666667c8.533333 0 16-7.466667 16-16v-2.133334c0-8.533333-7.466667-16-16-16z" fill="#F8E9EC" p-id="15803" data-spm-anchor-id="a313x.7781069.0.i7" class=""></path><path d="M704 402.133333c-8.533333 0-14.933333-6.4-16-14.933333-3.2-41.6-20.266667-80-46.933333-110.933333-5.333333-6.4-5.333333-17.066667 2.133333-22.4 6.4-5.333333 17.066667-5.333333 22.4 2.133333 30.933333 36.266667 49.066667 81.066667 54.4 129.066667 1.066667 8.533333-5.333333 17.066667-14.933333 17.066666H704z" fill="#FFFFFF" p-id="15804"></path><path d="M793.6 406.4c0-168.533333-137.6-306.133333-306.133333-306.133333S181.333333 237.866667 181.333333 406.4c0 128 78.933333 236.8 189.866667 282.666667H352c-8.533333 0-16 7.466667-16 16v2.133333c0 8.533333 7.466667 16 16 16h272c8.533333 0 16-7.466667 16-16v-2.133333c0-8.533333-7.466667-16-16-16h-19.2C714.666667 643.2 793.6 533.333333 793.6 406.4zM487.466667 680.533333C337.066667 680.533333 213.333333 556.8 213.333333 406.4s122.666667-274.133333 274.133334-274.133333 274.133333 122.666667 274.133333 274.133333-122.666667 274.133333-274.133333 274.133333zM580.266667 776.533333H395.733333c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16h184.533334c8.533333 0 16-7.466667 16-16v-2.133334c0-9.6-7.466667-16-16-16zM537.6 866.133333H437.333333c-8.533333 0-16 7.466667-16 16v2.133334c0 8.533333 7.466667 16 16 16h100.266667c8.533333 0 16-7.466667 16-16v-2.133334c0-8.533333-7.466667-16-16-16z" fill="#3A3A3A" p-id="15805"></path></svg></span>
<?php _me("人生倒计时") ?></h5>
<div class="aside aside-count">
<div class="content">
<div class="item" id="dayProgress">
<div class="title">今日已经过去<span></span>小时</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-1"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="weekProgress">
<div class="title">这周已经过去<span></span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-2"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="monthProgress">
<div class="title">本月已经过去<span></span>天</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-3"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
<div class="item" id="yearProgress">
<div class="title">今年已经过去<span></span>个月</div>
<div class="progress">
<div class="progress-bar">
<div class="progress-inner progress-inner-4"></div>
</div>
<div class="progress-percentage"></div>
</div>
</div>
</div>
</div>
</section>
第二步-添加完成后,在主题后台自定义css里添加如下代码，一般都是在主题设置-开发者设置-自定义CSS样式丢进去就行了
/* 时间表 */
.aside-count .content {
padding: 15px
}
.aside-count .content .item {
margin-bottom: 15px
}
.aside-count .content .item:last-child {
margin-bottom: 0
}
.aside-count .content .item .title {
font-size: 12px;
color: var(--minor);
margin-bottom: 5px;
display: flex;
align-items: center
}
.aside-count .content .item .title span {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px
}
.aside-count .content .item .progress {
display: flex;
align-items: center
}
.aside-count .content .item .progress .progress-bar {
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--classC);
width: 0;
min-width: 0;
flex: 1;
margin-right: 5px
}
@keyframes progress {
0% {
background-position: 0 0
}
100% {
background-position: 30px 0
}
}
.aside-count .content .item .progress .progress-bar .progress-inner {
width: 0;
height: 100%;
border-radius: 5px;
transition: width 0.35s;
-webkit-animation: progress 750ms linear infinite;
animation: progress 750ms linear infinite
}
.aside-count .content .item .progress .progress-bar .progress-inner-1 {
background: #bde6ff;
background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.aside-count .content .item .progress .progress-bar .progress-inner-2 {
background: #ffd980;
background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.aside-count .content .item .progress .progress-bar .progress-inner-3 {
background: #ffa9a9;
background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.aside-count .content .item .progress .progress-bar .progress-inner-4 {
background: #67c23a;
background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}
.aside-count .content .item .progress .progress-percentage {
color: var(--info)
}
第三步-添加完成后,在到/usr/themes/handsome/assets/js里面创建名为timeinfo.js后把下面代码复制进去保存.
function init_life_time() {
function getAsideLifeTime() {
/* 当前时间戳 */
let nowDate = +new Date();
/* 今天开始时间戳 */
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
/* 今天已经过去的时间 */
let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
/* 今天已经过去的时间比 */
let todayPassHoursPercent = (todayPassHours / 24) * 100;
$('#dayProgress .title span').html(parseInt(todayPassHours));
$('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
$('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
/* 当前周几 */
let weeks = {
0: 7,
1: 1,
2: 2,
3: 3,
4: 4,
5: 5,
6: 6
};
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
$('#weekProgress .title span').html(weekDay);
$('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
$('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
let year = new Date().getFullYear();
let date = new Date().getDate();
let month = new Date().getMonth() + 1;
let monthAll = new Date(year, month, 0).getDate();
let monthPassPercent = (date / monthAll) * 100;
$('#monthProgress .title span').html(date);
$('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
$('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
let yearPass = (month / 12) * 100;
$('#yearProgress .title span').html(month);
$('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
$('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
}
getAsideLifeTime();
setInterval(() => {
getAsideLifeTime();
}, 1000);
}
init_life_time()
第四步-最后到开发者设置-自定义输出body尾部的HTML代码里面引入此js
<!-- 倒计时引用的JS -->
<script src="https://blog.kk03.cn/usr/themes/handsome/assets/js/timeinfo.js"></script>
<!-- 倒计时引用的JS -->
4.15底部版权美化
底部版权美化
4.15.1方式一
先把CSS代码复制到自定义CSS
/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #f6b044;
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-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
}
.github-badge .bg-orange {
background-color: #fadfa3
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background: linear-gradient(to right , #7A88FF, #d27aff);
.github-badge .bg-purple {
background-color: #ab34e9
}
左侧代码,复制到>博客底部左侧信息
<!-- 左侧底部 -->
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站版权信息">
<a href="https://kouketsu.top/" target="_blank" title="kouketsuの小窝" style="pointer;">
<span class="badge-subject bg-orange">Copyright</span><span class="badge-value bg-purple">kouketsuの小窝</span>
</a>
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站萌ICP备案号">
<a href="https://icp.gov.moe" target="_blank" title="萌ICP备XXX号" style="pointer;">
<span class="badge-subject bg-orange">萌ICP备</span><span class="badge-value bg-purple">20224455号</span>
</a>
<!--<a href="https://icp.gov.moe/?keyword=20224455" target="_blank">萌ICP备20224455号</a>-->
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站ICP备案号">
<a href="https://beian.miit.gov.cn/" target="_blank" title="沪ICP备XXX号" style="pointer;">
<span class="badge-subject bg-orange">鲁ICP备</span><span class="badge-value bg-purple">2022001823号</span>
</a>
</div>
右侧代码,复制到>博客底部右侧信息
<!-- 右侧底部 -->
<span class="pull-right hidden-xs text-ellipsis">
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站程序">
<a href="http://typecho.org/" target="_blank" title="程序" style="pointer;">
<span class="badge-subject bg-orange">程序</span><span class="badge-value bg-purple">Typecho</span>
</a>
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站UI模板">
<a href="http://typecho.org/" target="_blank" title="Theme by Handsome" style="pointer;">
<span class="badge-subject bg-orange">UI</span><span class="badge-value bg-purple">Handsome</span>
</a>
</div>
</span>
4.15.2方式二
打开/handsome/component/footer.php，找到div class="wrapper bg-light"，修改成想要的样式
<!--底部版权-->
<footer id="footer" class="app-footer" role="footer">
<div class="wrapper bg-light" style="background-color: #FFF;">
<!-- 左侧底部 -->
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站版权信息">
<a href="https://kouketsu.top/" target="_blank" title="kouketsuの小窝" style="pointer;">
<span class="badge-subject bg-orange">Copyright</span><span class="badge-value bg-purple">kouketsuの小窝</span>
</a>
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站萌ICP备案号">
<a href="https://icp.gov.moe" target="_blank" title="萌ICP备XXX号" style="pointer;">
<span class="badge-subject bg-orange">萌ICP备</span><span class="badge-value bg-purple">20224455号</span>
</a>
<!--<a href="https://icp.gov.moe/?keyword=20224455" target="_blank">萌ICP备20224455号</a>-->
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站ICP备案号">
<a href="https://beian.miit.gov.cn/" target="_blank" title="沪ICP备XXX号" style="pointer;">
<span class="badge-subject bg-orange">鲁ICP备</span><span class="badge-value bg-purple">2022001823号</span>
</a>
</div>
<!-- | -->
<!-- 右侧底部 -->
<span class="pull-right hidden-xs text-ellipsis">
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站程序">
<a href="http://typecho.org/" target="_blank" title="程序" style="pointer;">
<span class="badge-subject bg-orange">程序</span><span class="badge-value bg-purple">Typecho</span>
</a>
</div>
<div class="github-badge" data-toggle="tooltip" data-placement="top" data-original-title="本站UI模板">
<a href="http://typecho.org/" target="_blank" title="Theme by Handsome" style="pointer;">
<span class="badge-subject bg-orange">UI</span><span class="badge-value bg-purple">Handsome</span>
</a>
</div>
</span>
</div>
</footer>
<!--底部版权END-->
自定义CSS中加入
/* 底部页脚小徽标 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.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: #3282b8}
.github-badge .bg-purple {background-color: #3F51B5}
.github-badge .bg-green {background-color: #3bca6e}
4.16百度收录检测
百度收录检测
1.在模板post.php加入
<!--百度收录-->
<li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>
2.还是在post.php内加入（必须引入jquery）
<script>
function baidu_check(){
$.getJSON("https://cn1.api.wfblog.net/baidu.php?domain="+window.location.href,function(result){
if (result.code == 200) {
$('#baidu_icon').removeClass('glyphicon-refresh');
$('#baidu_icon').addClass('glyphicon-ok-circle');
$('#baidu_result').text('百度已收录');
}else if(result.code == 403){
$('#baidu_icon').removeClass('glyphicon-refresh');
$('#baidu_icon').addClass('glyphicon-info-sign');
$('#baidu_result').text('百度未收录');
baidu_push();
}else{
$('#baidu_icon').removeClass('glyphicon-refresh');
$('#baidu_icon').addClass('glyphicon-remove-circle');
$('#baidu_result').text('查询收录失败');
}
});
}
function baidu_push(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
}
baidu_check();
</script>
3.pjax回调函数
<!--百度收录-->
if((typeof baidu_check) !== "undefined"){
baidu_check();
}
其他模板
1.在模板functions.php末尾合适处加入以下代码
function baidu_check() {
$url = baidu_url();
$api = 'https://cn1.api.wfblog.net/baidu.php?domain='; //更改为你自己的API
$result = json_decode(file_get_contents($api.$url));
if($result['code'] == 200){
echo '百度已收录';
}elseif($result['code'] == 403){
echo '<a style="color:red;" rel="external nofollow" title="点击提交收录" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename='.$url.'">百度未收录</a>';
}else{
echo '查询收录失败';
}
}
function baidu_url(){
if((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')){
return 'https'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}else{
return 'http'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}
}
2.然后在你需要输出检测结果的地方加入《?php baidu_check(); ?》即可
**API源码**
<?php
/**
* Baidu
* @editer: Weifeng
* @link: https://wfblog.net
* @version: 1.0
*/
error_reporting(0);
header("Access-Control-Allow-Origin:*");
header('Content-type: application/json');
$domain = @$_GET['domain'];
if(!isset($domain) || empty($domain) || $domain==''){
$data = array(
"code" => false,
"msg" => "未传入请求参数！"
);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
exit;
}
if(substr($domain, -1) == '/'){
$domain = substr($domain,0,strlen($domain)-1);
}
$data = checkBaidu($domain);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
function checkBaidu($url){
$header = array(
"Host:www.baidu.com",
"Content-Type:application/x-www-form-urlencoded",//post请求
"Connection: keep-alive",
"Referer:https://www.baidu.com",
"User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"
);
$url = 'https://www.baidu.com/s?ie=UTF-8&wd='.urlencode($url).'&usm=3&rsv_idx=2&rsv_page=1';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_HTTPHEADER, $header);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
if(strpos($output, '没有找到') || strpos($output, '很抱歉')){
$data = array(
"code" => 403,
"msg" => "该域名暂时未被百度收录！"
);
}else{
$number = GetBetween($output,'<span class="nums_text">百度为您找到相关结果约','个</span>');
if(empty($number) || $number == 0){
$number = GetBetween($output,'<b>找到相关结果数约','个</b></p>');
if(empty($number) || $number == 0){
$data = array(
"code" => false,
"msg" => "获取百度收录失败！"
);
return $data;
}
}
$data = array(
"code" => 200,
"msg" => "该域名已被百度收录！",
"number" => str_replace(',','',$number)
);
}
return $data;
}
function GetBetween($content,$start,$end){
$r = explode($start, $content);
if (isset($r[1])){
$r = explode($end, $r[1]);
return $r[0];
}
}
?>
api失效将api修改为自己的即可
4.17文章内加一个END及版权声明
版权声明
在主题文件post.php内 文章内容 83行下面加入以下代码：
<!--版权声明开始-->
<div class="entry-content l-h-2x">
<div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
<span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div>
<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid rgba(255, 112, 173, 0.35); ;text-align: left;">
<span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
<span>本文链接：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明：若无注明，本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。<br></span>
<span>转载声明：进行许可转载引用文章应遵循相同协议</span>
</div>
</div>
<!--版权声明结束-->
4.18高级删除线
高级删除线
首先在主题文件header.php内底部head标签上面添加以下代码：
<!--高级删除线-->
<style>
span.CA a.external,span.CA a.external:visited,span.CA a.extiw,span.CA a.extiw:visited {
color: #252525
}
.CA,.CA a,a .CA,.CA a.new {
background-color: #252525;
color: #252525;
text-shadow: none
}
body:not(.CA_toggle_on) .CA:hover,body:not(.CA_toggle_on) .CA:active,body:not(.CA_toggle_on) .CA.off {
transition: color .13s linear;
color: #fff
}
body:not(.CA_toggle_on) .CA:hover a,body:not(.CA_toggle_on) a:hover .CA,body:not(.CA_toggle_on) .CA.off a,body:not(.CA_toggle_on) a:hover .CA.off {
transition: color .13s linear;
color: #add8e6
}
body:not(.CA_toggle_on) .CA.off .new,body:not(.CA_toggle_on) .CA.off .new:hover,body:not(.CA_toggle_on) .new:hover .CA.off,body:not(.CA_toggle_on) .CA.off .new,body:not(.CA_toggle_on) .CA.off .new:hover,body:not(.CA_toggle_on) .new:hover .CA.off {
transition: color .13s linear;
color: #ba0000
}
</style>
使用方法就是在文章内写以下，建议带英文状态下的（!!!）
！！！
<span class="CA" title="你知道的太多了">你想说啥</span>
！！！
4.19首页全站友链显示图片
首页全站友链显示图片
在aside.php里面大约210行的地方修改代码，在a标签内加上：
<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=
或者复制下方全部代码替换
<!--使用links插件，输出全站友链-->
<?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\"
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" /><span>{name}</span></a></li>";
Handsome_Plugin::output($mypattern1, 0, "ten");?>
</ul>
</li>
4.20网站背景添加海浪背景
网站背景添加海浪背景
添加至后台主题设置-开发者设置-自定义CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
添加至后台主题设置-开发者设置-自定义网站头部代码
<div id="wavesDIV" style="display: block;">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
<use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
</g>
</svg>
</div>
4.21博客背景添加冒泡动画
博客背景添加冒泡动画
设置
id: '', //容器ID
num: 100, // 个数
start_probability: 0.1, // 如果数量小于num，有这些几率添加一个新的
radius_min: 1, // 初始半径最小值
radius_max: 2, // 初始半径最大值
radius_add_min: .3, // 半径增加最小值
radius_add_max: .5, // 半径增加最大值
opacity_min: 0.3, // 初始透明度最小值
opacity_max: 0.5, // 初始透明度最大值
opacity_prev_min: .003, // 透明度递减值最小值
opacity_prev_max: .005, // 透明度递减值最大值
light_min: 40, // 颜色亮度最小值
light_max: 70, // 颜色亮度最大值
is_same_color: false, //泡泡颜色是否相同
background:"#f1f3f4" //背景颜色
在后台>开发者设置>自定义输出body尾部的HTML代码中添加：
<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
4.22一键评论打卡
一键评论打卡
1.首先在后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码: PJAX回调函数也加入这个代码
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, " 写得好好哟,我要给你生猴子！::funny:04:: ")
},
cai: function() {
a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
}
};
2.打开主题目录的component/comments.php里面的126行到144行附近：
<div class="comment-form-comment form-group">
<label for="comment"><?php _me("评论") ?>
<span class="required text-danger">*</span></label>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
<div class="OwO" style="display: inline;"></div>
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
<div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
<div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
<div class="secret_comment" id="secret_comment" data-toggle="tooltip"
data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
<label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
<div class="secret_comment_check">
<label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
<input type="checkbox" id="secret_comment_checkbox">
<i></i>
</label>
</div>
</div>
</div>
3.在后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}
4.23 404页面自动返回
404页面自动返回
打开/usr/themes/handsome/404.php，在第130行左右，在 h1 class="text-shadow text-white">404 后面添加：
<br>
<small class="text-muted letterspacing">
<b id="sp">10</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>
然后把下面这段放到最后的/body前
<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=10;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>
4.24自定义后台路径
自定义后台路径
第一步
将Typecho程序根目录中的后台文件夹"admin"改名，名字即为你想自定义的地址名，例如：将"admin"改为"xxx"
第二步
修改根目录文件"config.inc.php"，打开该文件后找到
/* 后台路径(相对路径) /
define('TYPECHO_ADMIN_DIR', '/admin/');
将代码中"admin"改为你自定义的地址，例如：xxx
将Typecho程序根目录中的后台文件夹"admin"改名，名字即为你想自定义的地址名，例如：将"admin"改为"xxx"
第二步
修改根目录文件"config.inc.php"，打开该文件后找到
/* 后台路径(相对路径) /
define('TYPECHO_ADMIN_DIR', '/admin/');
将代码中"admin"改为你自定义的地址，例如：xxx
上面两次操作设置的名称应保持一致！
请不要在 robots.txt 文件中泄露你刚刚修改过后的文件地址。
请不要在 robots.txt 文件中泄露你刚刚修改过后的文件地址。
4.25加载动画
加载动画
以下代码添加至/usr/themes/handsome/header.php内 最后
<!--加载动画-->
<style>
#PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}
#PageLoading-center{width:100%;height:100%;position:relative;}
#PageLoading-center-absolute{
position:absolute;left:50%;top:50%;
height:200px;width:200px;
margin-top:-100px;
margin-left:-100px;
}
.object2{
-moz-border-radius:50% 50% 50% 50%;
-webkit-border-radius:50% 50% 50% 50%;
border-radius:50% 50% 50% 50%;
position:absolute;
border-left:5px solid #FFB6C1;
border-right:5px solid #b6def7;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
-webkit-animation:animate 2s infinite;
animation:animate 2s infinite;
}
#object_one{left:75px;top:75px;width:50px;height:50px;}
#object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
#object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
#object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}
@-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
@keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
</style>
<!--加载动画-->
<body id="body" class="fix-padding skt-loading">
<body id="body" class="fix-padding" style="overflow:hidden">
<div id="PageLoading" style="z-index:99999999;">
<div id="PageLoading-center">
<div id="PageLoading-center-absolute">
<div class="object2" id="object_four"></div>
<div class="object2" id="object_three"></div>
<div class="object2" id="object_two"></div>
<div class="object2" id="object_one"></div>
</div>
</div>
</div>
</body>
</body>
主题设置，自定义 JavaScript，添加以下代码
/*加载动画开始*/
$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});
/*加载动画结束*/
4.26给typecho加上心知天气
给typecho加上心知天气
1.知心天气官网www.seniverse.com注册申请免费API 密钥
2.将以下代码放入/usr/themes/handsome/component/headnav.php第55行!-- / search form --之后并更换你的公钥秘钥即可
2.将以下代码放入/usr/themes/handsome/component/headnav.php第55行!-- / search form --之后并更换你的公钥秘钥即可
<!-- 知心天气-->
<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>
<!-- 知心结束-->
4.27时光机添加置顶视频
时光机添加置顶视频
将以下代码分别添加至/usr/themes/handsome/component/ssy.php的?php if ($comments->have()): ?> div class="streamline b-l m-l-lg m-b padder-v"之后
<!--梦想视频-->
<div id="comment-867" class="comment-body comment-parent comment-odd comment-by-author">
<div class="panel-heading pos-rlt b-b b-light">
<center>你的梦想是什么！</center>
</div>
<div class="panel-body">
<p><video src="视频地址" style="background-image:url(视频封面图);background-size: cover;" preload="preload"></video><div class="play-button"></div></p> </div>
</div>
4.28为typecho站点设置多个域名
为typecho站点设置多个域名
打开程序目录的这个文件 /var/Widget/Options.php
使用搜索找到这个位置
使用搜索找到这个位置
/** 初始化站点信息 */
if (defined('__TYPECHO_SITE_URL__')) {
$this->siteUrl = __TYPECHO_SITE_URL__;
}
上面的代码最前面加入下面的代码（域名改成你自己的）
if($_SERVER['SERVER_NAME']=='www.muyu.com'){//chen added
$this->siteUrl = 'http://www.muyu.com';
}
4.29超链接特效
超链接特效
修改 /usr/themes/handsome/assets/css/handsome.min.css，删除这两节：
.comment-content-true a:hover,.wrapper-lg .entry-content a:hover{
color:#222;border-bottom-color:#222
}
.comment-content-true a,.wrapper-lg .entry-content a{
color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all
}
后台 自定义CSS：
/*超链接特效*/
.comment-content-true a:not(.light-link):not(.post_inser_a),.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a){position:relative;margin:auto 4px;color:#23b7e5;-webkit-transition:color .3s;transition:color .3s;-webkit-perspective:600px;perspective:600px;-webkit-perspective-origin:50% 100%;perspective-origin:50% 100%;word-wrap:break-word;word-break:break-all;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:inherit;width:inherit}
.comment-content-true a:not(.light-link):not(.post_inser_a):focus,.comment-content-true a:not(.light-link):not(.post_inser_a):hover,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover{color:#fff}
.comment-content-true a:not(.light-link):not(.post_inser_a)::after,.comment-content-true a:not(.light-link):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{position:absolute;top:0;left:-4px;z-index:-1;box-sizing:content-box;padding:0 4px;width:100%;height:100%;content:''}
.comment-content-true a:not(.light-link):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{background-color:#23b7e5;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1);-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
.comment-content-true a:not(.light-link):not(.post_inser_a):focus::before,.comment-content-true a:not(.light-link):not(.post_inser_a):hover::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover::before{-webkit-transform:rotateX(0);transform:rotateX(0)}
.comment-content-true a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after{border-bottom:1px solid #23b7e5}
如果使用版权提示插件，链接有可能会超出提示框，添加以下css解决：
.content-copyright {overflow: hidden}
4.30文章分页
文章分页
修改文件 typecho/usr/themes/handsome/libs/Content.php
1.在文件最后一个}前添加如下两个私有函数
请注意：添加代码前删除掉如下代码中第4行splitword变量的值中page前后的两个间隔。
1.在文件最后一个}前添加如下两个私有函数
请注意：添加代码前删除掉如下代码中第4行splitword变量的值中page前后的两个间隔。
// 文章分页
private static function parse($text) {
$pagebar='';
$content=$text;
$splitword='= page =';
if(strpos($text, $splitword) !==false) {
$contents=explode($splitword, $text);
$page=isset($_GET['page'])?intval($_GET['page']): 1;
$content=$contents[$page-1];
$request=Typecho_Request: :getInstance();
$_GET['page']='{page}';
$pagebar=self: :setPageBar(count($contents), $page, $request->getPathinfo()."?". http_build_query($_GET));
}
$text=$content.$pagebar;
return $text;
}
private static function setPageBar($pageTotals, $page, $pageTemplate) {
$isRewrite=Typecho_Widget: :widget('Widget_Options')->rewrite;
$siteUrl=Typecho_Widget: :widget('Widget_Options')->rootUrl;
$pageTemplate=($isRewrite ? rtrim($siteUrl, '/') : $siteUrl."index.php") . $pageTemplate;
$splitPage=3;
$pageHolder=array('{page}', '%7Bpage%7D');
if ($pageTotals < 1) {
return;
}
$pageBar .='<nav class="text-center m-t-lg m-b-lg" role="navigation"><ol class="page-navigator">';
if ($page > 1) {
$pageBar .='<li class="prev"><a href="'. str_replace($pageHolder, $page - 1, $pageTemplate) . '">'. '<i class="fontello fontello-chevron-left"></i></a></li>';
}
for ($i=1; $i <=$pageTotals; $i ++) {
if($page==$i) {
$pageBar .='<li class="current"><a href="'. str_replace($pageHolder, $i, $pageTemplate) . '" '. ($i !=$page ? '' : '') . '>'. $i . '</a></li>';
}
else {
if((($i==$page-3) and ($i !=1)) or (($i==$page+3) and ($i !=$pageTotals))) {
$pageBar .='<li><span>...</span></li>';
}
else {
if((($i<$page-3) and ($i !=1)) or (($i>$page+3) and ($i !=$pageTotals))) {}
else {
$pageBar .='<li><a href="'. str_replace($pageHolder, $i, $pageTemplate) . '" '. ($i !=$page ? '' : '') . '>'. $i . '</a></li>';
}
}
}
}
if ($page < $pageTotals) {
$pageBar .='<li class="next"><a href="'. str_replace($pageHolder, $page + 1, $pageTemplate) . '">'. '<i class="fontello fontello-chevron-right"></i></a></li>';
}
$pageBar .='</ol></nav><style>.page-navigator>li>a, .page-navigator>li>span{ background: #EFEFEF; line-height: 1.42857143; padding: 6px 12px; border-bottom-style:none !important; }</style>';
return $pageBar;
}
2.修改parseContentPublic函数的定义，添加一个参数$need2pagination并提供替换值 在文件 Content.php的1987行前后。
默认值 False，因此至少情况下不会调用内容分页函数避免对handsome原来的处理逻辑造成的影响，某些评论者在评论内容中插入分页符就比较比较尴尬了
public static function parseContentPublic($content,$need2pagination=False)
3.在parseContentPublic函数中调用分页函数
在文件 Content.php的2092行前后，语句 return $content;之前增加一行代码，代码片段:
//文章分页
if ($need2pagination==True) {
$content=self: :parse($content);
}
return $content;
4.对于需要分页的内容，修改调用parseContentPublic函数，添加need2pagination参数
例如需要提供post的分页功能，仅需要修改如下函数 public static function postContent($obj, $status, $way = "origin")，搜索文本 该部分仅登录用户可见，在文件 Content.php的2092行前后：
// $content = Content::parseContentPublic($content); //该行修改前语句，下一行为修改后语句
$content = Content::parseContentPublic($content,True);
}
return trim($content);
5.在文章中分页
文章需要分页处添加行 = page =（注意去掉页面前后的间隔）。当然也可以修改代码换成其他标识。
