[scode type="blue"]这篇文章作为本站美化的记录，有新增时会实时更新。[/scode]
[scode type="green"]更新时间：2025年3月22日12:14:34[/scode]

# 说明
资源来源于[button color="info" icon="" url="https://www.5k5b.com/archives/5.html" type=""]TuJun's Blog[/button]
该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴~~
为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂~ ::tieba:Y.tb7::

# 本站环境

Typecho：1.2.1正式版
HandSome：10.0.0 Pro
其他版本的Typecho和HandSome不确定其可行性，请自行测试~

# 基础设置

## 开启全站HTTPS
[collapse status="false" title="开启全站HTTPS"]1、首先在宝塔或通过配置文件给你的网站配置好证书，并开启强制HTTPS
2、去网站后台，找到设置 -> 基本设置 -> 站点地址将其改为https开头的网址。[/collapse]

## 添加GZIP压缩
[collapse status="false" title="添加GZIP压缩"]这个主要是减小带宽压力，以达到加快网站加速速度的目的。和上面的HTTPS一样，在config.inc.php内加入以下配置即可：
````CSS
/** 开启gzip压缩 */
ob_start('ob_gzhandler');
````
[/collapse]

# 自定义CSS

[scode type="yellow"]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内[/scode]

## 文章标题居中
[collapse status="false" title="文章标题居中"]
````CSS
/*文章标题居中*/
  header.bg-light.lter.wrapper-md {
  text-align: center;
}
````
[/collapse]

## 首页标题文字居中
[collapse status="false" title="首页标题文字居中"]
````CSS
/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
  text-align:center !important;
}
````
[/collapse]

## 左上角博客LOGO/博客名称的扫光效果
[collapse status="false" title="左上角博客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;}}
````
[/collapse]

## 鼠标路过头像时放大并旋转
[collapse status="false" title="鼠标路过头像时放大并旋转"]
````CSS
/* 鼠标经过头像旋转放大 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.img-circle: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;
    }
}
````
[/collapse]

## 时光机内圆形头像
[collapse status="false" title="时光机内圆形头像"]顾名思义，就是将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)
````CSS
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
````
[/collapse]

## 网站右侧滚动条样式
[collapse status="false" title="网站右侧滚动条样式"]此处的#949494;即为滚动条的颜色，你可以去 http://tools.jb51.net/static/colorpicker/ 这个链接去找到你喜欢的颜色然后替换
注意：替换的是#后面的6位数字，#不要动~
````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: #949494;
    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
}
````
[/collapse]

## 右侧列表导航栏图标颜色
[collapse status="false" title="右侧列表导航栏图标颜色"]这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。
同样#后面的六位数字代表颜色，可以改~
````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;}

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

.img-square {
    transition: all 0.3s;
}

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

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
````
[/collapse]

## 等距标签云
[collapse status="false" title="等距标签云"]
````CSS
/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
````
[/collapse]

## 首页文章列表悬停上浮
[collapse status="false" title="首页文章列表悬停上浮"]
````CSS
/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
````
[/collapse]

## 粗斜体上色
[collapse status="false" title="粗斜体上色"]
````CSS
/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}
````
[/collapse]

## 首页文章添加圆角效果
[collapse status="false" title="首页文章添加圆角效果"]
````CSS
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}
````
[/collapse]

## 修改h1，h2标题背景颜色
[collapse status="false" title="修改h1，h2标题背景颜色"]
````CSS
/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}
````
[/collapse]

## 网站背景添加海浪背景
[collapse status="false" title="网站背景添加海浪背景"]添加至后台主题设置-开发者设置-自定义CSS
````CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
````
添加至后台主题设置-开发者设置-自定义输出head 头部的HTML代码
````HTML

<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>
````
[/collapse]

# 自定义JavaScripts
[scode type="blue"]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处
网页文字禁止复制[/scode]

## 复制成功提示
[collapse status="false" title="复制成功提示"]
````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: "5000"
    })
}}
/* 复制成功提示代码结束 */
````
[/collapse]

## 复制文章带有文章版权
[collapse status="false" title="复制文章带有文章版权"]
````JavaScript
/* 复制文章自动带版权开始 */ 
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
     notie({
  type: 'info',
  text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。', 
  autoHide: true
})
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
 
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！<br>'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！<br>'
            + '作者：古月乾一<br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：http://www.504dorm.cn/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：hellolin.cn\n'
            + '链接：' + window.location.href + '\n'
            + '来源：http://www.504dorm.cn/\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
/* 复制文章自动带版权结束 */
````
[/collapse]

## 鼠标点击特效-爱心样式
[collapse status="false" title="鼠标点击特效-爱心样式"]
````JavaScript
//鼠标点击出现爱心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
````
[/collapse]

## 网站加载完成提示
[collapse status="false" title="网站加载完成提示"]
````JavaScript
/* 网站加载完成提示开始 */ 
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != ""){
return "感谢您的访问！ 您来自：<br>" + document.referrer;
}else{
return "";
}}
$.message({
    message: "为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})
/* 网站加载完成提示结束 */
````
[/collapse]

## 左上角网站FPS显示
[collapse status="false" title="左上角网站FPS显示"]
````JavaScript
/* FPS显示 */
var console={};
console.log=function(){};

$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></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();
})();
````
[/collapse]

