主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码

<!--浏览器动态标题开始-->
<script>
    var OriginTitle = document.title;
    var titleTime;
    
    // 获取当前页面的favicon路径
    function getFavicon() {
        var favicon = document.querySelector('link[rel="icon"]');
        return favicon ? favicon.href : '/favicon.ico'; // 如果没有找到favicon，返回默认路径
    }

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

调用主题自带弹窗
主题设置-开发者设置-自定义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: "success",
    autoHide: !1,
    time: "3000"
    })
}}
<!--复制弹窗结束-->

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
    box-shadow: 0 0 16px #0f0;
    }

    50% {
    box-shadow: 0 0 4px #00f;
    }

    75% {
    box-shadow: 0 0 16px #0f0;
    }

    100% {
    box-shadow: 0 0 4px #f00;
    }
}

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：

@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

    to {
        box-shadow: 0 0 16px #f00;
    }
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

/*文章内标题头样式*/
header.bg-light.lter.wrapper-md h1.entry-title.m-n.font-thin.text-black.l-h,
header.bg-light.lter.wrapper-md h1.entry-title.m-n.font-thin.text-black.l-h * ,
header.bg-light.lter.wrapper-md .entry-meta.text-muted.list-inline.m-b-none.small.post-head-icon,
header.bg-light.lter.wrapper-md .entry-meta.text-muted.list-inline.m-b-none.small.post-head-icon * {
  font-family: 'Cursive', sans-serif;
  font-weight: bold;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  transform: skew(-10deg);
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.comment-content-true a:not(.light-link):not(.post_inser_a),.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a) {
  color:#23b7e5;
  /* 天蓝色文本 */
    transition:color .3s,text-decoration-color .3s;
  /* 过渡效果 */
}
.comment-content-true a:not(.light-link):not(.post_inser_a):hover,.comment-content-true a:not(.light-link):not(.post_inser_a):focus,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus {
  color:#fff;
  /* 文本颜色变为白色 */
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

.dropdown.wrapper {
  background:url(https://blog.oini.de/usr/uploads/2025/05/4141278483.webp) right bottom no-repeat;
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

/* logo扫光 */
.navbar-brand {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.navbar-brand:before {
  content: "";
  position: absolute;
  left: -665px;
  top: -460px;
  width: 200px;
  height: 15px;
  background: linear-gradient(45deg, #b8b8b8, #f5f5f5, #d0d0d0);
  background-size: 400% 400%;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 40px rgba(255, 255, 255, 0.3);
  transform: rotate(-45deg);
  animation: searchLights 6s ease-in-out infinite, metalShine 3s linear infinite;
}

/* 使光束动画更流畅，并带有金属反射效果 */
@keyframes searchLights {
  0% {
    left: -665px;
    top: -460px;
  }
  50% {
    left: -100px;
    top: 0;
  }
  65% {
    left: 120px;
    top: 100px;
  }
  80% {
    left: -100px;
    top: 0;
  }
  100% {
    left: -665px;
    top: -460px;
  }
}

/* 金属光泽闪动效果 */
@keyframes metalShine {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

主题设置 - 开发者设置 - 博客底部右侧信息

<div class="github-badge">
<a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="渝ICP备XXXXXX号">
<span class="badge-subject">渝ICP备</span><span class="badge-value bg-black">XXXXXX号</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>

主题设置 - 开发者设置 - 自定义CSS添加以下代码

/* 底部页脚css */
.github-badge {
  display:inline-block;
  border-radius:5px;
  text-shadow:none;
  font-size:13px;
  color:#fff;
  line-height:15px;
  background-color:#abbac3;
  margin-bottom:2px;
}
.github-badge .badge-subject {
  align-items:center;
  background-color:#4d4d4d;
  padding:3px 3px 3px 3px;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}
.github-badge .badge-subject .badge-icon {
  display:inline-block;
  height:15px;
  width:auto;
  vertical-align:middle;
}
.github-badge .badge-value {
  display:inline-block;
  padding:3px 3px 3px 3px;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}
.github-badge .bg-blue {
  background-color:#007ec6;
}
.github-badge .bg-pearl {
  background-color:#FA92B5;
}
.github-badge .bg-orange {
  background-color:#ffa500;
}
.github-badge .bg-green {
  background-color:#3bca6e;
}

版权信息&正文结束分割线

.cutline {
    border-top: 1px dotted #ccc;
    height: 1px;
    margin: 20px 0;
    text-align: center;
    width: 100%;
}
.cutline span {
    background-color: rgb(236, 237, 238);
    border: 1px solid #d6d6d6;
    font: 12px Arial,Microsoft JhengHei;
    padding: 2px 4px;
    position: relative;
    top: -10px;
}
.post-copyright {
    font-size: 13px;
    margin: 8px 0;
    padding: 10px;
    border-left: 4px solid #3bd58a;
    background-color: rgba(220, 220, 220, 0.2); /* 调整背景色的透明度以增强毛玻璃效果 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    list-style: none;
    word-break: break-all;
    position: relative;
    overflow: hidden;
}
.post-copyright li {
    display: list-item;
    text-align: -webkit-match-parent;
}
.post-copyright a {
    color: rgba(0, 120, 231, 1);
    text-decoration: none;
    transition: color .1s;
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

/*毛玻璃*/
ul.list-group.box-shadow-wrap-normal li.list-group-item {
  backdrop-filter:blur(10px);
  /* 应用毛玻璃效果 */
    -webkit-backdrop-filter:blur(10px);
  /* 针对旧版WebKit浏览器的兼容性 */
    background-color:rgba(255,255,255,0.2);
  /* 设置背景颜色为半透明，以更好地显示模糊效果 */
    border-radius:4px;
  /* 添加4像素的圆角 */
    margin-bottom:5px;
  /* 添加一些底部外边距以分隔列表项 */
    padding:1px;
  /* 添加内边距 */
}
/*评论边框*/
.comment-parent {
  margin:15px;
  padding:30px;
  border-radius:5px;
  border:2px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(10px);
  /* 添加毛玻璃效果 */
}
/* 弹窗的主体样式，包括高斯模糊和背景设置 */
.c-message {
  backdrop-filter:blur(10px);
  /* 高斯模糊效果 */
    background-color:rgba(255,255,255,0.3);
  /* 半透明白色背景 */
    border-radius:10px;
  /* 圆角边框 */
    /* 其他必要的样式 */
}
/* 设置标题文本颜色为纯白 */
.c-message__title {
  color:#FFFFFF;
  /* 纯白色 */
    /* 其他必要的样式 */
}
/* 设置内容文本颜色为纯白 */
.el-notification__content {
  color:#FFFFFF;
  /* 纯白色 */
    /* 其他必要的样式 */
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

/*小头图斜切*/
/*小头图斜切 - 美化版 + 磨砂透明效果*/
.panel-small.single-post {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  background-color: transparent;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin: 15px 0;
}

.panel-small.single-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

.panel-small .index-post-img-small {
  z-index: 1;
  -webkit-clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
  position: relative;
  flex: 0 0 40%;
  overflow: hidden;
}

.panel-small .post-pic {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.panel-small.single-post:hover .post-pic {
  transform: scale(1.08);
}

.panel-small.single-post::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(35, 35, 40, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 0;
  border-radius: 12px;
}

.panel-small .post-meta {
  z-index: 2;
  display: flex;
  color: inherit;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  position: relative;
}

.panel-small .text-title {
  color: #fff;
  transition: color 0.3s ease;
}

.panel-small.single-post:hover .text-title {
  color: #f0f0f0;
}

.panel-small .post-meta h2 {
  font-weight: 700;
  font-size: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.05rem;
  margin-bottom: 12px;
}

.panel-small .post-meta p {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.03rem;
  line-height: 1.6;
}

.panel-small .text-muted {
  color: rgba(240, 240, 255, 0.9);
}

.panel-small .post-meta.wrapper-lg {
  padding: 25px 30px 20px 30px;
}

.panel-small .post-item-foot {
  margin-top: 15px;
  font-size: 0.98rem;
  opacity: 0.9;
}

.panel-small .post-item-foot svg{
    width: 13px;
    height: 13px
}

.panel-small .post-item-foot-icon svg {
  opacity: 0.85;
  transition: opacity 0.3s;
}

.panel-small.single-post:hover .post-item-foot-icon svg {
  opacity: 1;
}

.panel-small .post-item-foot a {
  position: relative;
  transition: color 0.3s ease;
}

.panel-small .post-item-foot a:hover {
  color: #ffffff;
}

.panel-small .post-item-foot a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

.panel-small .post-item-foot a:hover::after {
  width: 100%;
}

.panel-small .m-r-sm {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}

.panel-small .summary {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.6;
  max-height: 3.2em;
  margin-bottom: 15px;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.panel-small.single-post:hover .summary {
  opacity: 1;
}

@media (max-width: 767px) {
  .panel-small.single-post {
    flex-direction: column;
  }
  
  .panel-small .index-post-img-small {
    -webkit-clip-path: none;
    clip-path: none;
    height: 200px;
    flex: none;
    width: 100%;
  }
  
  .panel-small .post-meta h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 500px) {
  .panel-small .index-post-title {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 8px;
    height: auto;
    max-height: 3em;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  
  .panel-small .post-meta.wrapper-lg {
    padding: 20px;
  }
}

@media (max-width: 500px) {
  .panel-small .summary {
    display: none;
  }
}

@media (max-width: 380px) {
  .panel-small .post-meta {
    padding: 15px;
  }
  
  .panel-small .post-item-foot {
    font-size: 0.85rem;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .panel-small .summary {
    max-height: 4.8em;
    -webkit-line-clamp: 3;
  }
  
  .panel-small .line-lg {
    margin-top: 1px;
    margin-bottom: 1px;
  }
}

/* 暗色主题优化 */
html.theme-dark .panel-small.single-post::before {
  background-color: rgba(20, 20, 25, 0.3);
}

html.theme-dark .panel-small.single-post {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

html.theme-dark .panel-small .post-meta h2 {
  color: #e0e0e0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

html.theme-dark .panel-small .post-meta p {
  color: #cccccc;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

html.theme-dark .panel-small .text-muted {
  color: #b5b5b5;
}

html.theme-dark .panel-small .post-item-foot-icon svg {
  stroke: #b0b0b0;
}

html.theme-dark .panel-small.single-post:hover .post-item-foot-icon svg {
  stroke: #d0d0d0;
}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

/*文章一二三四级标题美化*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#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:#F8F8FF;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

主题设置 - 开发者设置 - 自定义CSS添加以下代码

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #30B07F;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

主题设置 - 开发者设置 - 自定义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;}

主题设置 - 开发者设置 - 自定义JavaScript 和 PJAX回调函数 均添加上以下代码

function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
    }
};

主题目录的component/comments.php里面的130行左右参照下面代码进行修改

<label for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO" style="display: inline;"></div>
                                            <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
              <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
          <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">

主题设置 - 开发者设置 - 自定义CSS 添加以下代码

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

在/usr/themes/handsome/functions.php文件中添加以下统计代码

//总访问量
    function theAllViews()
        {
            $db = Typecho_Db::get();
            $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                echo number_format($row[0]['SUM(VIEWS)']);
        }

在/usr/themes/handsome/component/sidebar.php文件中插入以下调用代码

<li class="list-group-item text-second"> <i data-feather="users" class="text-muted text-muted"></i> <span class="badge
pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>

其他主题单独调用代码

<?php echo theAllViews();?></span><?php _me("访客总数") ?>

效果：

在/usr/themes/handsome/functions.php文件中添加以下统计代码

//加载耗时
    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"> <i class="glyphicon glyphicon-time text-muted text-muted""></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

效果：

主题设置 - 开发者设置 - 自定义js添加以下代码

<script>
// 定义执行页面颜色变换的函数
function executePageActions() {

    // 随机为左侧导航图标设置颜色
    let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i,.sidebar-icon>svg");
    let leftHeaderColorArr = ["#FF69B4","#58c7ea","#E066FF","#FF69B4","#FFA54F","#90EE90","#0043ff","#cc00ff","#8e7cc3","#A0522D","#FF7256","#FFA500","#8B0000","#7CFC00","#4EEE94","#00FFFF","#EE0000"];
    leftHeader.forEach(tag => {
        const tagsColor = leftHeaderColorArr[Math.floor(Math.random() * leftHeaderColorArr.length)];
        tag.style.color = tagsColor;
        tag.style.stroke = tagsColor;
    });

    // 随机为标签和徽章设置背景颜色
    let tags = document.querySelectorAll("#tag_cloud-2 a,#tag_cloud-post a");
    let infos = document.querySelectorAll(".badge");
    let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
    tags.forEach(tag => {
        const tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
        tag.style.backgroundColor = tagsColor;
    });
    infos.forEach(info => {
        const infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
        info.style.backgroundColor = infosColor;
    });
}

// 页面首次加载时执行一次
document.addEventListener('DOMContentLoaded', function() {
    executePageActions();  // 页面加载时执行
});

// 覆盖 pushState 和 replaceState 方法，监听 URL 变化并延迟执行
(function() {
    const pushState = history.pushState;
    const replaceState = history.replaceState;

    let isDelayedExecuted = false; // 标记延迟操作是否已执行

    // 延迟执行函数
    function delayedExecute() {
        setTimeout(executePageActions, 500);
    }

    // 监听页面跳转，延迟执行
    history.pushState = function(state, title, url) {
        if (!isDelayedExecuted) {
            isDelayedExecuted = true;
            pushState.apply(history, arguments);
            delayedExecute();
        }else{
            isDelayedExecuted = false;
        }
    };

    history.replaceState = function(state, title, url) {
        if (!isDelayedExecuted) {
            isDelayedExecuted = true;
            replaceState.apply(history, arguments);
            delayedExecute();
        }else{
            isDelayedExecuted = false;
        }
    };
})();
</script>

主题设置 - 开发者设置 - 自定义js添加以下代码

function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br><br>" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "2500"
})

主题设置 - 开发者设置 - 自定义js添加以下代码

<script>
/* FPS显示 */
var console={};
console.log=function(){};

// 修改颜色为纯白并增大字号
$('body').before('<div id="fps" style="z-index:10000; position:fixed; top:3px; left:3px; font-weight:bold; color:white; font-size:larger;"></div>');

var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
            last += offset; 
            appendFps(fps); 
            fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();
</script>

主题设置 - 开发者设置 - 自定义输出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: rgba(255, 255, 255, 0.3); /* 更透明的背景 */
        -webkit-backdrop-filter: blur(20px); /* 高斯模糊效果 */
        backdrop-filter: blur(20px); /* 高斯模糊效果 */
        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: #fff; /* 纯白色文字 */
        padding: 0 15px;
        display: block;
    }
    div.usercm ul li a:hover {
        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: rgba(255, 255, 255, 0.3) !important; /* 更透明的背景 */
    }
</style>

<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://blog.oini.de/"><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-left"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fontello fontello-chevron-right"></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="/youqing.html"><i class="fontello fontello-emo-tongue"></i><span>友链</span></a></li>  
        <li><a href="/cross.html"><i class="fontello fontello-clock-o"></i><span>时光机</span></a></li>  
        <li><a href="mailto:445960228@qq.com"><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>

主题设置 - 初级设置设置 - 博主的介绍

<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) {
                var n = document.createDocumentFragment();
                for (var 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>

主题设置 - 开发者设置 - 自定义css添加以下代码

.img-square {
    transition: all 0.3s;
    border-radius: 50%;
}

.img-square:hover {
    transform: rotate(360deg);
}

在Handsome/post.php内<?php echo Content::exportPayForAuthors(); ?>和<?php endif; ?>中，具体的自己看着来。

<!--版权声明开始-->
<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>
        <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><br></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->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
       </div>
  </div>
<!--版权声明结束-->

/*主题标题居中*/
header.bg-light.lter.wrapper-md {
  font-family: 'Cursive', sans-serif;
  text-align:center;
}
/*一言*/
  header.lter small {
    font-family: 'Cursive', sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 1px;
    font-weight: bold;
  }

GZIP 压缩可以显著减小带宽压力，加快网站加载速度。在 config.inc.php 文件中添加以下配置：

/** 开启gzip压缩 */
ob_start('ob_gzhandler');

防止调试

/* 防调试 */
$(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;
            layer.msg("球球了，别再扒孩子了=.=")
            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;
        }
    };
});

//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="https://blog.ybyq.wang"}});
console.log(element);

首先注册心知天气获取api,注册地址https://www.seniverse.com/widgetv3

需要修改的文件在网站根目录/usr/themes/handsome/component/headnav.php
在第54行左右的下面（<!-- search form -->）将在心知天气获取到的代码添加进去即可

<!-- 知心天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
       <style>
       #tp-weather-widget {
        margin-top: 16px; /* 向下移动16像素，可根据需要调整 */
      }
      #tp-weather-widget * {
        color: white !important;
        font-size: 14px !important;   /* 根据视口宽度调整字体大小 */
        font-weight: bold !important;
        font-family: "Comic Sans MS", cursive, sans-serif !important;
      }
    </style>
      <script>
        const interval = setInterval(() => {
        const targetElements = document.querySelectorAll('.sw-ui-brand');
        if (targetElements.length > 0) {
          targetElements.forEach(el => el.remove());
          console.log('Removed .sw-ui-brand elements');
          clearInterval(interval); // 如果只加载一次，可停止轮询
        }
      }, 500);
        (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: "W7VD5N6F061Q",
        geolocation: true,
        language: "auto",
        unit: "c",
        theme: "auto",
        token: "",//token
        hover: "enabled",
        container: "tp-weather-widget"
        })
      </script>
      <!-- 知心天气-->

或者

<!-- 知心天气-->
<div
  id="tp-weather-widget"
  class="navbar-form navbar-form-sm navbar-left shift"
></div>
<script>
  (function (T, h, i, n, k, P, a, g, e) {
    g = function () {
      P = h.createElement(i);
      a = h.getElementsByTagName(i)[0];
      P.src = k;
      P.charset = "utf-8";
      P.async = 1;
      a.parentNode.insertBefore(P, a);
    };
    T["ThinkPageWeatherWidgetObject"] = n;
    T[n] ||
      (T[n] = function () {
        (T[n].q = T[n].q || []).push(arguments);
      });
    T[n].l = +new Date();
    if (T.attachEvent) {
      T.attachEvent("onload", g);
    } else {
      T.addEventListener("load", g, false);
    }
  })(
    window,
    document,
    "script",
    "tpwidget",
    "//widget.seniverse.com/widget/chameleon.js"
  );
</script>
<script>
  tpwidget("init", {
    flavor: "slim",
    location: "WX4FBXXFKE4F",
    geolocation: "enabled",
    language: "auto",
    unit: "c",
    theme: "chameleon",
    container: "tp-weather-widget",
    bubble: "enabled",
    alarmType: "badge",
    color: "#C6C6C6",
    uid: "你的公钥",
    hash: "你的密钥",
  });
  tpwidget("show");
</script>
<!-- 知心结束-->

/* 手机端不显示热门文章和标签云 */
@media (max-width:767px) {
  #right_first_section, #tag_cloud {
    display: none;
  }
}

将以下代码加到/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;
  background: transparent;
}

.sidebar-count .content .item .progress .progress-bar {
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(150, 150, 150, 0.2);
  width: 100%; /* 确保宽度撑满父容器 */
  position: relative;
  transition: background 0.3s;
}
.sidebar-count .content .item .progress .progress-bar:hover {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -1px 2px rgba(255, 255, 255, 0.4);
}

@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="/usr/themes/handsome/assets/js/timeinfo.js"></script>