我个人并不推荐你使用插件进行美化，因为插件确实会影响到网站的文章加载及打开速度
（原因是：当我把插件卸载掉全部改成自定义CSS和JS后访问速度有明显的提升）
自定义JS处添加： 效果图：
自定义CSS处添加：.nav-tabs-alt .nav-tabs>li.active>a{border-bottom-color:#23b7e5!important;}
.navs-slider-bar{background-color:#058cff!important;}
.post_tab .nav-item.active .nav-link::before{border-bottom-color:rgb(5,140,255)!important;}<script>
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#86d2f3","#a3dbf3","#5dbde7","#6b7ceb","#919ff5","#abb6f5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});
</script>
自定义CSS处添加：.panel{cursor:pointer;transition:all 0.6s;}
.blog-post .panel:not(article):hover{transform:translateY(-10px);}
.panel-small{cursor:pointer;transition:all 0.6s;}
.panel-small:hover{transform:scale(1.05);}
.item-thumb{cursor:pointer;transition:all 0.6s;}
.item-thumb:hover{transform:scale(1.05);}
.item-thumb-small{cursor:pointer;transition:all 0.6s;}
.item-thumb-small:hover{transform:scale(1.05);}
.index-post-img,.entry-thumbnail{overflow:hidden;}
自定义CSS处添加：.panel{-moz-box-shadow:0 8px 10px rgba(255,112,173,0.35);}
.panel:hover{box-shadow:0 8px 10px rgba(62,147,241,0.37)!important;-moz-box-shadow:0 8px 10px rgba(62,147,241,0.35)!important;}
.panel-small{box-shadow:0 8px 10px rgba(255,112,173,0.35);-moz-box-shadow:0 8px 10px rgba(255,112,173,0.35);}
.panel-small:hover{box-shadow:0 8px 10px rgba(255,112,173,0.35)!important;-moz-box-shadow:0 8px 10px rgba(255,112,173,0.35)!important;}
.app.container{box-shadow:0 0 30px rgba(255,112,173,0.35);}
自定义CSS处添加：.btn-pay{animation:star 0.5s ease-in-out infinite alternate;}
@keyframes star{from{transform:scale(1);}to{transform:scale(1.1);}}
效果图：
自定义CSS处添加：.bg-light .lter,.bg-light.lter{text-align:center!important;}
效果图：
自定义CSS处添加：.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
效果图：
自定义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;
}
}
需要在后台加上PJAX回调函数： 效果图：
自定义JS处添加：<script>
let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor});
</script>let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor
});
设置步骤（设置外观-开发者设置-自定义输出body 尾部的HTML代码）：<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if (kaygb_referrer != ""){
return "";
}else{
return "";
}}
$.message({
message: "网站加载完毕~<br>今天也要开心哦！<br><span style='color:purple;'>٩(๑❛ᴗ❛๑)۶</span>" + kaygb_referrer(),
title: "Welcome",
type: "success",
autoHide: !1,
time: "5000"
})
</script>
将以下代码添加至后台-外观-初级设置-博主的介绍：<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>
效果图：
将以下代码添加至后台-开发者设置-首页列表最前方广告位：/*首页倒计时*/
<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>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"> 天</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('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);
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>
效果图：
将以下代码添加至后台-开发者设置-自定义CSS：/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
效果图：
更换/usr/themes/handsome/usr/img/sj2/中的图片即可：
效果图：
将以下代码添加至后台-开发者设置-自定义CSS：<script>
let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor});
</script>
方法:将/usr/themes/handsome/component/sidebar.php中的30改为自己想要的最大数量<?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')
2：将以下代码添加至后台-开发者设置-博客底部右侧信息(左侧类似)。 3：将以下代码添加至后台-开发者设置-自定义CSS。 效果图：
1：先去除/usr/themes/handsome/component/footer.php中原有版权信息，将注释<!--可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解-->之前的代码替换即可<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
<footer id="footer" class="app-footer" role="footer">
<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>
<!--可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解--><div class="github-badge">
<a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="晋ICP备19010481号-2">
<span class="badge-subject">晋ICP备</span><span class="badge-value bg-black">19010481号-2</span></a>
</div>
| <div class="github-badge">
<a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span></a>
</div>
| <div class="github-badge">
<a rel="license" href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span></a>
</div>/*github图标*/
.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-brightgreen {
background-color: #4DC820 !important;
}
.github-badge .bg-orange {
background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
background-color: #8833D7 !important;
}
.github-badge .bg-firebrick {
background-color: #EE2C2C !important;
}
.github-badge .bg-blue {
background-color: #007EC6 !important;
}
.github-badge .bg-lightgrey {
background-color: #9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
background-color: #9f9f9f !important;
}
效果图：
方法:将以下代码添加至后台-开发者设置-自定义CSS。/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}
效果图：
将以下代码添加至后台-开发者设置-自定义JavaScriptdocument.body.oncopy=function(){layer.msg('复制成功,若要转载请务必保留原文链接！');};
效果图：
将以下代码添加至后台-开发者设置-自定义JavaScript。document.onkeydown = function(){
if(window.event && window.event.keyCode == 123) {
layer.msg("F12被禁用");
event.keyCode=0;
event.returnValue=false;
}
}
效果图：
将以下代码添加至后台-开发者设置-自定义输出body 尾部的HTML代码<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://itudo.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
<li><a href="https://itudo.cn/links.html"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>
<li><a href="https://itudo.cn/message.html"><i class="fa fa-pencil-square-o fa-fw"></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:然后把下面这段放到最后的</body>前
1：打开/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><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>
2：将生成的以下代码放入/usr/themes/handsome/component/headnav.php的注释<!-- / search form -->之后并更换你的token即可 效果图：
1：心知天气官网 www.seniverse.com申请秘钥并生成天气插件代码 <!-- 知心天气-->
<ul class="nav navbar-nav" style="height:50px;">
<div id="tp-weather-widget" style="line-height: 50px;"></div>
<script>
(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
window.SeniverseWeatherWidget('show', {
flavor: "slim",
location: "WS0E9D8WN298",
geolocation: true,
language: "zh-Hans",
unit: "c",
theme: "dark",
token: "20f97289-5d56-4879-805d-c4df5408b7d9",
hover: "enabled",
container: "tp-weather-widget"
})
</script>
</ul>
<!-- 知心结束-->
方法：将以下代码添加至后台-开发者设置-自定义CSS/*手机不显示*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}
2: 将以下代码分别添加至/usr/themes/handsome/component/sidebar.php 的注解 <!--非文章页面-->的结束标签</section>之后以及注解<!--文章页面-->的结束标签</section>之后 教程图一： 教程图二： 效果图：
1: 在Typecho根目录/usr/themes/handsome/component/aside.php 185行开始将下面代码删除<!--友情链接-->
<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 href=\"{url}\" target=\"_blank\"><i><img width=\"18\" height=\"18\" src={image} /></i><span>{name}</span></a></li>";
Handsome_Plugin::output($mypattern1, 0, "ten");?>
</ul>
</li><section id="tabs-4" class="widget widget_categories wrapper-md clear">
<h5 class="widget-title m-t-none text-md"><?php _me("友情链接") ?></h5>
<nav ui-nav class="navi clearfix">
<ul class="nav">
<!--全站友情链接-->
<li class="active">
<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 href=\"{url}\" target=\"_blank\"><i><img width=\"18\" height=\"18\" src={image} alt=\"{title}\" /></i><span>{name}</span></a></li>";
Handsome_Plugin::output($mypattern1, 0, "ten");?>
</ul>
</li>
</ul>
</nav>
</section>
操作前请做好相应备份工作 此插件只适用于Handsome主题，未对其它主题优化！！！ 请先将插件置于Typecho的plugins目录下，且插件目录名应为UserAgent，注意大小写，否则将无法正常食用！！！ 修改Handsome主题，component目录下的comments.php代码文件，大概第60~80行左右， 添加以下代码 修改后代码如下 获取真实IP Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在Typecho博客网站的根目录的config.inc.php插入下面的代码 最后效果图：<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?><span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = $list[0];
}
1.将以下代码加到 2.添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css 3.添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部 最后效果图：**/usr/themes/handsome/component/sidebar.php，在122行左右，放在<?php endif; ?>之后<!-- 时间倒计时代码开始 -->
<section id="blog_info" class="widget widget_categories wrapper-md clear">
<h5 class="widget-title m-t-none text-md"><?php _me("岁月不待人") ?></h5>
<div class="sidebar sidebar-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>
<!-- 时间倒计时代码结束 -->
/* 时间倒计时 */
.sidebar-count .content {
padding: 15px
}
.sidebar-count .content .item {
margin-bottom: 15px
}
.sidebar-count .content .item:last-child {
margin-bottom: 0
}
.sidebar-count .content .item .title {
font-size: 12px;
color: var(--minor);
margin-bottom: 5px;
display: flex;
align-items: center
}
.sidebar-count .content .item .title span {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px
}
.sidebar-count .content .item .progress {
display: flex;
align-items: center
}
.sidebar-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
}
}
.sidebar-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
}
.sidebar-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
}
.sidebar-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
}
.sidebar-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
}
.sidebar-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
}
.sidebar-count .content .item .progress .progress-percentage {
color: var(--info)
}<!-- 时间倒计时 -->
<script src="https://www.lxink.cn/usr/themes/handsome/assets/js/timeinfo.js"></script>
在 handsome/component/sidebar.php添加显示代码，这个 li 标签位置，可以先搜索最后活动，你就能看到很多 li 标签了，和他们一样的位置就行。 效果图：
教程如下首先在主题 handsome/libs/Content.php文件里加入以下统计代码，放在class Content{}之前，也就是if (!defined('__TYPECHO_ROOT_DIR__')) exit; 代码的下面//总访问量
function theAllViews()
{
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}
/**
* * 加载时间
* * @return bool
* */
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;
}<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="eye"></i></span> <span class="badge pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="check"></i></span> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
效果图：
步骤：开发者设置-自定义输出head 头部的HTML代码-复制下面代码放里面即可**<****script****>****
<!--切换标签实现网页标题变化-->
****/*自动刷新页面，避免无法访问*/****
****var**** OriginTitile = ****document****.title;
****var**** titleTime;
****document****.addEventListener(****'visibilitychange'****, ****function****(****) ****{
****if**** (****document****.hidden) {
****document****.title = ****'..(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚ 宝贝别走啊 - 风轻寒云'****;
clearTimeout(titleTime);
}
****else**** {
****document****.title = ****'ヾ(ﾟ∀ﾟゞ)还好你回来了！'****;
titleTime = setTimeout(****function****(****) ****{
****document****.title = OriginTitile;
}, ****3000****);
}
});
****</****script****>**
因为国内gravatar头像地址被墙，需要更换第三方gravatar头像地址 博客根目录 修改为以下/var/Typecho下`Common.php文件内搜索（获取gravatar头像地址）或者大概位置为922行
* 获取QQ头像，如果失败，获取Gravatar头像
*
* @param string $mail
* @param int $size
* @param string $rating
* @param string $default
* @param bool $isSecure
* @return string
*/
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$reg = "/^\d{5,11}@[qQ][Qq]\.(com)$/";
if (preg_match($reg, $mail)) {
$img = explode("@", $mail);
$url = "//q2.qlogo.cn/headimg_dl?dst_uin={$img[0]}&spec=100";
} else {
if (defined('__TYPECHO_GRAVATAR_PREFIX__')) {
$url = __TYPECHO_GRAVATAR_PREFIX__;
} else {
$url = $isSecure ? 'https://gravatar.muyu.mobi' : 'http://www.gravatar.com';
$url .= '/avatar/';
}
if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}
$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;
}
return $url;
}
1 条评论
看看