记录一下对handsome主题的改动，大部分改动都来源于handsome社区里的教程，就不记录原版的效果了，也相当于自己留个备份。

handsome 9.2.1 Pro

内容部分来源于网络，如有侵权请留言删除！

更新时间：2025-09-22

logo扫光

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扫光结束*/

博主介绍闪字效果

博主介绍闪字效果


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

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

主题标题居中

主题标题居中


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

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

登录/时光机头像显示异常

登录/时光机头像显示异常


后台-外观设置-速度优化-gravatar镜像源地址填入https://cravatar.cn/avatar 即可显示在头像图片地址中设置的图片。

进度条加载显示

进度条加载显示


以下代码放在 后台-外观设置-开发者设置-自定义JavaScript

//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

以下代码放在 后台-外观设置-开发者设置-自定义输出head 头部的HTML代码

<div id="percentageCounter"></div>

在后台-外观设置-开发者设置-自定义CSS填写以下代码

/*进度条加载显示*/
#percentageCounter{
  position:fixed; left:0; top:0; height:3px;
  z-index:99999; 
  background-image: linear-gradient(to right, #339933,#FF6666);
  border-radius:5px;
  }

岁月不待人

岁月不待人


首先找到网站根目录 后台-外观设置-开发者设置-自定义输出head 头部的HTML代码文件，找到<--广告位置-->这一行内容。在该内容向上两行找到 <?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="yearProgress">
            <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>
</div>
     </section>
<!-- 时间倒计时代码结束 -->

在后台-外观设置-开发者设置-自定义 JavaScript 填写以下代码

function init_life_time() {
const INITIAL_DATE_SERVER = '2025-08-26';
const INITIAL_DATE_DOMAIN = '2025-08-26';
const INITIAL_DATE_SSL = '2025-09-08';
function getAsideLifeTime() {
const initialDate_server = new Date(INITIAL_DATE_SERVER);
const timeDiff_server = new Date() - initialDate_server;
const daysDifference_server = 365-Math.floor(timeDiff_server / (1000 * 3600 * 24));
const percentage_server = (daysDifference_server / 365) * 100;
$('#serverProgress .title span').html(parseInt(daysDifference_server));
$('#serverProgress .progress .progress-inner').css('width', parseInt(percentage_server) + '%');
$('#serverProgress .progress .progress-percentage').html(parseInt(percentage_server) + '%');
const initialDate_domain = new Date(INITIAL_DATE_DOMAIN);
const timeDiff_domain = new Date() - initialDate_domain;
const daysDifference_domain = 365-Math.floor(timeDiff_domain / (1000 * 3600 * 24));
const percentage_domain = (daysDifference_domain / 365) * 100;
$('#domainProgress .title span').html(daysDifference_domain);
$('#domainProgress .progress .progress-inner').css('width', parseInt(percentage_domain) + '%');
$('#domainProgress .progress .progress-percentage').html(parseInt(percentage_domain) + '%');
const initialDate_ssl = new Date(INITIAL_DATE_SSL);
const timeDiff_ssl = new Date() - initialDate_ssl;
const daysDifference_ssl = 89-Math.floor(timeDiff_ssl / (1000 * 3600 * 24));
const percentage_ssl = (daysDifference_ssl / 89) * 100;
$('#sslProgress .title span').html(daysDifference_ssl);
$('#sslProgress .progress .progress-inner').css('width', parseInt(percentage_ssl) + '%');
$('#sslProgress .progress .progress-percentage').html(parseInt(percentage_ssl) + '%');
}
getAsideLifeTime();
setInterval(() => {
getAsideLifeTime();
}, 1000);
}
init_life_time()

在后台-外观设置-开发者设置-自定义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: #dfb3ff;
  background-image: linear-gradient(135deg, #e3c1ff 25%, transparent 25%, transparent 50%, #e3c1ff 50%, #e3c1ff 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
  background: #9ed880;
  background-image: linear-gradient(135deg, #9ed880 25%, transparent 25%, transparent 50%, #9ed880 50%, #9ed880 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
  background: #1f4457;
  background-image: linear-gradient(135deg, #ead5f6d3 25%, transparent 25%, transparent 50%, #92b1c2 50%, #92b1c2 75%, transparent 75%, transparent 100%);
  background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-percentage {
  color: var(--info)
}

代码高亮失效问题

代码高亮失效问题


这里贴下原博主文章
在 themes/handsome/libs/CDN.php 里面把

"highlight":"https://1f3-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/10.6.0"

全部改为

"highlight":"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0"

左侧彩色图标&右侧彩色标签云

左侧彩色图标&右侧彩色标签云


需要将以下代码添加到后台-外观设置-开发者设置-自定义 JavaScript

//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
      tag=>{
        tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
        tag.style.color=tagsColor
    }
);    
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
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;
});
function addNumber(a) {
     var length = document.getElementById("comment").value.length;
     if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
     }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
     }
}
$(function(){
    $("#PageLoading").fadeOut(400);
    $("#body").css('overflow','');
});

鼠标点击特效

鼠标点击特效


需要将以下代码添加到后台-外观设置-开发者设置-自定义 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();
        });
    });
});

浏览器动态标题

浏览器动态标题


在后台-外观设置-开发者设置-自定义输出body尾部的HTML代码添加以下代码

<!--浏览器动态标题开始-->
<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>
<!--浏览器动态标题结束-->

添加备案信息

添加备案信息


在后台-外观设置-开发者设置-博客底部左侧信息加入以下代码

<a href="http://beian.miit.gov.cn/" target="_blank" style="cursor: url(&quot;https://cdn.jsdelivr.net/gh/awslblog/HoerMouse@1.0.0/static/image/star/link.cur&quot;), pointer;">京ICP备xxxxxxx号</a>

统计字数和访问人数

统计字数和访问人数


将以下代码加到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 allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
/*全站字数结束*/

将以下代码加到/usr/themes/handsome/component/sidebar.php，找到<?php echo Utils::getLatestTime($this); ?>一行内容。在该内容向下面添加如下代码：

<!--访客总数代码开始-->
<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="edit-3"></i></span>
<span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

最后修改：2025 年 09 月 22 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