前言

你是否曾在深夜翻遍搜索引擎，只为拼凑出一个理想中的博客界面？是否在尝试美化「Handsome」主题时，被零散的教程、失效的代码和版本兼容问题反复劝退？

作为一款备受开发者青睐的博客主题，「Handsome」的灵活性既是魅力也是门槛。网络上关于它的美化教程如繁星散落：GitHub的代码片段沉睡在仓库角落，技术论坛的精华帖沉没在历史回复中，个人博主的创意分享甚至随着域名过期而消失。这些碎片化的知识，让追求个性化的用户不得不耗费大量时间“寻宝”——而当你终于集齐碎片时，可能发现拼图早已过时。

这便是本文诞生的初衷：我们试图做一场「系统化的收纳」。
—— 不是简单的资源搬运，而是以「持续生长」的姿态，将散落的技巧梳理为可复用的模块，将晦涩的代码封装成即插即用的解决方案，同时建立版本迭代的追踪机制。无论你是刚接触「Handsome」的新手，还是想突破现有界面瓶颈的进阶用户，都能在这里找到可执行的路径。

美化教程

自定义CSS

1、时光机头像圆形

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/* 时光机圆形头像开始 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
/* 时光机圆形头像结束 */
2、头像呼吸光环和鼠标悬停旋转

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*头像呼吸光环和鼠标悬停旋转 开始 */
.img-full {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}
.img-full:hover {
    transform: rotate(666turn);
    transition-duration: 59s;
    transition-timing-function: cubic-bezier(.34, 0, .84, 1);
}
@keyframes light {
    0% {
        box-shadow: 0 0 4px #22ACD6;
    }
    50% {
        box-shadow: 0 0 16px #22ACD6;
    }
    100% {
        box-shadow: 0 0 4px #22ACD6;
    }
}
/*头像呼吸光环和鼠标悬停旋转 结束 */
3、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;}}
/*logo扫光结束*/
4、主题标题居中

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*主题标题居中开始*/
header.bg-light.lter.wrapper-md {
text-align: center;
}
/*主题标题居中结束*/
5、首页文章标题居中

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*首页文章标题居中 开始*/
.panel:not(article) h2{
    text-align: center; 
}
.panel-small:not(article) h2{
    text-align: center; 
}
.panel-picture:not(article) h3{
    text-align: center; 
}
.post-item-foot-icon:not(article){
    text-align: center;
}
/*首页文章标题居中 结束*/
6、首页文章日期居中

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*主题日期居中开始*/
.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
    background-color: #fff;
}
/*主题日期居中结束*/
7、赞赏按钮跳动

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*赞赏按钮跳动开始*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}
/*赞赏按钮跳动结束*/
8、页面两侧框架留白间距

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*两侧框架留白间距开始*/
@media (min-width:1700px) {
    .app.container {
        width: 95%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 95%
    }
}

@media (min-width:2048px) {
    .app.container {
        width: 93%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 93%
    }
}

@media (min-width:1200px) {
    .app.container {
        width: 90%
    }

    .app.container .app-aside,
    .app.container .app-header {
        max-width: 90%
    }

    .app.container .app-footer-fixed {
        max-width: 970px
    }

    .app.container.app-aside-folded .app-footer-fixed {
        max-width: 1110px
    }

    .app.container.app-aside-dock .app-footer-fixed {
        max-width: 90%
    }
}
/*两侧框架留白间距结束*/
9、文章一二三四级标题美化

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*文章一二三四级标题美化 开始*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}
/*文章一二三四级标题美化 结束*/
10、标签字体颜色

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*标签字体颜色开始*/
.badge,.padder-v-ssm{
    color:#fff;
}
/*标签字体颜色结束*/
11、标签悬停颜色

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*标签悬停颜色开始*/
.index-post-title a:hover {
  color: #2ebaae;
}
/*标签悬停颜色结束*/
12、文章阴影及头图放大特效

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义 CSS 即可

