handsome主题美化优化备忘录 – 持续更新-一只薛眠羊

前言

Handsome主题，在复杂中，保持简洁，是精心修饰的typecho主题。
关于handsome主题基于本站的一个美化优化备忘录，防止handsome主题更新后美化样式被清除，下面就是博主整理的一些较为全面的美化教程，由小薛来教大家如何进行美化，本文章建议收藏，持续更新的喔！

自定义CSS

主题标题居中

[collapse status=”false” title=”主题标题居中”]

/*主题标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}

[/collapse]

等距标签云

[collapse status=”false” title=”等距标签云”]

/*等距标签云美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

[/collapse]

logo扫光

[collapse status=”false” title=”logo扫光”]

/* 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;}}

[/collapse]

首页文章列表悬停上浮

[collapse status=”false” title=”首页文章列表悬停上浮”]

/*首页文章列表悬停上浮*/
.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);
}

[/collapse]

赞赏按钮跳动

[collapse status=”false” title=”赞赏按钮跳动”]

/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
from {
transform: scale(1);
}

to {
    transform: scale(1.1);
}
}

[/collapse]

头像鼠标悬停旋转放大

[collapse status=”false” title=”头像鼠标悬停旋转放大”]

/*头像鼠标悬停旋转放大*/
.img-full {
border-radius: 50%;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}

[/collapse]

评论边框

[collapse status=”false” title=”评论边框”]

/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}

[/collapse]

粗斜体上色

[collapse status=”false” title=”粗斜体上色”]

/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}

[/collapse]

气泡背景

[collapse status=”false” title=”气泡背景”]
参数设置

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>

[/collapse]

自定义 JavaScript

复制版权提示

[collapse status=”false” title=”复制版权提示”]

/* 复制成功提示代码开始 */
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>原文链接："+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */

[/collapse]

彩色标签云及右栏数字

[collapse status=”false” title=”彩色标签云及右栏数字”]
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可
如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中。

/*彩色标签云代码开始*/
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
/*彩色标签云代码结束*/

[/collapse]

禁F12

[collapse status=”false” title=”禁F12″]
在开发者设置自定义JavaScript中添加下面代码

// 禁止调试
$(document).ready(function() {
    document.oncontextmenu = function() {
        return false;
    }
    document.onkeydown = function() {
        //f12
        if (window.event && window.event.keyCode == 123) {
            event.keyCode = 0;
            event.returnValue = false;
            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;
        }
    };
});

[/collapse]

自定义右键

[collapse status=”false” title=”自定义右键”]
自定义输出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(88,130,238,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://www.xuemy.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 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="//www.xuemy.cn/about.html"><i class="fontello fontello-emo-tongue"></i><span>关于作者</span></a></li>  
           <li><a href="//www.xuemy.cn/cross.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>

</body>
</html>

[/collapse]

左侧栏小图标颜色

自定义 JavaScript 和pjax回调添加下面代码
[collapse status=”false” title=”左侧栏小图标颜色”]

<!--左侧彩色图标--> 
  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});

[/collapse]

鼠标点击特效

[collapse status=”false” title=”鼠标点击特效”]

//鼠标点击出现爱心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);

[/collapse]

修改文件

响应时间和访客总数

[collapse status=”false” title=”响应时间和访客总数”]
将以下代码放到/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>
<!--响应耗时代码结束-->

[/collapse]

文末end

[collapse status=”false” title=”文末end”]
在主题文件post.php内，文章内容下方加上下面的代码

<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>

[/collapse]

版权提示

[collapse status=”false” title=”版权提示”]
在主题文件post.php内，文章内容下方加上下面的代码

<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>  
<span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明：若无注明，本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
</div>

[/collapse]

时间流逝

[collapse status=”false” title=”时间流逝”]
将以下代码加到/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>
    <!-- 时间倒计时代码结束 -->

添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css

/* 时间流逝 */
.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)
}

第三步-添加完成后,在到/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尾部

<!-- 时间流逝 -->  
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>

[/collapse]

加载动画

[collapse status=”false” title=”加载动画”]
以下代码放置主题文件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>

  <!--加载动画-->
<bodyid="body"class="fix-padding skt-loading">
    <bodyid="body"class="fix-padding"style="overflow:hidden">
        <divid="PageLoading"style="z-index:99999999;">
            <divid="PageLoading-center">
                <divid="PageLoading-center-absolute">
                    <divclass="object2"id="object_four"></div>
                    <divclass="object2"id="object_three"></div>
                    <divclass="object2"id="object_two"></div>
                    <divclass="object2"id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>

以下代码放置后台-开发者设置-自定义javascript 内

$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});

[/collapse]

底部版权美化

[collapse status=”false” title=”底部版权美化”]
左侧底部放在后台-开发者设置-博客底部左侧信息

<!--左侧底部-->
<div class="github-badge">
  <span class="badge-subject">Copyright</span>
  <a href="https://www.xuemy.cn"target="_blank">
    <spanclass="badge-value bg-blue">©2022 一只薛眠羊.</span></a>
