header.bg-light.lter.wrapper-md {
  text-align: center;
}

.post_title_wrapper
{
    justify-content: center;
}

.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
    text-align: center;
    background-color: #fff;
}

.badge,.padder-v-ssm{
    color:#fff;
}

/*赞赏按钮跳动*/
.btn-pay {
  animation: star 0.5s ease-in-out infinite alternate; 
} 
@keyframes star { 
  from { transform: scale(1); } 
  to { transform: scale(1.1); } 
}

.index-post-title a:hover {
  color: #2ebaae;
}

/*白色整体背景*/
div#alllayout {
    background-color: #fff;
}
.night div#alllayout {
    background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
    background-color: #fff;
}
/*页面底部*/
.bg-light {
    background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
    background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
    background-color:#fff;
}
/*文章页面变白*/
#post-panel {
    background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
    background-color: #fff;
}

/*博客信息-搜索框-幻灯片 阴影*/
.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);
}

/*首页文章图片获取焦点放大*/
.item-thumb {
    cursor: pointer;
    transition: all .6s;
}
.item-thumb:hover {
    transform: scale(1.05);
}

/* 文章悬浮效果 */
.blog-post .panel:not(article){transition:all .3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px)}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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;
}

需要将以下代码添加到后台-PJAX->PJAX回调函数中和后台-外观设置-开发者设置-自定义 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

//进度条加载显示
$(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;
  }

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

进入网站右上角提示

function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！";
}else{
return "";
}}
$.message({
    message: "欢迎来的我的小破站<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})

复制提升框复制提示框会监听键盘Ctrl+C

aygb_copy();function kaygb_copy()
{
    $(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer()
    {
$.message(
    {
    message: "尊重原创，转载请注明出处",
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}
}

首先找到网站根目录 /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>
<!-- 时间倒计时代码结束 -->

在后台-外观设置-开发者设置-自定义 JavaScript 填写以下代码
或者创建一个js的文件，并将以下代码放进该文件后，保存并退出
在 设置外观-开发者设置-自定义输出body尾部的HTML``

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

在后台-外观设置-开发者设置-自定义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)
}

在主题文件post.php中，大概在90行左右

             <!--文章页脚的广告位-->
        <?php $this->options->adContentPost(); ?>
             <?php endif; ?>

在↑↑↑↑↑内容下面添加代码

    <!--内容结束分割线-->
<div class="tt-fenge-end"> <span>End</span> </div>
    <!--/ 内容结束分割线-->

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

/*文章正文下的结束End分割线样式*/
.tt-fenge-end{
  border-top: 2px dotted #eee;
  height: 0px;
  margin: 35px 0px;
  text-align: center;
  width: 100%;
  line-height: 1.6em;
  }
.tt-fenge-end span{
  background-color: #23b7e5;
  color: #fff;
  padding: 2px 8px;
  position: relative;
  top: -14px;
  border-radius: 12px;
  font-size: 12px;
  }
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{
  border-top: 2px dotted #4f4f4f;
  }

在主题文件post.php中，大概在90行左右

 <!--文章页脚的广告位-->
 <?php $this->options->adContentPost(); ?>
 <?php endif; ?>

在↑↑↑内容下面添加代码

    <!--知识共享许可协议-->
<div class="tt-license">
    <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：<?php $this->title() ?></p>
    <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：<?php $this->permalink() ?></p>
    <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品遵循<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">CC 4.0 BY-SA 版权协议</a>。</p>
    <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
</div>
    <!-- / 知识共享许可协议-->

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

/*文章正文下的知识共享许可协议*/
.tt-license {
  font-size: 12px;
  font-weight: 600;
  padding: 1rem;
  background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);
  background-color: #f3f5f7;
  border-left: 3px solid #dde6e9;
  margin-bottom: 20px;
  }
.tt-license-icon {
  align-items: center;
  position: relative;
  float: left;
  margin: -10px -10px -10px 0;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  display: flex;
  height: 40px;
  color: #ff5722;
  }
.tt-license a {
  color: #337ab7;
  text-decoration: underline;
  margin: 0 5px;
  }
 /*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {
  background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);
  border-left: 3px solid #494949;
  }
.tt-license p {
  line-height: 1.5em;
  margin: 5px 0!important;
  }