/*文章阴影及头图放大特效，修正放大后头图的版权位置 开始*/
.blog-post .panel {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-small:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 10px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture {
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(73, 90, 47, 0.47);
}
.blog-post .panel-picture:hover {
    transform: translateY(-8px);
    box-shadow: 0 4px 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)
}
.item-thumb .img_copyright{
    transition: all 0.3s;
}
.item-thumb:hover .img_copyright{
    transform: translateX(-24px);
}
.entry-thumbnail {
    overflow: hidden;
}
.post-content img {
    border-radius: 10px;
    transition: 0.5s;
}
.post-content img:hover {
    transform: scale(1.1);
}
/*文章阴影及头图放大特效，修正放大后头图的版权位置 结束*/
13、右侧导航栏

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*右侧导航栏开始*/
.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;}
/*右侧导航栏结束*/
14、博客盒子、卡片阴影调整

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整 开始*/
.app.container {
    box-shadow: 0 0 30px rgba(73, 90, 47, 0.47);
}
.navbar{
    box-shadow: 0 1px 10px rgba(73, 90, 47, 0.47);
}
.breadcrumb{
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
.breadcrumb:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 8px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img {
    transition: all 0.3s;
    box-shadow: 0 3px 5px rgba(73, 90, 47, 0.47);
}
.wrapper-lg img:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 10px rgba(73, 90, 47, 0.47);
}
.preview{
    box-shadow: 0 2px 4px rgba(73, 90, 47, 0.47);
}
#blog_info .list-group{
    transition: all 0.3s;
}
#blog_info .list-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 6px rgba(73, 90, 47, 0.47);
}
/*盒子四周、上导航栏、文章中的小框、文章图片及博客信息阴影调整 结束*/
15、局部阴影

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
  border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
  background: white;
  box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
16、文章首页图片获取焦点放大

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章图片获取焦点放大开始*/
.item-thumb {
    cursor: pointer;
    transition: all .6s;
}
.item-thumb:hover {
    transform: scale(1.05);
}
/*首页文章图片获取焦点放大结束*/
17、文字悬浮效果

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/* 文章悬浮效果开始 */
.blog-post .panel:not(article){transition:all .3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px)}
/* 文章悬浮效果结束 */
18、滚动条效果

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width:9px;
    height:8px;
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color:white;
    -webkit-border-radius: 0em;
    -moz-border-radius: 0em;
    border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #ff676c;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,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;
    cursor: pointer;
}

自定义 JavaScript

1、复制版权提示

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义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> 本文作者：小飞说<br>原文链接："+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */
2、彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

/*彩色标签云*/
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;
});
3、鼠标点击特效

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FA7298"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
4、地址栏动态变化

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--地址栏动态变化-->
var OriginTitle = document.title; var titleTime;
document.addEventListener('visibilitychange', function () {if (document.hidden) {document.title = '(๐•̆ ·̭ •̆๐)  不在了吗？'; clearTimeout(titleTime);} else {document.title = 'ヾ(Ő∀Ő3)ノ你回来啦！'; titleTime = setTimeout(function () {document.title = OriginTitle;}, 2000);}});

其他修改

1、博主介绍闪字效果

打开后台-更改外观-设置外观-初级设置-复制代码粘贴至博主的介绍即可

<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>
2、全局右边栏展示响应时间和访客总数

将以下代码放到/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>
<!--响应耗时代码结束-->
3、时间流逝

将以下代码加到 /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 (打开主题 handsome - assets - assets - js)
新建一个文件 命名为：timeinfo.js
复制代码到 timeinfo.js

function init_life_time() {
         function getAsideLifeTime() {
             /* 当前时间戳 */
             let nowDate = +new Date();
             /* 今天开始时间戳 */
             let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
             /* 今天已经过去的时间 */
             let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
             /* 今天已经过去的时间比 */
             let todayPassHoursPercent = (todayPassHours / 24) * 100;
             $('#dayProgress .title span').html(parseInt(todayPassHours));
             $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
             $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
             /* 当前周几 */
             let weeks = {
                 0: 7,
                 1: 1,
                 2: 2,
                 3: 3,
                 4: 4,
                 5: 5,
                 6: 6
             };
             let weekDay = weeks[new Date().getDay()];
             let weekDayPassPercent = (weekDay / 7) * 100;
             $('#weekProgress .title span').html(weekDay);
             $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
             $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
             let year = new Date().getFullYear();
             let date = new Date().getDate();
             let month = new Date().getMonth() + 1;
             let monthAll = new Date(year, month, 0).getDate();
             let monthPassPercent = (date / monthAll) * 100;
             $('#monthProgress .title span').html(date);
             $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
             $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
             let yearPass = (month / 12) * 100;
             $('#yearProgress .title span').html(month);
             $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
             $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
         }
         getAsideLifeTime();
         setInterval(() => {
             getAsideLifeTime();
         }, 1000);
     }
     init_life_time()

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义输出body 尾部的HTML代码 即可