</div> | 
<divclass="github-badge">
  <spanclass="badge-subject">鄂ICP备</span>
  <ahref="http://beian.miit.gov.cn/"target="_blank">
    <spanclass="badge-value bg-green">2022015108号-1</span></a>
</div>
<divclass="github-badge">
<imgsrc="https://cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png"style="float:left;"/>
  <spanclass="badge-subject">鄂公网安备</span>
  <ahref="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42058302000231"target="_blank">
    <spanclass="badge-value bg-green">42058302000231号</span></a>
</div>

右侧底部放在后台-开发者设置-博客底部右侧信息

<!--右侧底部-->
<div class="github-badge">
  <spanclass="badge-subject">本站由</span>
  <ahref="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"target="_blank">
    <spanclass="badge-value bg-blue">又拍云提供CDN加速服务</span></a>
</div> | 
<divclass="github-badge">
  <spanclass="badge-subject">Theme by</span>
  <ahref="https://www.ihewro.com/"target="_blank">
    <spanclass="badge-value bg-orange">Handsome</span></a>
</div>

css放在主题设置-自定义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: #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-green {
  background-color: #3bca6e
}

把下面代码放在主题目录usr/themes/handsome/component/footer.php内大概在177行，覆盖原来的即可

<footerid="footer"class="app-footer"role="footer">
    <divclass="wrapper bg-light">
      <spanclass="pull-right hidden-xs text-ellipsis">
      <?php$this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
      </span>
        <spanclass="text-ellipsis"><?php
            $this->options->BottomleftInfo(); ?></span>
    </div>
</footer>

[/collapse]

隐藏左侧页面栏目

[collapse status=”false” title=”隐藏左侧页面栏目”]
在handsome/component/aside.php删除下面代码

<!--独立页面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>
                <?php endif; ?>
                <?php if (@!in_array('links', Utils::checkArray($this->options->asideSetting))): ?>

[/collapse]

速度优化

CDN

首先是主题的CDN加速。在Handsome主题下,可以选择公共库，我选择字节跳动的CDN，貌似相对比较快。
当然这个库是主题的使用了jquery、bootstrap、vditor、mdui、mathjax外部库（体积较大>60kb）

相关声明 1 微信公众号：薛眠羊科技
2 本站永久网址：https://www.xuemy.cn
3 本文内容仅为技术科普，请勿用于非法用途
4 本文内容未隐讳任何个人、群体、公司。非文学作品，请勿用于阅读理解的练习
5 根据《计算机软件保护条例》第十七条，本站所有软件请仅用于学习研究用途
6 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责

THE END

handsome主题美化优化备忘录 – 持续更新

前言

自定义CSS

主题标题居中

等距标签云

logo扫光

首页文章列表悬停上浮

赞赏按钮跳动

头像鼠标悬停旋转放大

评论边框

粗斜体上色

气泡背景

自定义 JavaScript

复制版权提示

彩色标签云及右栏数字

禁F12

自定义右键

左侧栏小图标颜色

鼠标点击特效

修改文件

响应时间和访客总数

文末end

版权提示

时间流逝

加载动画

底部版权美化

隐藏左侧页面栏目

速度优化

CDN

分享一款B站视频解析下载工具-Windows哔哩下载姬v1.5.6

微信动态昵称设置方法，详细视频教程与素材

分享一个文献下载网站一些 SciHub 不能下载的学术文献，交给它搞定

关于“钉钉进步体”字体上线，永久免费商用

分享一款免费抢购火车/高铁票的软件

用国外免费容器托管平台railway.app部署chatGPT-AI 自动回复机器人项目

请登录后发表评论

猜您想看

合作商正版实用软件特惠

handsome主题美化优化备忘录 – 持续更新

前言

自定义CSS

主题标题居中

等距标签云

logo扫光

首页文章列表悬停上浮

赞赏按钮跳动

头像鼠标悬停旋转放大

评论边框

粗斜体上色

气泡背景

自定义 JavaScript

复制版权提示

彩色标签云及右栏数字

禁F12

自定义右键

左侧栏小图标颜色

鼠标点击特效

修改文件

响应时间和访客总数

文末end

版权提示

时间流逝

加载动画

底部版权美化

隐藏左侧页面栏目

速度优化

CDN

分享一款B站视频解析下载工具-Windows哔哩下载姬v1.5.6

微信动态昵称设置方法，详细视频教程与素材

分享一个文献下载网站 一些 SciHub 不能下载的学术文献，交给它搞定

关于“钉钉进步体”字体上线，永久免费商用

分享一款免费抢购火车/高铁票的软件

用国外免费容器托管平台railway.app部署chatGPT-AI 自动回复机器人项目

请登录后发表评论

猜您想看

合作商正版实用软件特惠

分享一个文献下载网站一些 SciHub 不能下载的学术文献，交给它搞定