## 左侧图标颜色和彩色标签云
[collapse status="false" title="左侧图标颜色和彩色标签云"]
````JavaScript
/* 左侧图标颜色and彩色标签云 */
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;
});
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
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});
````
如果你博客开启了PJAX，需要在PJAX回调函数里面添加以下代码：
````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;
});
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
    }
}
````
[/collapse]

## 动态网站标题
[collapse status="false" title="动态网站标题"]当你看其他网站的时候，网页标题会有可爱的变化~
另外代码里的两个链接可以按照自己的需求修改哦~
````JavaScript
/* 动态网站标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");
         document.title = '网页崩溃了！！！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp");
         document.title = '咦，又好啦(✿◡‿◡)' ;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
````
[/collapse]

# 自定义body
[scode type="green"]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处[/scode]

## 气泡背景
[collapse status="false" title="气泡背景"]
````HTML
    id: '',                           //容器ID
    num: 100,                        // 个数
    start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
    radius_min: 1,                   // 初始半径最小值
    radius_max: 2,                   // 初始半径最大值
    radius_add_min: .3,               // 半径增加最小值
    radius_add_max: .5,               // 半径增加最大值
    opacity_min: 0.3,                 // 初始透明度最小值
    opacity_max: 0.5,                // 初始透明度最大值
    opacity_prev_min: .003,            // 透明度递减值最小值
    opacity_prev_max: .005,            // 透明度递减值最大值
    light_min: 40,                 // 颜色亮度最小值
    light_max: 70,                 // 颜色亮度最大值
    is_same_color: false,          //泡泡颜色是否相同
    background:"#f1f3f4"           //背景颜色
````
在 开发者设置 自定义输出body 尾部的HTML代码中添加下面代码，需要修改可参考上方参数
````HTML
<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
````
[/collapse]

## 防止他人F12抓你代码
[collapse status="false" title="防止他人F12抓你代码"]
````HTML

<script type="text/javascript">
    $(document).ready(function () {
      document.oncontextmenu = function () {
        return false;
      }
      //document.onselectstart = function () {
       // return false;
     // }
      //document.oncopy = 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;
        }
      };

});
  </script>
<script>
    //debug调试时跳转页面
    var element = new Image();
    Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.504dorm.cn"}});
    console.log(element);
</script>
````
[/collapse]

## 顶部导航栏添加网页动态滚动进度条|滚动指示器
[collapse status="false" title="顶部导航栏添加网页动态滚动进度条|滚动指示器"]将以下代码加到后台设置->自定义输出head 头部的HTML代码
````HTML

<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;margin-top: 0px;background-color: #6B999B;width: 0%;"></div>
<script type="text/javascript">
    $(window).scroll(function() {
        var winTop = $(window).scrollTop(), //滚动条的位置
                docHeight = $(document).height(),   //文档高度
                winHeight = $(window).height(); //窗口高度
 
        var scrolled = (winTop / (docHeight - winHeight))*100;
 
        $('.scroll-line').css('width', (scrolled + '%'));
    });
</script>
````
需要注意的是，需要关闭后台的固定头部和固定导航，效果最佳，不然可能会看不到效果。
[/collapse]

# 修改文件
[scode type="yellow"]这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份~[/scode]

## 博主介绍文字动态化
[collapse status="false" title="博主介绍文字动态化"]将代码里的这是我的介绍这一部分修改称自己想要展示的内容即可，顺便那个❤也是可以改的，随你开心就是了
将以下代码放到主题后台-外观-设置外观-初级设置-博主的介绍内即可
放之前记得先清空博主的介绍栏内的所有内容
````HTML
<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>
````
[/collapse]

## 右侧添加人生倒计时(岁月不待人)
[collapse status="false" title="右侧添加人生倒计时(岁月不待人)"]首先找到网站根目录/usr/themes/handsome/component
打开sidebar.php文件，找到这一行内容。
在该内容向上两行找到<?php endif; ?>，在该行紧接着下面添加如下代码：
````HTML

<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的文件，并将以下代码放进该文件后，保存并退出
````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()
````
以下代码放在 后台-外观设置-开发者设置-自定义CSS
````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)
}
````
最后一步,将以下代码放在后台-外观设置-开发者设置-自定义输出body尾部
````HTML
  
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>
````
[/collapse]

## 信息统计增加全站字数、在线人数、响应耗时和访客总数
[collapse status="false" title="信息统计增加全站字数、在线人数、响应耗时和访客总数"]首先将以下代码加到/usr/themes/handsome/libs/Content.php中，放在class Content的上面
````PHP
/*访问总量*/
     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;
    }
        /**
     * 全站字数
     */
    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;
    } 