<!-- 时间流逝 -->  
<script src="https://自己的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>
4、底部页脚美化

修改文件/themes/handsome/component/footer.php版权代码或者删除

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

以下代码放在外观设置-开发者设置-自定义css中

/*底部页脚css*/
.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color:#4d4d4d;
    text-shadow:0px 0.86px 0.2px #3333336b;
} 
.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: #00a1fd;
}
.github-badge .bg-orange {
    background-color: #ffa500;
}
.github-badge .bg-green {
    background-color: #3bca6e;
}
.github-badge .bg-purple{
    background-color:#ab34e9;
}
.github-badge .bg-red{
    background-color:#ff1010;
}

以下代码放在外观设置-开发者设置-博客底部左侧信息中

<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://xfsay.com/" target="_blank">
        <span class="badge-value bg-orange">©2025 小飞说</span>
    </a>
</div> | 
<div class="github-badge">
    <span class="badge-subject"><i class="iconfont icon-beian"></i>陕ICP备</span>
    <a href="https://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2024046430号-2</span></a>
</div>

以下代码放在外观设置-开发者设置-博客底部右侧信息中

<!--右侧底部--> <div class="github-badge"> <span class="badge-subject"><i class="iconfont icon-tengxunyun"></i>本站由</span> <a href="https://cloud.tencent.com" target="_blank"> <span class="badge-value bg-blue">腾讯云提供服务</span> </a> </div> | <div class="github-badge"> <span class="badge-subject"><i class="iconfont icon-typecho"></i>Theme by</span> <a href="https://www.ihewro.com/archives/489/" target="_blank"> <span class="badge-value bg-purple">Handsome</span></a> </div>
5、自定义字体

自定义字体

选择字体，然后去字体转换把 otf、ttf转换成 woff格式。
将转换成功后的字体上传至网站目录中,默认字体目录是 /usr/themes/handsome/assets/fonts文件夹里。
前往 外观设置-开发者设置-自定义css中添加以下代码

/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}
6、右侧添加人生倒计时（岁月不待人）

首先找到网站根目录 /usr/themes/handsome/component/sidebar.php文件，找到 <!--广告位置-->这一行内容。 在该内容向上两行找到 <?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>
<!-- 时间倒计时代码结束 -->

改好后保存退出，进入网站根目录 /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()

js文件弄好后，在 设置外观-开发者设置-自定义输出body尾部的HTML代码处添加以下代码。
注意第一行timeinfo.js前面的域名要改成你自己的域名

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

最后一步，去自定义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)
}
7、404页面自动返回首页

在主题文件 404.php 内 <div class="list-group bg-info auto m-b-sm m-b-lg"> 前面加上下面的代码，返回小飞说首页 替换成自己的站点名。

<div class="juzhong404">
 <p>页面将在 0<span id="countdown">5</span> 秒后返回小飞说首页</p>
 <p> <span class="xiaoshou404" onclick="immediateReturn()">立即返回上一页</span></p>
</div>

在 </body> 前面加上下面的代码， https://xfsay.com 替换成自己的站点地址。

<script>
     let countdown = 5; // 倒计时初始值
     let countdownElement;

     function updateCountdown() {
         countdownElement.innerText = countdown;
         if (countdown > 0) {
             countdown--;
             setTimeout(updateCountdown, 1000);
         } else {
             // 5秒后返回上一页
             // window.history.back();
             // 5秒后返回首页
             window.location.href = 'https://xfsay.com';
         }
     }

     function immediateReturn() {
         // 点击立即返回按钮，直接返回上一页
         window.history.back();
         // 点击 首小飞说首页，直接返回首页
         // window.location.href = 'https://xfsay.com';
     }

     window.onload = function() {
         countdownElement = document.getElementById('countdown');
         updateCountdown(); // 开始倒计时
     };
 </script>
 <style>
     .xiaoshou404 {
         cursor: pointer;
         color: #666666;
     }
     .juzhong404{
         display: flex;
         flex-direction: column;
         align-items: center;
         margin-bottom: 5px;
         color: #888888;
     }
 </style>
