我个人并不推荐你使用插件进行美化，因为插件确实会影响到网站的文章加载及打开速度
（原因是：当我把插件卸载掉全部改成自定义CSS和JS后访问速度有明显的提升）

彩色侧边栏图标


自定义CSS处添加 

.nav-tabs-alt .nav-tabs>li.active>a{border-bottom-color:#23b7e5!important;}
.navs-slider-bar{background-color:#058cff!important;}
.post_tab .nav-item.active .nav-link::before{border-bottom-color:rgb(5,140,255)!important;}

自定义JS处添加 

<script>
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#86d2f3","#a3dbf3","#5dbde7","#6b7ceb","#919ff5","#abb6f5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});    
</script>

效果图：



文章上浮+封面图放大


自定义CSS处添加 

.panel{cursor:pointer;transition:all 0.6s;}
.blog-post .panel:not(article):hover{transform:translateY(-10px);}
.panel-small{cursor:pointer;transition:all 0.6s;}
.panel-small:hover{transform:scale(1.05);}
.item-thumb{cursor:pointer;transition:all 0.6s;}
.item-thumb:hover{transform:scale(1.05);}
.item-thumb-small{cursor:pointer;transition:all 0.6s;}
.item-thumb-small:hover{transform:scale(1.05);}
.index-post-img,.entry-thumbnail{overflow:hidden;}


文章阴影（边缘阴影，上浮阴影）

自定义CSS处添加 

.panel{-moz-box-shadow:0 8px 10px rgba(255,112,173,0.35);}
.panel:hover{box-shadow:0 8px 10px rgba(62,147,241,0.37)!important;-moz-box-shadow:0 8px 10px rgba(62,147,241,0.35)!important;}
.panel-small{box-shadow:0 8px 10px rgba(255,112,173,0.35);-moz-box-shadow:0 8px 10px rgba(255,112,173,0.35);}
.panel-small:hover{box-shadow:0 8px 10px rgba(255,112,173,0.35)!important;-moz-box-shadow:0 8px 10px rgba(255,112,173,0.35)!important;}
.app.container{box-shadow:0 0 30px rgba(255,112,173,0.35);}


打赏跳动

自定义CSS处添加 

.btn-pay{animation:star 0.5s ease-in-out infinite alternate;}
@keyframes star{from{transform:scale(1);}to{transform:scale(1.1);}}


首页大标题及下方文字居中


自定义CSS处添加 

.bg-light .lter,.bg-light.lter{text-align:center!important;}

效果图：


文章标题居中


自定义CSS处添加 

.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

效果图：


头像旋转放大+呼吸灯


自定义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;
    }
}

效果图：


彩色标签


自定义JS处添加 

<script>
let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor});
</script>

需要在后台加上PJAX回调函数

let tags = document.querySelectorAll("#tag_cloud-2 a,.list-group-item .pull-right");
let colorArr = ["#86d2f3", "#a3dbf3", "#5dbde7", "#6b7ceb", "#919ff5", "#abb6f5"];
tags.forEach(tag =>{
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor
});

效果图：


进入网站弹窗提示


放到设置外观-开发者设置-自定义输出body 尾部的HTML代码

<script>
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "";
}else{
return "";
}}
$.message({
    message: "网站加载完毕~<br>今天也要开心哦！<br><span style='color:purple;'>٩(๑❛ᴗ❛๑)۶</span>" + kaygb_referrer(),
    title: "Welcome",
    type: "success",
    autoHide: !1,
    time: "5000"
})
</script>

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