请注意，本文编写于 527 天前，最后修改于 218 天前，其中某些信息可能已经过时。
说明
关于handsome主题的一些美化和修改统一记录,方便以后开速查找；
浏览器动态标题
主题设置 – 开发者设置 – 自定义输出body尾部的HTML代码添加以下代码
<!--浏览器动态标题开始--> <script> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png"); document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！'; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png"); document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } }); </script> <!--浏览器动态标题结束-->复制弹窗提示
在模板目录的header.php文件中引入layer资源文件代码
<script src="//lib.baomitu.com/layer/3.1.1/layer.js"></script>主题设置 – 开发者设置 – 自定义JavaScript 中添加以下代码
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};复制代码自带版权说明
将以下JS代码放在post.php的文章内页php
复制代码自带版权
/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创，转载请注明出处！<br> 本文作者：作者<br>原文链接：<br>"+sitesurl,
title: "复制成功",
type: "success",
autoHide: !1,
time: "5000"
})
}}
/* 复制成功提示代码结束 */头像呼吸光环和鼠标悬停旋转放大
主题设置 – 开发者设置 – 自定义CSS添加以下代码
/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
}
}如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：
/*头像呼吸光环和鼠标悬停旋转放大*/
@keyframes light {
from {
box-shadow: 0 0 4px #f00;
}
to {
box-shadow: 0 0 16px #f00;
}
}左侧文章图标和评论头像鼠标悬停旋转
主题设置 – 开发者设置 – 自定义CSS添加以下代码
.img-square {
transition: all 0.3s;
}
.img-square:hover {
transform: rotate(360deg);
}文章内打赏图标跳动
主题设置 – 开发者设置 – 自定义CSS添加以下代码
/*文章内打赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}首页文章列表悬停上浮
主题设置 – 开发者设置 – 自定义CSS添加以下代码
.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); }首页头图悬停放大并超出范围
主题设置 – 开发者设置 – 自定义CSS添加以下代码
.index-post-img {overflow: hidden; } .item-thumb {transition: all 0.3s; } .item-thumb:hover {transform: scale(1.1) }文章内头图和图片悬停放大并超出范围
主题设置 – 开发者设置 – 自定义CSS添加以下代码
/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}右侧导航栏图标颜色
主题设置 – 开发者设置 – 自定义CSS添加以下代码
.glyphicon-fire {color: #ff0000; }
.nav-tabs-alt .glyphicon-comment {color: #495dc3; }
.glyphicon-transfer {color: #0e5458; }文章标题居中
主题设置 – 开发者设置 – 自定义CSS添加以下代码
文章标题居中
/*文章标题居中*/
.panel h2{
text-align: center;
}
.panel-small h2{
text-align: center;
}
.panel-picture h3{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}春节倒计时代码
主题设置 – 开发者设置 – 首页列表最前方广告位添加以下代码
春节倒计时
<!--倒计时开始--> <div class="gn_box"> <h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</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">157 天</span> <span id="t_h">9 时</span> <span id="t_m">7 分</span> <span id="t_s">42 秒</span> </div> </center> <script type="text/javascript"> function getRTime() { var EndTime = new Date('2020/01/25 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); document.getElementById("t_d").innerHTML = d + " 天"; document.getElementById("t_h").innerHTML = h + " 时"; document.getElementById("t_m").innerHTML = m + " 分"; document.getElementById("t_s").innerHTML = s + " 秒"; } setInterval(getRTime, 1000); </script> </div> <!--倒计时结束-->主题设置 – 开发者设置 – 自定义CSS添加以下代码
/* 倒计时开始 */ .gn_box { padding: 10px 14px; 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; }右侧栏加入每日pixiv热榜图片
Github：https://github.com/mokeyjay/Pixiv-daily-top50-widget
主题设置 – 开发者设置 – 全局右侧广告位添加以下代码
<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:240px; height:380px;"></iframe>然后修改handsome/component/sidebar.php找到<h3 class="widget-title m-t-none text-md"><?php _me(“广告”) ?></h3>，将”广告”修改为P站每日热门
标签云颜色
主题设置 – 开发者设置 – 自定义JS添加以下代码
标签云
<!--纯黑标签云--> 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回调函数中；
心知天气
心知天气
心知天气API申请：https://www.seniverse.com/widgetv3
在/usr/themes/handsome/component/headnav.php中添加以下代码
- 偏右边：将以下代码放入
/usr/themes/handsome/component/headnav.php第180行左右<?php echo $headerItemsOutput; ?>之后并更换你的公钥秘钥即可 - 偏左边：将以下代码放入
/usr/themes/handsome/component/headnav.php第104行左右<!-- 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>
<!-- 心知天气-->心情文字居中
修改/usr/themes/handsome/index.php文件，位于公告位置下方
<header class="bg-light lter b-b wrapper-md"> 替换成 <header class="bg-light lter b-b wrapper-md" style="text-align:center">去除顶部博客名称
修改/usr/themes/handsome/index.php文件，位于公告位置下方
删除以下代码
<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>去除文章底部修改日期及版权说明
修改/usr/themes/handsome/libs/Content.php文件，大概570行左右
删除以下内容
return '<div class="show-foot"> <div class="notebook"><i class="fontello fontello-clock-o"></i><span>'._mt("最后修改").'：'.date(_mt("Y 年 m 月 d 日 h : i A") , $time + $obj).'</span> </div> <div class="copyright" data-toggle="tooltip" data-html="true" data-original-title="'.$interpretation.'"><span>© '.$content.'</span> </div> </div> ';首页文章版式阴影化
主题设置 – 开发者设置 – 自定义CSS添加以下代码
#阴影颜色修改rgba后面的值 /*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); }博客介绍彩色特效
后台 – 设置外观 – 初级设置 – 博客介绍添加以下代码
彩色特效
<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>博客页脚美化
页脚美化
usr/themes/handsome/component/footer.php 大概117 行至137行
<footer id="footer" class="app-footer" role="footer">
<!-- <div class="wrapper bg-light">-->
<!-- <a class="pull-right hidden-xs text-ellipsis">-->
<!-- <span class="label badge" style="margin-right: 10px;">Powered by typecho</span>-->
<!-- <a href="https://www.ihewro.com/archives/489/" class="label badge">Theme by handsome</a>-->
<!-- </a>-->
<!-- <a href="" target="_blank" rel="noopener noreferrer" class="label badge" data-toggle="tooltip" data-original-title="">Copyright ©2021</a>-->
<!-- </div>-->
<div class="wrapper bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo();
// 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
?>
Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
href="https://www.ihewro.com/archives/489/">handsome</a>
</span>
<span class="text-ellipsis">© <?php echo date("Y"); ?> Copyright <?php
$this->options->BottomleftInfo(); ?></span>
</div>
</footer>替换为
<footer id="footer" class="app-footer" role="footer">
<!-- <div class="wrapper bg-light">-->
<!-- <a class="pull-right hidden-xs text-ellipsis">-->
<!-- <span class="label badge" style="margin-right: 10px;">Powered by typecho</span>-->
<!-- <a href="https://www.ihewro.com/archives/489/" class="label badge">Theme by handsome</a>-->
<!-- </a>-->
<!-- <a href="" target="_blank" rel="noopener noreferrer" class="label badge" data-toggle="tooltip" data-original-title="">Copyright ©2021</a>-->
<!-- </div>-->
<div class="wrapper bg-light">
<span class="pull-right hidden-xs text-ellipsis">
<?php $this->options->BottomInfo();
// 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
?>
</span>
<span class="text-ellipsis"> <?php
$this->options->BottomleftInfo(); ?></span>
</div>
</footer>开发者设置➡自定义CSS
/* 底部样式修复 */
.wrapper{
padding: 11px;
}
/*底部页脚*/
.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: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}博客底部左侧信息
<a class="github-badge">
<span class="badge-subject">Copyright</span>
<span class="badge-value bg-orange">©2022 悠悠看书</span>
</a>
<a class="github-badge" target="_blank" href="https://www.uuks.cn/sitemap.xml">
<span class="badge-subject">网站地图</span>
<span class="badge-value bg-green">sitemap</span>
</a>博客底部右侧信息
<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
<span class="badge-subject">Themes</span>
<span class="badge-value bg-blue">Handsome</span>
</a>
<a class="github-badge" target="_blank" href="https://typecho.org">
<span class="badge-subject">Powered</span>
<span class="badge-value bg-purple">Typecho</span>
</a>滑稽表情
handsome主题美化记录 - 持续更新
传送门：滑稽表情包下载
解压后会得到一个OwO.json文件及funny文件夹；
然后将funny文件夹放置在/usr/themes/handsome/usr/img/emotion目录下即可；
然后用我们解压得到的OwO.json文件替换掉/usr/themes/handsome/usr目录下的OwO.json文件即可；
handsome主题美化记录 - 持续更新
顶部RSS图标
主图设置 – 高级设置 – 顶部导航按钮配置
{"name":"RSS","class":"fontello fontello-rss icon-fw","link":"https://mvpsky.com/feed/","target":"_blank"}后台登陆界面美化
截图
handsome主题美化记录 - 持续更新
预览
https://mvpsky.com/admin
下载
传送门：源码下载
方法
第一步：用压缩包内的login.php文件替换掉/admin/login.php文件
第二步：将压缩包内的style文件夹上传到/admin/文件夹下
第三步：修改login.php第35行，把“SunPma’Blog”替换成自己的信息
文章图片居中并显示注释
注释
修改方法
typecho安装目录下的var/HyperDown.php搜索image第357行找到如下代码
<img src="{$url}" alt="{$escaped}" title="{$escaped}">
替换为以下代码
<img class="img" src="{$url}" alt="{$escaped}" title="{$escaped}"><center><div class="image-caption">{$escaped}</div></center>主题设置 – 开发者设置 – 自定义CSS添加以下代码
/*设置图片插入居中*/ .img {clear:both;display:block;margin:auto;} /* 设置注释样式*/ .image-caption{ min-width: 20%; max-width: 80%; min-height: 22px; display: inline-block; padding: 10px; margin: 0 auto; border-bottom: 1px solid #d9d9d9; font-size: 14px; color: #969696; line-height: 1.7; }默认的字体颜色是配合非透明模式的，透明模式将上面color: #969696修改为color:white
404自动返回首页
在/usr/themes/handsome/404.php文件130行左右添加以下代码添加在<h1 class="text-shadow text-white">404</h1>这行下面即可
<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>导航栏设置QQ头像
https://gordsky.cn/api/qq.php?qq=123456
将地址中的123456修改为自己QQ然后将地址添加到初级设置 – 头像图片地址
开启全站灰色（黑白模式）
全站灰色
方式一
（适用于handsome主题，设置外观–开发者设置–自定义CSS 添加以下代码）
<!--开启黑白模式--> html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);} html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); } html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} <!--黑白模式结束-->方式二
<!--开启黑白模式--> <style type="text/css">html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} </style> <!--黑白模式结束-->方式三
<!--开启黑白模式--> <style>html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter:progid：lolXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; } </style> <!--黑白模式结束-->方式四
<!--开启黑白模式--> <style>html {-webkit-filter: grayscale(100%);}</style> <!--黑白模式结束-->修复搜索框按钮
Handsome主题的搜索框按钮一直有问题，按不下去不能正常使用，可以按以下方法修复
打开/usr/themes/handsome/component/headnav.php文件
搜索search_submit然后将整行替换成如下代码
<span id="search_submit" class="transparent input-group-btn" onclick=jumpForSearch(search_input.value)>然后在文件的最后面添加如下代码后保存即可
<!--/开始修复搜索按钮--> <script type="text/javascript"> function jumpForSearch(search_ct){if(search_ct.length>0){$.pjax({url: "https://"+document.domain+'/search/'+search_ct, container: '#content', fragment: '#content', timeout: 8000 }); } } </script> <!--/修复搜索按钮结束-->文章页面显示标签云
编辑/usr/themes/handsome/component/sidebar.php文件
在<?php if (IS_TOC): ?>上面添加以下代码
<!--文章显示标签云-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear"> <h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3> <div class="tags l-h-2x"> <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?> <?php if($tags->have()): ?> <?php while ($tags->next()): ?> <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a> <?php endwhile; ?> <?php endif; ?> </div> </section>
<!--显示标签云结束-->底栏高度设置
后台-设置外观-开发者设置-自定义CSS 添加以下代码
<!--底栏高度开始--> .wrapper {padding: 10px } <!--底栏高度结束-->背景粒子特效
后台-设置外观-开发者设置-自定义输出body 尾部的HTML代码
<!--背景粒子特效-->
<script type="text/javascript"color="255,0,0"opacity="1"count="150" src="https://cdn.jsdelivr.net/gh/546426894/typecho@8.4/usr/themes/handsome/assets/js/canvas-nest.min.js"></script>自定义音乐播放器音量
后台-设置外观-开发者设置-自定义JS 添加以下代码
setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);其中volume=0.3为播放器音量控制，默认为0.3支持修改范围为0.0 - 1可自行设置
复制弹框
用法：
- 如果你开启了PJAX，那么需要在
主题设置》PJAX》PJAX回调函数一栏内填入以下函数，然后保存即可。
/*复制弹窗*/
kaygb_copy();- 最后复制下方代码到
自定义JavaScript即可
/*复制弹窗*/
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创，转载请注明出处！<br> 本文作者：Tehran<br>原文链接：<br>"+sitesurl,
title: "复制成功",
type: "success",
autoHide: !1,
time: "5000"
})
}}进入弹窗
用法：自定义body丨放入后台-外观设置-开发者设置-自定义尾部-body
点击展开
<!--进入弹窗-->
<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
message: "加载完毕，感谢您的访问！<br >" + kaygb_referrer(),
title: "Welcome！",
type: "success",
autoHide: !1,
time: "5000"
})
</script>手机适配中不显示热门及标签云
用法：将以下代码添加至 后台-开发者设置-自定义CSS。
/*手机不显示*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}国家公祭日全站变灰
用法：设置外观–开发者设置–自定义输出head头部的HTML代码
/*国家公祭日全站变灰*/
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>天气显示插件
天气显示插件--Wiather
插件80KB很小
作者blog[秉松博客]
GOTOP插件
上传至 usr/plugins目录**
解压
后台启动
此处内容需要评论回复后（审核通过）方可阅读。
一共使用3个插件一个原版一个gotop和Wiather天气插件，前面使用AliceStyle美化插件感觉还行但是后面发现也就是几行代码改实现就行插件压缩包都是10MB以上了，所以自己手动改了。
位置地球
方法：进入handsome后台，选择“更换外观--设置外观--开发者设置--全局右侧边栏广告位”，将复制的代码粘贴即可
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/6.js?i=5wrl2mbvawy&m=7&c=e63100&cr1=ffffff&f=arial&l=0&bv=90&lx=-420&ly=420&hi=20&he=7&hc=a8ddff&rs=80" async="async"></script>替换广告字：打开“/usr/themes/handsome/component/sidebar.php”文件，搜索“广告”二字（handsome8.0.0 大约在111行），改为“位置地球”。
主题设置有备份只记录修改文件的地方！
手机不显示
/* #tag_cloud-2为标签云，#tabs-4为博客评论随机文章，#a_d_sidebar为广告，#blog_info为博客信息，可自行组合显示或隐藏*/
@media (max-width:767px) {
#blog_info,#a_d_sidebar {
display: none;
}
}顶部标题设置
顶部标题
{"name":"归档","feather":"archive","link":"https://www.uuks.cn/archives.html"},
{"name": "Github","feather":"github","link": "https://www.uuks.cn/github.html"},
{"name": "留言板","feather": "at-sign","link": "https://www.uuks.cn/msg.html"},
{
"name": "关于",
"class": "glyphicon glyphicon-qrcode",
"sub": [{
"name": "关于我",
"class": "glyphicon glyphicon-user",
"link": "https://www.uuks.cn/start-page.html",
"target":"_self"
}, {
"name": "时光机",
"feather": "clock",
"link": "https://www.uuks.cn/cross.html",
"target":"_self"
}, {
"name":"万花筒",
"feather":"slack",
"link": "https://www.uuks.cn/loves.html",
"target":"_self"
}, {
"name":"影视搜索",
"feather":"film",
"link":"http://168.xuj.cool/",
"target":"_self"
}, {
"name":"音乐搜索",
"feather":"music",
"link":"https://www.uuks.cn/music/index.php",
"target":"_self"
}, {
"name":"在线游戏",
"feather":"airplay",
"link":"https://www.uuks.cn/xyx/index.html",
"target":"_self"
}
]
}阴影设置
自定义CSS
阴影
#阴影颜色修改rgba后面的值 /*panel阴影*/
.panel{box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); }
.panel:hover{ box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); }
.panel-small{ box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); }
.panel-small:hover{ box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(240,80,80, 0.35); }
#如果也想使盒子四周也有阴影，加上以下代码
.app.container { box-shadow: 0 0 30px rgba(240,80,80, 0.35); }加载动画
以下代码放置 主题文件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','');
});首页文章头图获取焦点放大
首页文章头图
/*首页文章头图放大特效*/
.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);
}
.blog-post .panel-small:not(article) {
transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:not(article) {
transition: all 0.3s;
}
.blog-post .panel-picture:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
.index-post-img {
overflow: hidden;
}
.index-post-img-small {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
.item-thumb-small {
transition: all 0.3s;
}
.item-thumb-small:hover {
transform: scale(1.1)
}
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}正文末尾End标识
在模板文件post.php的适当位置添加下述代码：
<!--内容结束分割线-->
<div class="tt-fenge-end">
<span>End</span>
</div>
<!--/ 内容结束分割线-->添加Css样式：
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}转载申明效果
转载申明
效果请参见本站正文内容结尾的版权申明效果。
在模板文件post.php的上方位置添加下述代码：
<!--知识共享许可协议-->
<div class="tt-license">
<p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：<?php $this->title() ?></p>
<p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：<?php $this->permalink() ?></p>
<p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
<p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
</div>
<!-- / 知识共享许可协议-->添加Css样式：
/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}透明模式添加Css样式：去除背景
/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}博客添加一个自适应的灯笼
一段十分简单的代码，Handsome主题用户直接插入到/usr/themes/handsome/component/header.php中约第400行左右的<body>标签后即可。自适应的灯笼
<div class="kyz-lantern1">
<div class="lantern">
<div class="line"></div>
<div class="lantern-a">
<div class="lantern-b">
<div class="mcl8_com">
新
</div>
</div>
</div>
<div class="kyz_spike kyz_spike-a">
<div class="kyz_spike-b"></div>
<div class="kyz_spike-c"></div>
</div>
</div>
</div>
<div class="kyz-lantern2">
<div class="lantern">
<div class="line"></div>
<div class="lantern-a">
<div class="lantern-b">
<div class="mcl8_com">
年
</div>
</div>
</div>
<div class="kyz_spike kyz_spike-a">
<div class="kyz_spike-b"></div>
<div class="kyz_spike-c"></div>
</div>
</div>
</div>
<div class="kyz-lantern3">
<div class="lantern">
<div class="line"></div>
<div class="lantern-a">
<div class="lantern-b">
<div class="mcl8_com">
快
</div>
</div>
</div>
<div class="kyz_spike kyz_spike-a">
<div class="kyz_spike-b"></div>
<div class="kyz_spike-c"></div>
</div>
</div>
</div>
<div class="kyz-lantern4">
<div class="lantern">
<div class="line"></div>
<div class="lantern-a">
<div class="lantern-b">
<div class="mcl8_com">
乐
</div>
</div>
</div>
<div class="kyz_spike kyz_spike-a">
<div class="kyz_spike-b"></div>
<div class="kyz_spike-c"></div>
</div>
</div>
</div>
<style>
.kyz-lantern1{position:fixed;top:-25px;left:-30px;z-index:9999;pointer-events:none}.kyz-lantern2{position:fixed;top:-25px;left:65px;z-index:9999;pointer-events:none}.kyz-lantern3{position:fixed;top:-25px;right:65px;z-index:9999;pointer-events:none}.kyz-lantern4{position:fixed;top:-25px;right:-30px;z-index:9999;pointer-events:none}@media(max-width:42.625em){.kyz-lantern1{top:-40px;left:-50px;transform:scale(.7)}.kyz-lantern2{top:-40px;left:10px;transform:scale(.7)}.kyz-lantern3{top:-40px;right:10px;transform:scale(.7)}.kyz-lantern4{top:-40px;right:-50px;transform:scale(.7)}}.kyz-lantern1 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 3s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.kyz-lantern2 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 4s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.kyz-lantern3 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 5s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.kyz-lantern4 .lantern{position:relative;width:120px;height:90px;margin:50px;background:#d8000f;background:rgba(216,0,15,0.8);border-radius:50% 50%;-webkit-transform-origin:50% -100px;-webkit-animation:swing 4s infinite ease-in-out;box-shadow:-5px 5px 30px 4px rgba(252,144,61,1)}.lantern-a{width:100px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:12px 8px 8px 10px;border-radius:50% 50%;border:2px solid #dc8f03}.lantern-b{width:45px;height:90px;background:#d8000f;background:rgba(216,0,15,0.1);margin:-2px 8px 8px 26px;border-radius:50% 50%;border:2px solid #dc8f03}.line{position:absolute;top:-50px;left:60px;width:2px;height:50px;background:#dc8f03}.kyz_spike-a{position:relative;width:5px;height:20px;margin:-5px 0 0 59px;-webkit-animation:swing 4s infinite ease-in-out;-webkit-transform-origin:50% -45px;background:#ffa500;border-radius:0 0 5px 5px}.kyz_spike-b{position:absolute;top:14px;left:-2px;width:10px;height:10px;background:#dc8f03;border-radius:50%}.kyz_spike-c{position:absolute;top:18px;left:-2px;width:10px;height:35px;background:#ffa500;border-radius:0 0 0 5px}.lantern:before{position:absolute;top:-7px;left:29px;height:12px;width:60px;content:" ";display:block;z-index:999;border-radius:5px 5px 0 0;border:solid 1px #dc8f03;background:#ffa500;background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03)}.lantern:after{position:absolute;bottom:-7px;left:10px;height:12px;width:60px;content:" ";display:block;margin-left:20px;border-radius:0 0 5px 5px;border:solid 1px #dc8f03;background:#ffa500;background:linear-gradient(to right,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03)}.mcl8_com{font-family:微软雅黑,Arial,Lucida Grande,Tahoma,sans-serif;font-size:3.2rem;color:#dc8f03;font-weight:bold;line-height:85px;text-align:center}html.theme-dark .kyz-lantern1 .lantern,html.theme-dark .kyz-lantern2 .lantern,html.theme-dark .kyz-lantern3 .lantern,html.theme-dark .kyz-lantern4 .lantern{box-shadow:-5px 5px 50px 4px rgba(250,108,0,1)}@-moz-keyframes swing{0%{-moz-transform:rotate(-10deg)}50%{-moz-transform:rotate(10deg)}100%{-moz-transform:rotate(-10deg)}}@-webkit-keyframes swing{0%{-webkit-transform:rotate(-10deg)}50%{-webkit-transform:rotate(10deg)}100%{-webkit-transform:rotate(-10deg)}}
</style>UserAgent插件
- 解压后修改文件夹名为 UserAgent，将插件上传至网站目录的
/usr/plugins下 - 在 Typecho 后台「插件管理」处启用插件
在需要显示的地方插入以下代码：
<?php UserAgent_Plugin::render($comments->agent); ?>
以 handsome 主题为例，即添加到 handsome/component/comments.php 文件里的 <span class="comment-author vcard"> ... </span> 后面。
栏目列表美化小头图首页文章样式修改
修改后的使用前提： 文章编辑页面中，文章头图样式选择选择 小版式 。
注意如果开启图片懒加载 需要关闭
模板代码部分
文件：Content.php文件，位于：主题 / handsome / libs /， ~将第1156行开始的下述代码(V7.3.1)，~ 将第1164行开始的下述代码(V8.1.0)：点击展开
<div class="panel-small single-post box-shadow-wrap-normal">
<div class="index-post-img-small post-feature index-img-small">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy" {$backgroundImageHtml}></div>
</a>
</div>替换为：
点击展开
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
<div class="index-post-img-small post-feature index-img-small tt-left-box">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
</a>
</div>
<div class="tt-blur-img" {$backgroundImageHtml}></div>CSS部分
设置外观→开发者设置→自定义CSS，填入以下css样式：
点击展开
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}左侧彩色图标
用法 自定义 JavaScript 和pjax回调添加下面代码
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#878787","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});文章数量，评论数目个数 背景色修改
CSS
/*小字体背景色*/
.badge {
background-color: #15A4CC;
}修改左侧栏样式
替换 aside.php 文件内 <!-- nav -->之间的内容
代码
<!-- nav -->
<nav ui-nav class="navi clearfix">
<ul class="nav">
<!--index-->
<!-- <div class="line dk hidden-folded"></div> stille 修改,隐藏首页logo和下方菜单之间的白线-->
<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
<!--以下-stille手动修改-->
<!-- <span>导航</span> -->
<!--以下-stille手动修改-->
</li>
<!--主页-->
<li>
<a href="<?php $this->options->rootUrl(); ?>/" class="auto">
<span class="nav-icon"><i data-feather="home"></i></span>
<span><?php _me("首页") ?></span>
</a>
</li>
<!-- /主页 -->
<!--以下-stille手动复制-分类category-->
<!--stille 001 分类category-->
<li >
<a class="auto">
<span class="pull-right text-muted">
<i class="fontello icon-fw fontello-angle-right text"></i>
<i class="fontello icon-fw fontello-angle-down text-active"></i>
</span>
<!-- <i class="glyphicon glyphicon-th"></i>-->
<span class="nav-icon"><i data-feather="grid"></i></span>
<span>分类</span>
</a>
<ul class="nav nav-sub dk">
<li class="nav-sub-header">
<a>
<span>分类</span>
</a>
</li>
<!--循环输出分类-->
<?php $this->widget('Handsome_Widget_Metas_Category_List')->listCategories('wrapClass=nav nav-sub dk&childClass=child-nav'); ?>
<?php
$this->widget('Widget_Metas_Category_List')->to($categorys);
// echo Content::returnCategories($categorys)
?>
<!--/循环输出分类-->
</ul>
</li>
<!--stille 002 独立页面pages-->
<li>
<a class="auto">
<span class="pull-right text-muted">
<i class="fontello icon-fw fontello-angle-right text"></i>
<i class="fontello icon-fw fontello-angle-down text-active"></i>
</span>
<span class="nav-icon"><i data-feather="file"></i></span>
<span><?php _me("页面") ?></span>
</a>
<ul class="nav nav-sub dk">
<li class="nav-sub-header">
<a data-no-instant>
<span><?php _me("页面") ?></span>
</a>
</li><!--这个字段不会被显示出来-->
<!--循环输出独立页面-->
<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<?php while($pages->next()): ?>
<?php if ($pages->fields->navbar == "hide") continue; ?>
<li><a href="<?php $pages->permalink(); ?>"><span><?php $pages->title(); ?></span></a></li>
<?php endwhile; ?>
</ul>
</li>
<!--手动复制分类category-->
<li>
<a href="https://www.uuks.cn/Oracle/" class ="auto"><span class="nav-icon"><i data-feather="database"></i></span><span>Oracle</span></a>
</li>
<li>
<a href="https://www.uuks.cn/Linux" class ="auto"><span class="nav-icon"><i data-feather="server"></i></span><span>Linux</span></a>
</li>
<li>
<a href="https://www.uuks.cn/Docker/" class ="auto"><span class="nav-icon"><i data-feather="codesandbox"></i></span><span>Docker</span></a>
</li>
<li>
<a href="https://www.uuks.cn/Mysql/" class ="auto"><span class="nav-icon"><i data-feather="package"></i></span><span>Mysql</span></a>
</li>
<li>
<a href="https://www.uuks.cn/Redis/" class ="auto"><span class="nav-icon"><i data-feather="figma"></i></span><span>Redis</span></a>
</li>
<li>
<a href="https://www.uuks.cn/PL-SQL/" class ="auto"><span class="nav-icon"><i data-feather="codepen"></i></span><span>PL-SQL</span></a>
</li>
<li>
<a target="_blank" href="https://www.uuks.cn/music/index.php" class ="auto"><span class="nav-icon"><i data-feather="music"></i></span><span>音乐搜索</span></a>
</li>
<li>
<a target="_blank" href="https://www.uuks.cn/video/index.html" class ="auto"><span class="nav-icon"><i data-feather="film"></i></span><span>在线播放器</span></a>
</li>
<li>
<a target="_self" href="https://www.uuks.cn/start-page.html" class ="auto"><span class="nav-icon"><i data-feather="thumbs-up"></i></span><span>关于</span></a>
</li>
<!--全站友情链接 下移 stille 改动 -->
<!--友情链接-->
<li>
<a class="auto">
<span class="pull-right text-muted">
<i class="fontello icon-fw fontello-angle-right text"></i>
<i class="fontello icon-fw fontello-angle-down text-active"></i>
</span>
<span class="nav-icon"><i data-feather="user"></i></span>
<span><?php _me("友链") ?></span>
</a>
<ul class="nav nav-sub dk">
<li class="nav-sub-header">
<a data-no-instant>
<span><?php _me("友链") ?></span>
</a>
</li>
<!--使用links插件，输出全站友链-->
<?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\"
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
Handsome_Plugin::output($mypattern1, 0, "ten");?>
</ul>
</li>
<!-- 全站友情链接 下移 stille 改动 -->
</ul>
</nav>
<!-- nav -->顶部导航设置
{"name":"音乐","class":"glyphicon glyphicon-music","link":"https://www.uuks.cn/music/index.php","target":"_blank"},
{"name":"视频播放器","class":"glyphicon glyphicon-film","link":"https://www.uuks.cn/video/index.html","target":"_blank"},
{"name":"相册","class":"glyphicon glyphicon-picture","link":"/image/","target":"_self"}博主介绍闪字
用法：主题设置➡初级设置➡博主的介绍
<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>全站打字烟花特效
用法：开发者设置➡自定义输出body 尾部的HTML代码
<script type="text/javascript"src="https://js.qninq.cn/js/commentTyping.js"></script>Logo扫光效果
用法：开发者设置➡自定义CSS
/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}粗体上色
用法：开发者设置➡自定义CSS
/* 粗体上色 */
strong{
color: rgb(230, 145, 56);
}时光机头像圆形
用法：开发者设置➡自定义CSS
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}评论边框美化
用法：开发者设置➡自定义CSS
/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}右侧导航图标美化
/*右侧导航栏*/
.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;}左侧导航多彩图标
用法：
开发者设置➡自定义JavaScript
PJAX➡PJAX回调函数
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});等距标签云
用法：开发者设置➡自定义CSS
/*标签等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}右侧滚动条美化
用法：开发者设置➡自定义CSS
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 8px;
height: 6px
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em
}
/*定义滑块 内阴影+圆角*/
::-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
}自定义右键美化
右键美化
用法：开发者设置➡自定义输出body 尾部的HTML代码
<!--右键美化-->
<script src="https://js.qninq.cn/js/layer.js"></script>
<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:13px!important;width:130px;-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://blog.qninq.cn/"><i class="fontello fontello-home"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fontello fontello-pencil"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fontello fontello-search"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fontello fontello-chevron-right"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fontello fontello-chevron-left"></i><span>后退</span></a></li>
<li><a href="javascript:(async () => {if (!window.shorturl) {const poop = await fetch('https://sorls.cn/api.php?url=' + encodeURI(location.href)).then(x => x.json());window.shorturl = poop.shorturl ? poop.shorturl : poop.error;}console.log(window.shorturl);const elements = {}; elements.container = document.createElement('div');elements.container.style.cssText = 'z-index:10000;';elements.modal = document.createElement('div');elements.modal.style.cssText = 'z-index:10000;position:fixed;box-shadow: 0 5px 15px -5px rgba(0,0,0,0.8);display:inline-block;color:black;padding:24px;background-color:white;bottom:12px;left:12px;border-radius:12px;font-size:18px;transition:all 250ms ease;opacity:0';elements.a = document.createElement('a');elements.a.innerText = window.shorturl;elements.a.href = window.shorturl;elements.a.addEventListener('click',(e)=>{e.preventDefault();});elements.p = document.createElement('p');elements.p.style.cssText = 'padding:0;margin:0;';elements.p.innerHTML = `<br>%E5%8A%9F%E8%83%BD%E7%94%B1 <a href='https://sorls.cn'>Sorls %E6%8F%90%E4%BE%9B</a>`;elements.modal.appendChild(elements.a);elements.modal.appendChild(elements.p);elements.container.appendChild(elements.modal);const body = document.querySelector('body');body.appendChild(elements.container);requestAnimationFrame(()=>{requestAnimationFrame(()=>{elements.modal.style.opacity = 1;})});setTimeout(()=>{elements.modal.style.opacity = 0;setTimeout(()=>{elements.container.remove();},260);},5000);})();"><i class="fontello fontello-cogs"></i><span>缩短本页</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fontello fontello-refresh"></i><span>重载网页</span></a></li>
<li><a href="https://blog.qninq.cn/links.html"><i class="fontello fontello-emo-tongue"></i><span>和我当邻居</span></a></li>
<li><a href="https://blog.qninq.cn/comments.html"><i class="fontello fontello-edit"></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>新年喝彩横图
喝彩横图
用法：
1.开发者设置➡自定义CSS
/*new_year_css*/
#new_year{
position: absolute;
pointer-events: none;
opacity: 0.5;
left: 0;
right: 0;
bottom: 0;
}
#post-panel header.wrapper-md.bg-light{
position:relative;
}2.usr/theme/handsome/index.php如图位置添加如下代码
<img id="new_year" src="https://js.qninq.cn/imgs/new_year.png" draggable="false">3.添加位置
<?php if ($index_show || $desc_show):?>
<header class="bg-light lter wrapper-md">
复制到这一行
<?php if ($index_show) :?>左上角加上FPS
FPS
用法:打开主题设置-开发者设置-自定义JS 和主题设置-PJAX-PJAX回调函数内添加以下代码
$('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();
})();右边侧全部
加载耗时,在线人数,全站字数,访客总数
(文章数目，加载耗时,在线人数,全站字数,访客总数)
themes/handsome/libs/Content.php中放在class Content{}之前。
//require("component/Recent.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;
}
/**
* 在线人数
*/
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";
}
/**
* 访客总数
*/
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;
}sidebar.php添加代码:
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <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="user"></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="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>盒子模式主页标题居中
标题居中
用法：后台主题设置→开发者设置→自定义CSS
/*顶部标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}网站背景添加海浪背景
海浪背景
- 添加至后台主题设置-开发者设置-自定义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>羽毛
羽毛飘动
图片自己下载后保存替换路径
https://www.uuks.cn/usr/uploads/2021/logo/yumao.webp
- 添加至后台主题设置-开发者设置-自定义CSS
/*羽毛_css*/
.dropdown.wrapper {
background:url(/usr/uploads/2021/logo/yumao.webp) right bottom no-repeat;
}标签
标签颜色和等距
/*彩色标签*/
#tag_cloud-2 a,.list-group-item .pull-right {
background-color: #15A4CC;
}
/*彩色标签*/
/*标签等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
/*小字体背景色*/
.badge {
background-color: #15A4CC;
}
5 条评论
ψ(｀∇´)ψ
看的贼舒服，采用了挺多的，感谢分享，已经添加友情链接。
你的UserAgent插件分享下呗
部分教程载我的，加上我的原文地址啊
收到，加的太多了 转载地址没放到最后 在中间位置。