/**
     * 在线人数
     */
    function online_users() {
        $filename='online.txt'; //数据文件
        $cookiename='Nanlon_OnLineCount'; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER['REQUEST_TIME']; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode('|',$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)<=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid='U'.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,'w')){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=>$ftime){ 
                    $fline=$fuid.'|'.$ftime."\n"; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo "$total_online"; 
    }
````
然后在/usr/themes/handsome/component/sidebar.php文件内，找到合适和位置添加以下代码： 注：处就是添加代码的地方，找到你想加的位置添加代码即可
````HTML
<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>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<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>
````
[/collapse]

## 底部版权美化
[collapse status="false" title="底部版权美化"]左侧底部放在 后台-开发者设置-博客底部左侧信息
````HTML

<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://www.504dorm.cn" target="_blank">
        <span class="badge-value bg-blue">©2025 古月乾一</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject">蜀ICP备</span>
    <a href="http://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2024117218号</span></a>
</div>
````
右侧底部放在 后台-开发者设置-博客底部右侧信息
````HTML

<div class="github-badge">
    <span class="badge-subject">本站由</span>
    <a href="https://app.rainyun.com" target="_blank">
        <span class="badge-value bg-blue">雨云服务器提供服务</span></a>
</div> |
<div class="github-badge">
    <span class="badge-subject">Theme by</span>
    <a href="https://www.ihewro.com/" target="_blank">
        <span class="badge-value bg-orange">Handsome</span></a>