8、新年灯笼

以下代码放在外观设置-开发者设置-自定义css中

@media only screen and (max-width: 760px) {
    .deng-box, .deng-box1 {
        display:none;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .right {
        float: left!important;
    }
}
.tc_dl1{
    position: relative;
    left: -13.625px;
   width:70.75px;
    }
.tc_dl1 img{width: 95px;/* height: 488px;*/justify-content: center;}
.tc_dl2{position: relative;left:-13.625px;width:70.75px;}
.tc_dl2 img{width: 95px;}
.deng-box {
    position: fixed;
    top:-3rem;
    left: -3rem;
    z-index: 9999;
}
.deng-box1 {
    position: fixed;
    top: -3rem;
    right: -3rem;
    z-index: 9999;
}
.deng-box1 .deng {
    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);
}
.deng {
    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 50px 4px rgba(250, 108, 0, 1);
}
.deng-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;
}
 .deng-b {
    width: 45px;
    height: 154px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.shui-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;
}
.shui-b {
    position: absolute;
    top: 22px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
   .shui-c {
    position: absolute;
    top: 28px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
.deng: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);
}
   .deng: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);
}
.deng-t {
    font-family: "楷体";
    font-size: 26px;
    color: #f9b842;
    font-weight: bold;
    line-height: 37px;
    text-align: center;
   padding-top:10px;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
    background: transparent !important;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg);
    }
    50% {
        -moz-transform: rotate(10deg);
    }
    100% {
        -moz-transform: rotate(-10deg);
    }
}
@-webkit-keyframes swing {
    0% {
        box-shadow: -5px 5px 50px 4px gold;
        -webkit-transform: rotate(-10deg);
    }
    50% {
        box-shadow: -5px 5px 50px 4px  rgba(250, 108, 0, 1);
        -webkit-transform: rotate(10deg);
    }
    100% {
        box-shadow: -5px 5px 50px 4px gold;
        -webkit-transform: rotate(-10deg);
    }
}
#envelope{width:35px;margin-bottom:25px;}

以下代码放在开发者设置➡自定义输出body尾部的HTML代码中

img标签中的所有src均可更换

<div class="deng-box">        
        <div class="deng">
        <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">新春
                        <img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/> 
                        <div class="tc_dl1">
                            <img src="https://s11.ax1x.com/2024/01/25/pFmVSUg.jpg"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shuishui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>   
        </div>   
    </div>
    <div class="deng-box1">   
        <div class="deng">  
            <div class="xian"></div>
            <div class="deng-a">  
                <div class="deng-b">
                    <div class="deng-t">快乐 
                    <img src="https://s11.ax1x.com/2024/01/25/pFmEvb8.png" id="envelope"/>
                    <div class="tc_dl2 ">
                        <img src="https://s11.ax1x.com/2024/01/25/pFmEzVS.jpg"/>
                    </div>
                    </div>
                </div>   
            </div>
            <div class="shuishui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        </div>
    </div>
9、侧边栏添加二维码

打开/usr/themes/handsome/component文件夹下的sidebar.php在大概81行的section之后，也就是随机文章那一块之后,博客信息之前。当然具体位置可以按照自己的喜好来。


<section  id="blog_qrurl" class="widget widget_categories wrapper-md clear">
        <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
          <h5 class="widget-title m-t-none text-md"><?php _me("移动端阅读") ?></h5>
          <style>
              #qrcode img{
                  max-width: 100%;
              }
              @media (max-width: 767px){
                  #qrcode{
                      display: none;
                  }
              }
          </style>
          <div id="qrcode"></div>
          <script>
            var elText = window.location.href;
            new QRCode(document.getElementById("qrcode"), elText);
          </script>
      </section>
10、评论时间修改

将以下代码放到 /usr/themes/handsome/component/comments.php 内，找到 <a href="#<?php $comments->theId()?>"> 这一行，把这 整行 替换掉。(目前再用的)

<a href="#<?php $comments->theId()?>"><time class="format_time text-muted text-xs block m-t-xs" pubdate="pubdate" datetime="<?php $comments->date('c'); ?>"><?php echo Utils::formatDate($comments, $comments->created, 'Y-m-d H:i:s'); ?></time></a>
Last modification：May 19, 2025
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