</div>
````
css放在 主题设置-自定义css内
````CSS
/*底部页脚css*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.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: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-green {
  background-color: #3bca6e
}
````
[/collapse]

[1]: https://www.5k5b.com/archives/5.html

这篇文章作为本站美化的记录，有新增时会实时更新。

更新时间：2025年3月22日12:14:34

说明

资源来源于
该站的所有修改项均在本文列出，实际效果看本站即可。若您也想拥有类似的效果，欢迎借鉴~~
为了给小白讲明白，这里记录的已经很细了。老博主的话，拿着代码按自己意愿改即可，懂得都懂~

本站环境

Typecho：1.2.1正式版
HandSome：10.0.0 Pro
其他版本的Typecho和HandSome不确定其可行性，请自行测试~

基础设置

开启全站HTTPS

1、首先在宝塔或通过配置文件给你的网站配置好证书，并开启强制HTTPS
2、去网站后台，找到设置 -> 基本设置 -> 站点地址将其改为https开头的网址。

添加GZIP压缩

这个主要是减小带宽压力，以达到加快网站加速速度的目的。和上面的HTTPS一样，在config.inc.php内加入以下配置即可：

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

自定义CSS

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内

文章标题居中

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

首页标题文字居中

/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
  text-align:center !important;
}

左上角博客LOGO/博客名称的扫光效果

/* 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;}}

鼠标路过头像时放大并旋转

/* 鼠标经过头像旋转放大 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.img-circle: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;
    }
}

时光机内圆形头像

顾名思义，就是将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)

/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

网站右侧滚动条样式

此处的#949494;即为滚动条的颜色，你可以去 http://tools.jb51.net/static/colorpicker/ 这个链接去找到你喜欢的颜色然后替换
注意：替换的是#后面的6位数字，#不要动~

/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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: #949494;
    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
}

右侧列表导航栏图标颜色

这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。
同样#后面的六位数字代表颜色，可以改~

/* 右侧列表导航栏图标颜色 */
.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;}

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

.img-square {
    transition: all 0.3s;
}

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

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}

等距标签云

/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}

首页文章列表悬停上浮

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

粗斜体上色

/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}

首页文章添加圆角效果

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

修改h1，h2标题背景颜色

/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}

网站背景添加海浪背景

添加至后台主题设置-开发者设置-自定义CSS

/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }

添加至后台主题设置-开发者设置-自定义输出head 头部的HTML代码

<!-- 海浪背景 -->
<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>

自定义JavaScripts

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 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: "5000"
    })
}}
/* 复制成功提示代码结束 */

复制文章带有文章版权

/* 复制文章自动带版权开始 */ 
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
     notie({
  type: 'info',
  text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。', 
  autoHide: true
})
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
 
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！<br>'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！<br>'
            + '作者：古月乾一<br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：http://www.504dorm.cn/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：hellolin.cn\n'
            + '链接：' + window.location.href + '\n'
            + '来源：http://www.504dorm.cn/\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
/* 复制文章自动带版权结束 */

鼠标点击特效-爱心样式

//鼠标点击出现爱心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);

网站加载完成提示

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

左上角网站FPS显示

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

$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></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();
})();

左侧图标颜色和彩色标签云

/* 左侧图标颜色and彩色标签云 */
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;
});
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
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag => {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});

如果你博客开启了PJAX，需要在PJAX回调函数里面添加以下代码：

// 彩色标签云
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;
});
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
    }
}

动态网站标题

当你看其他网站的时候，网页标题会有可爱的变化~
另外代码里的两个链接可以按照自己的需求修改哦~

/* 动态网站标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp");
         document.title = '网页崩溃了！！！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp");
         document.title = '咦，又好啦(✿◡‿◡)' ;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

自定义body

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处

气泡背景

    id: '',                           //容器ID
    num: 100,                        // 个数
    start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
    radius_min: 1,                   // 初始半径最小值
    radius_max: 2,                   // 初始半径最大值
    radius_add_min: .3,               // 半径增加最小值
    radius_add_max: .5,               // 半径增加最大值
    opacity_min: 0.3,                 // 初始透明度最小值
    opacity_max: 0.5,                // 初始透明度最大值
    opacity_prev_min: .003,            // 透明度递减值最小值
    opacity_prev_max: .005,            // 透明度递减值最大值
    light_min: 40,                 // 颜色亮度最小值
    light_max: 70,                 // 颜色亮度最大值
    is_same_color: false,          //泡泡颜色是否相同
    background:"#f1f3f4"           //背景颜色

在开发者设置自定义输出body 尾部的HTML代码中添加下面代码，需要修改可参考上方参数

<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>

防止他人F12抓你代码

<!-- 防调试 -->
<script type="text/javascript">
    $(document).ready(function () {
      document.oncontextmenu = function () {
        return false;
      }
      //document.onselectstart = function () {
       // return false;
     // }
      //document.oncopy = 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;
        }
      };

    });
  </script>
<script>
    //debug调试时跳转页面
    var element = new Image();
    Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.504dorm.cn"}});
    console.log(element);
</script>

顶部导航栏添加网页动态滚动进度条|滚动指示器

将以下代码加到后台设置->自定义输出head 头部的HTML代码

<!--动态滚动进度条-->
<div class="scroll-line" style="z-index: 999;position: fixed;height: 3px;margin-top: 0px;background-color: #6B999B;width: 0%;"></div>
<script type="text/javascript">
    $(window).scroll(function() {
        var winTop = $(window).scrollTop(), //滚动条的位置
                docHeight = $(document).height(),   //文档高度
                winHeight = $(window).height(); //窗口高度
 
        var scrolled = (winTop / (docHeight - winHeight))*100;
 
        $('.scroll-line').css('width', (scrolled + '%'));
    });
</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) {
                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>

右侧添加人生倒计时(岁月不待人)

首先找到网站根目录/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()

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

最后一步,将以下代码放在后台-外观设置-开发者设置-自定义输出body尾部

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

信息统计增加全站字数、在线人数、响应耗时和访客总数

首先将以下代码加到/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;
    }
        /**
     * 全站字数
     */
    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;
    } 
/**
     * 在线人数
     */
    function online_users() {
        $filename='online.txt'; //数据文件
        $cookiename='Nanlon_OnLineCount'; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER['REQUEST_TIME']; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode('|',$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)<=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid='U'.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,'w')){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=>$ftime){ 
                    $fline=$fuid.'|'.$ftime."\n"; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo "$total_online"; 
    }

然后在/usr/themes/handsome/component/sidebar.php文件内，找到合适和位置添加以下代码：注：处就是添加代码的地方，找到你想加的位置添加代码即可

<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>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span class="badge pull-right"><?php echo online_users() ?></span><?php _me("在线人数") ?></li>
<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>

底部版权美化

左侧底部放在后台-开发者设置-博客底部左侧信息

<!--左侧底部-->
<div class="github-badge">
    <span class="badge-subject">Copyright</span>
    <a href="https://www.504dorm.cn" target="_blank">
        <span class="badge-value bg-blue">©2025 古月乾一</span>
    </a>
</div> |
<div class="github-badge">
    <span class="badge-subject">蜀ICP备</span>
    <a href="http://beian.miit.gov.cn/" target="_blank">
        <span class="badge-value bg-green">2024117218号</span></a>
</div>

右侧底部放在后台-开发者设置-博客底部右侧信息

<!--右侧底部-->
<div class="github-badge">
    <span class="badge-subject">本站由</span>
    <a href="https://app.rainyun.com" target="_blank">
        <span class="badge-value bg-blue">雨云服务器提供服务</span></a>
</div> |
<div class="github-badge">
    <span class="badge-subject">Theme by</span>
    <a href="https://www.ihewro.com/" target="_blank">
        <span class="badge-value bg-orange">Handsome</span></a>
</div>

css放在主题设置-自定义css内

/*底部页脚css*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.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: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-green {
  background-color: #3bca6e
}

最后修改：2025 年 03 月 23 日

如果觉得我的文章对你有用，请随意赞赏

说明

本站环境

基础设置

开启全站HTTPS

添加GZIP压缩

自定义CSS

文章标题居中

首页标题文字居中

左上角博客LOGO/博客名称的扫光效果

鼠标路过头像时放大并旋转

时光机内圆形头像

网站右侧滚动条样式

右侧列表导航栏图标颜色

等距标签云

首页文章列表悬停上浮

粗斜体上色

首页文章添加圆角效果

修改h1，h2标题背景颜色

网站背景添加海浪背景

自定义JavaScripts

复制成功提示

复制文章带有文章版权

鼠标点击特效-爱心样式

网站加载完成提示

左上角网站FPS显示

左侧图标颜色和彩色标签云

动态网站标题

自定义body

气泡背景

防止他人F12抓你代码

顶部导航栏添加网页动态滚动进度条|滚动指示器

修改文件

博主介绍文字动态化

右侧添加人生倒计时(岁月不待人)

信息统计增加全站字数、在线人数、响应耗时和访客总数

底部版权美化

Handsome主题美化记录