Handsome主题美化

# 本站环境

Typecho：1.2.1测试版
HandSome：9.0.2 Pro

[collapse status="false" title="Handsom主题文件目录结构"]

```
component/comments.php     评论区
component/footer.php       底部版权、音乐播放器之类
component/header.php       页面头，没啥要改的
component/headnav.php      顶部导航
component/say.php          时光机动态
component/sidebar.php      右侧栏目
component/third_party_comments.php    3.3.0新增，第三方评论
css/        博客CSS，一般不要改
fonts/      博客字体，一般不要改
img/        图像，一般不要改
js/         js文件，一般不要改
lang/       语言文件
libs/Content.php    文章内容
libs/...    一般不要改
usr/        另一个语言文件？
404.php     404界面
archive.php    整合
booklist.php   书单
cross.php      时光机
files.php      归档
functions.php  配置界面的东西
guestbook.php  留言板
index.php      首页
links.php      友链
page.php       文章页面整合
post.php       文章输出

color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色
```

[/collapse]

# 自定义CSS

[scode type="yellow" size=""]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处[/scode]

### 左上角博客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
/* 首页文章图片获取焦点放大 */
.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);
}
```

[/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="右侧列表导航栏图标颜色"]这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。

![](https://image.wiu.us/i/2023/05/12/c2p33v.jpg)

同样`#`后面的六位数字代表颜色，可以改

```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
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
    transform: scale(1.1);
}
}
```

[/collapse]

### 评论边框

[collapse status="false" title="评论边框"]

```css
/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}
```

[/collapse]

### 粗斜体上色

[collapse status="false" title="粗斜体上色"]

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

[/collapse]

### 开启全站变灰

[collapse status="false" title="开启全站变灰"]方法一

```css

html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}

```

方法二

```css
 <style type="text/css">html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} </style> 
```

方法三

```css
 <style>html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);         filter:progid：lolXImageTransform.Microsoft.BasicImage(grayscale=1);           _filter:none;     } </style> 
```

方法四

```css
 <style>html {-webkit-filter: grayscale(100%);}</style> 
```

[/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
/*手机端不显示热门文章和标签云*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}
```

[/collapse]

# 自定义JavaScripts

[scode type="yellow" size=""]该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处[/scode]

### 网页文字禁止复制

[collapse status="false" title="网页文字禁止复制"]

```javascript
/* 网页文字禁止复制 */ 
<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>
```

[/collapse]

### 复制成功提示

[collapse status="false" title="复制成功提示"]使用方法：

复制下面代码到 `handsome主题>设置外观>开发者设置>自定义 JavaScript`

```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.5k5b.com/<br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处！\n'
      + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n'
            + '作者：hellolin.cn\n'
            + '链接：' + window.location.href + '\n'
            + '来源：http://www.5k5b.com/\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
/* 打字动效 */
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);
```

[/collapse]

# 自定义body

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

### F12控制台修改

[collapse status="false" title="F12控制台修改"]

```html

<script type="text/javascript">
  console.clear();  //清空控制台
  console.log("\n %c TuJun's Blog  控制台--没什么可看的","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台，可写html代码
</script>
```

[/collapse]

### 自定义右键菜单美化

[collapse status="false" title="自定义右键菜单美化"]首先在`主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码`位置添加以下代码。

```html

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

再将下面的代码放到`自定义输出body 尾部的HTML代码`处

要把代码里的网址改成自己的

```html

  <style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;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:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;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:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="放你网站的对应网址"><i class="fa fa-home"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh"></i><span>重载网页</span></a></li>
        <li><a href="放你网站的对应网址"><i class="fa fa-meh-o"></i><span>和我当邻居</span></a></li>  
        <li><a href="放你网站的对应网址"><i class="fa fa-pencil-square-o"></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 src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
    </script>

```

[/collapse]

### 鼠标点击特效-富强、民主文字样式

[collapse status="false" title="鼠标点击特效-富强、民主文字样式"]把代码在`自定义输出body尾部的HTML代码`处粘贴即可

```html

<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>
```

[/collapse]

# 修改文件

[scode type="yellow" size=""]这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份~[/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的post.php`文件
找到`<?php if ($this->options->adContentPost != ""): ?>`这行代码，在其上方粘贴以下代码

```html

<div class="tt-fenge-end">
    <span>End</span>
</div>

```

并在改好保存后，在`自定义CSS`处添加以下代码

```html
/*文章正文下的结束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;}
```

[/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`的文件，并将以下代码放进该文件后，保存并退出

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

```html
/* 时间流逝 */
.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`的上面

```html
/*访问总量*/
     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.5k5b.com" target="_blank">
        <span class="badge-value bg-blue">©2022 5k5b.</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">2020030958号</span></a>
</div>
<div class="github-badge">
    <img src="https: //cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png" style="float:left;" />
    <span class="badge-subject">豫公网安备</span>
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41032602000132" target="_blank">
        <span class="badge-value bg-green">41032602000132号</span></a>
</div>
```

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

```html

<div class="github-badge">
    <span class="badge-subject">本站由</span>
    <a href="https://www.95vps.com/aff/20" 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
}
```

把下面代码放在主题目录`usr/themes/handsome/component/footer.php`内大概在`177`行，覆盖原来的即可

```html
<footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
        <span class="pull-right hidden-xs text-ellipsis">
            <?php $this->options->BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?>
        </span>
        <span class="text-ellipsis">
            <?php
            $this->options->BottomleftInfo(); ?>
        </span>
    </div>

</footer>
```

[/collapse]

### 页脚处添加网站运行时间

[collapse status="false" title="页脚处添加网站运行时间"]代码放到`后台-开发者设置-博客底部左侧信息`

```html
|  

<div class="github-badge">
<span class="badge-subject">运行时间</span>
<span class="badge-value bg-green"><span id="span_dt_dt"></span></span>
<script>
    /*建站时间*/
    function show_date_time() {
        window.setTimeout("show_date_time()", 1e3);
        var BirthDay = new Date("2021/09/11 22:30:00"),
        today = new Date,
        timeold = today.getTime() - BirthDay.getTime(),
        msPerDay = 864e5,
        e_daysold = timeold / msPerDay,
        daysold = Math.floor(e_daysold),
        e_hrsold = 24 * (e_daysold - daysold),
        hrsold = Math.floor(e_hrsold),
        e_minsold = 60 * (e_hrsold - hrsold),
        minsold = Math.floor(60 * (e_hrsold - hrsold)),
        seconds = Math.floor(60 * (e_minsold - minsold));
        span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
    }
    show_date_time();
</script>
```

[/collapse]

### 添加网站加载动画

[collapse status="false" title="添加网站加载动画"]首先找到`/usr/themes/handsome/component/`文件夹内的`header.php`，将以下代码加到最后`</style>`之后

```html

<style>
    #PageLoading {
        background-color: #fff;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
    }

#PageLoading-center {
        width: 100%;
        height: 100%;
        position: relative;
    }

#PageLoading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 200px;
        width: 200px;
        margin-top: -100px;
        margin-left: -100px;
    }

.object2 {
        -moz-border-radius: 50% 50% 50% 50%;
        -webkit-border-radius: 50% 50% 50% 50%;
        border-radius: 50% 50% 50% 50%;
        position: absolute;
        border-left: 5px solid #FFB6C1;
        border-right: 5px solid #b6def7;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        -webkit-animation: animate 2s infinite;
        animation: animate 2s infinite;

}

#object_one {
        left: 75px;
        top: 75px;
        width: 50px;
        height: 50px;
    }

#object_two {
        left: 65px;
        top: 65px;
        width: 70px;
        height: 70px;
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }

#object_three {
        left: 55px;
        top: 55px;
        width: 90px;
        height: 90px;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

#object_four {
        left: 45px;
        top: 45px;
        width: 110px;
        height: 110px;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

@-webkit-keyframes animate {
        50% {
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

100% {
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }

@keyframes animate {
        50% {
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

100% {
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    }
</style>

<body id="body" class="fix-padding" style="overflow:hidden">
        <div id="PageLoading" style="z-index:99999999;">
            <div id="PageLoading-center">
                <div id="PageLoading-center-absolute">
                    <div class="object2" id="object_four"></div>
                    <div class="object2" id="object_three"></div>
                    <div class="object2" id="object_two"></div>
                    <div class="object2" id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>
```

接着将以下代码放到`自定义JavaScripts`里面

```html
/* 加载动画 */
$(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });
```

[/collapse]

### 小版图模式下列表美化

[collapse status="false" title="小版图模式下列表美化"]首先我们找到网站根目录`/usr/themes/handsome/libs/Content.php`

将

```html
<div class="panel-small single-post box-shadow-wrap-normal">
    <div class="index-post-img-small post-feature index-img-small">
        <a href="{$parameterArray['linkUrl']}">
            <div class="item-thumb-small lazy" {$backgroundImageHtml}>
            </div>
        </a>
    </div>
```

替换为

```html
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
<div class="index-post-img-small post-feature index-img-small tt-left-box">
    <a href="{$parameterArray['linkUrl']}">
        <div class="item-thumb-small lazy tt-left-img" {$backgroundImageHtml}></div>
    </a>
</div>
<div class="tt-blur-img" {$backgroundImageHtml}></div>
```

并在`自定义CSS`里面添加以下代码

```css
/* 头图显示斜切样式 */
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#333;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}
```

[/collapse]

### 在博客顶部添加心知天气

[collapse status="false" title="在博客顶部添加心知天气"]首先去[心知天气](https://www.seniverse.com)官网注册账号并申请API

之后在`/usr/themes/handsome/component/headnav.php`文件中的动态日历中`<?php endif;?>`下方添加以下代码
注意将API信息改成自己的

```html

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

```

[/collapse]

### 404页面添加自动返回首页功能

[collapse status="false" title="404页面添加自动返回首页功能"]找到`/usr/themes/handsome`文件夹内的`404.php`文件

在`h1 class="text-shadow text-white">404`这一行下面加入以下代码：

```html
<br>
<small class="text-muted letterspacing">
<b id="sp">2</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>
```

再把下面的代码加入`404.php`文件内最底下的`</body>`前面

```html
<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=2;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>
```

[/collapse]

### 文章底部添加标签

[collapse status="false" title="文章底部添加标签"]在当前文章内容尾部添加该文章的标签，在主题目录下的`/usr/themes/handsome/post.php`文件中的适当地方加入以下代码。

```html

标签：<?php $this->tags('，', true, 'no tag'); ?>
```

[/collapse]

### 文章页面页脚插入one一言

[collapse status="false" title="文章页面页脚插入one一言"]代码放置`开发者设置-文章页脚广告位`

```html
<small class="text-muted letterspacing indexWords" style="font-family:monaco;text-align:center;">
<div >
<br>
<font style="font-size:20px;font-family:YouYuan;opacity:0.8;">◈</font>
<br>
<script type="text/javascript" src="https://api.xygeng.cn/one/get/" >
</script>
</div>
</small>
```

[/collapse]

### 时光机去除蒙版

[collapse status="false" title="时光机去除蒙版"]把以下代码添加到`自定义JavaScript代码`内

```javascript
/* 时光机去蒙版 */
try{
document.getElementsByClassName("wrapper-lg bg-white-opacity")[0].classList.remove("bg-white-opacity");
}catch(err){}
```

之后去/usr/themes/handsome/cross.php文件内搜索bg-white-opacity，将这一行代码注释掉，在下方添加

```html

<div class="wrapper-lg ">
```

[/collapse]

### 增加标签云独立页面

[collapse status="false" title="增加标签云独立页面"]新建一个名为：`tags.php`文件，填入以下代码后存放在模板目录下:

```html
<?php
    /**
    * 标签云
    *
    * @package custom
    */
?>
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('component/header.php'); ?>

<?php $this->need('component/aside.php'); ?>

<a class="off-screen-toggle hide"></a>
<main class="app-content-body <?php echo Content::returnPageAnimateClass($this); ?>">
    <div class="hbox hbox-auto-xs hbox-auto-sm">
        
        <div class="col center-part">
            
            <?php echo Content::exportPostPageHeader($this,$this->user->hasLogin(),true); ?>
            <div class="wrapper-md" id="post-panel">
                <?php Content::BreadcrumbNavigation($this, $this->options->rootUrl); ?>
                
                <div id="postpage" class="blog-post">
                    <article class="single-post panel">
                        
                        <?php echo Content::exportHeaderImg($this); ?>

<div class="wrapper-lg" id="post-content">
                            
                            <div class="tt-tags">
                                <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=280')->to($tags); ?>
                                
                                <?php if($tags->have()): ?>
                                <?php while ($tags->next()): ?>
                                <span class="tt-badge"
                                    style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)"><a
                                        href="<?php $tags->permalink();?>" target="_blank">
                                        <?php $tags->name(); ?>
                                    </a></span>
                                <?php endwhile; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
        
        <?php $this->need('component/sidebar.php'); ?>
        
    </div>
</main>

<style>
    .tt-tags {
        line-height: 2.3em;
    }

.tt-badge {
        padding: 5px 10px;
        margin-right: 5px;
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        border-radius: 10px;
    }

.tt-badge:hover {
        background-color: #666 !important;
    }
</style>

<?php $this->need('component/footer.php'); ?>

```

在后台创建独立页面，自定义模板选择刚刚新建的“标签云”模板，可以不用填入任何内容，直接发布便完成。

[/collapse]

### 添加百度收录量

[collapse status="false" title="添加百度收录量"]在sidebar.php文件中大约106行添加以下代码：

```html
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="bar-chart"></i></span> <span
                       class="badge
           pull-right" id="bd_ct_result"></span><?php _me("百度收录") ?></li>
```

在下面任意位置添加以下代码

```html
<script>
    function bd_ct_check(){
        $.getJSON("https://www.qiln.cn/api/bd_ct.php?domain=填写自己的站点",function(result){ 
            if (result.code == 1) {
                $('#bd_ct_result').text(result.data);
            }else{
                $('#bd_ct_result').text('0');
            }
        });
    }
    bd_ct_check();
</script>
```

[/collapse]

### 自定义后台路径

[collapse status="false" title="自定义后台路径"]打开根目录下的 config.inc.php文件，找到以下代码：

```html
/** 后台路径(相对路径) */
define('__TYPECHO_ADMIN_DIR__', '/admin/');
```

修改admin为自己想要的名称。

[scode type="blue" size=""]附：

也可以在网站根目录重新建立个 `admin`文件夹，然后里面放个 `index.html`，内容想写成什么样就写成什么样，甚至可以写个假的登录框，然后随便个密码就登录成功，然后显示个嘲讽页面。[/scode]

[/collapse]

### 去除首页顶部博客名称

[collapse status="false" title="去除首页顶部博客名称"]**修改 `/usr/themes/handsome/index.php`文件，位于公告位置下方（41-43行）**

**删除以下代码**

```html
<?php if ($index_show) :?>
                <h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>
                <?php endif; ?>
```

[/collapse]

### 自定义文章头图

[collapse status="false" title="自定义文章头图"]替换主题默认下的sj文件里的图片，路径为：

`usr` --> `themes` --> `handsome` --> `assets` --> `img` --> `sj` 替换之后，清除一下浏览器的缓存文件。

[/collapse]

### 给文章尾部加标签

[collapse status="false" title="给文章尾部加标签"]主题目录下的`post.php`文件中的适当地方加入以下代码。

```html

标签：<?php $this->tags('，', true, 'no tag'); ?>
```

[/collapse]

### 去除尾部版权信息路径

[collapse status="false" title="去除尾部版权信息路径"]

```html
usr/themes/handsome/component/footer/
```

[/collapse]

# 本站环境

Typecho：1.2.1测试版
HandSome：9.0.2 Pro

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9bcc0d42b9a8c253c4f151e5cb0cd2f880" aria-expanded="true"><div class="accordion-toggle"><span style="">Handsom主题文件目录结构</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9bcc0d42b9a8c253c4f151e5cb0cd2f880" class="collapse collapse-content"><p></p>

color： 选填，不填默认为success（绿色），可选值：
light：白色
info：蓝色
dark：深色
success：绿色
black：黑色
warning：黄色
primary：紫色
danger：红色
```

# 自定义CSS

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
</div>

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-54e167c4271ee84485afcf7a6f50128d41" aria-expanded="true"><div class="accordion-toggle"><span style="">左上角博客LOGO/博客名称的扫光效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-54e167c4271ee84485afcf7a6f50128d41" class="collapse collapse-content"><p></p>

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6129d793212313d791f84ca87f96b48593" aria-expanded="true"><div class="accordion-toggle"><span style="">鼠标路过头像时放大并旋转</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6129d793212313d791f84ca87f96b48593" class="collapse collapse-content"><p></p>

@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;
    }
}
```

### 首页文章图片获取焦点放大

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f8a1dbd19f2ba6a85cc5e2b51ee163fc20" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章图片获取焦点放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f8a1dbd19f2ba6a85cc5e2b51ee163fc20" class="collapse collapse-content"><p></p>

```css
/* 首页文章图片获取焦点放大 */
.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);
}
```

### 时光机内圆形头像

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8554da77a196b34d19da2256d15ad6ff10" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机内圆形头像</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8554da77a196b34d19da2256d15ad6ff10" class="collapse collapse-content"><p></p>

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

### 右侧列表导航栏图标颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d421221ba838e51c9633c4eccff71f2c78" aria-expanded="true"><div class="accordion-toggle"><span style="">右侧列表导航栏图标颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d421221ba838e51c9633c4eccff71f2c78" class="collapse collapse-content"><p></p>这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。

![](https://image.wiu.us/i/2023/05/12/c2p33v.jpg)

同样`#`后面的六位数字代表颜色，可以改

.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;
}
```

### 等距标签云

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b0a859824a72c0d0db7988f60da824aa24" aria-expanded="true"><div class="accordion-toggle"><span style="">等距标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-b0a859824a72c0d0db7988f60da824aa24" class="collapse collapse-content"><p></p>

```css
/*等距标签云*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
```

### 首页文章列表悬停上浮

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-87850c176be6777d9ff4578717f3d0fb95" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章列表悬停上浮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-87850c176be6777d9ff4578717f3d0fb95" class="collapse collapse-content"><p></p>

### 赞赏按钮跳动

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7ee464e13df25afb420fb1def49c35ed47" aria-expanded="true"><div class="accordion-toggle"><span style="">赞赏按钮跳动</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7ee464e13df25afb420fb1def49c35ed47" class="collapse collapse-content"><p></p>

```css
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
    transform: scale(1.1);
}
}
```

### 评论边框

```css
/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}
```

### 粗斜体上色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-80311a202fb72f0230f00a1c6deb323169" aria-expanded="true"><div class="accordion-toggle"><span style="">粗斜体上色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-80311a202fb72f0230f00a1c6deb323169" class="collapse collapse-content"><p></p>

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

### 开启全站变灰

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0ffc982b0eb819645b10bd7a22ff7a1041" aria-expanded="true"><div class="accordion-toggle"><span style="">开启全站变灰</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-0ffc982b0eb819645b10bd7a22ff7a1041" class="collapse collapse-content"><p></p>方法一

方法二

方法三

方法四

```css
 <style>html {-webkit-filter: grayscale(100%);}</style> 
```

### 首页文章添加圆角效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-92499f0638f2f28d7635d54b69bcf93655" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章添加圆角效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-92499f0638f2f28d7635d54b69bcf93655" class="collapse collapse-content"><p></p>

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

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

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

### 修改h1，h2标题背景颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e3b09e75297c1853c890b86b73f66a6d36" aria-expanded="true"><div class="accordion-toggle"><span style="">修改h1，h2标题背景颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e3b09e75297c1853c890b86b73f66a6d36" class="collapse collapse-content"><p></p>

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

### 手机端不显示热门文章和标签云

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-98aca86acf04bc2f361623920a7742c553" aria-expanded="true"><div class="accordion-toggle"><span style="">手机端不显示热门文章和标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-98aca86acf04bc2f361623920a7742c553" class="collapse collapse-content"><p></p>

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

# 自定义JavaScripts

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义 JavaScript处
</div>

### 网页文字禁止复制

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fece42fdbd1c21ef9b5e2a824df359c962" aria-expanded="true"><div class="accordion-toggle"><span style="">网页文字禁止复制</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-fece42fdbd1c21ef9b5e2a824df359c962" class="collapse collapse-content"><p></p>

### 复制成功提示

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-58199e6a3b9f69854bf550a99e78781136" aria-expanded="true"><div class="accordion-toggle"><span style="">复制成功提示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-58199e6a3b9f69854bf550a99e78781136" class="collapse collapse-content"><p></p>使用方法：

复制下面代码到 `handsome主题>设置外观>开发者设置>自定义 JavaScript`

### 复制文章带有文章版权

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-97ad47e953e2a9b1b4f66785c1911e7685" aria-expanded="true"><div class="accordion-toggle"><span style="">复制文章带有文章版权</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-97ad47e953e2a9b1b4f66785c1911e7685" class="collapse collapse-content"><p></p>

### 鼠标点击特效-爱心样式

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d06eb6d07f1454fc208599622dd9045f52" aria-expanded="true"><div class="accordion-toggle"><span style="">鼠标点击特效-爱心样式</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d06eb6d07f1454fc208599622dd9045f52" class="collapse collapse-content"><p></p>

### 网站加载完成提示

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-acccfa5fe694aab5cd3e97f9d44f79c747" aria-expanded="true"><div class="accordion-toggle"><span style="">网站加载完成提示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-acccfa5fe694aab5cd3e97f9d44f79c747" class="collapse collapse-content"><p></p>

### 左上角网站FPS显示

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-83035b238874c3dbaa0394b52a16856073" aria-expanded="true"><div class="accordion-toggle"><span style="">左上角网站FPS显示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-83035b238874c3dbaa0394b52a16856073" class="collapse collapse-content"><p></p>

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

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-565680b86dc2f4d28369cefeab6194f136" aria-expanded="true"><div class="accordion-toggle"><span style="">左侧图标颜色和彩色标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-565680b86dc2f4d28369cefeab6194f136" class="collapse collapse-content"><p></p>

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

### 打字动画效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e5042f747fba83061dd0960fdf4db54854" aria-expanded="true"><div class="accordion-toggle"><span style="">打字动画效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e5042f747fba83061dd0960fdf4db54854" class="collapse collapse-content"><p></p>

# 自定义body

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

### F12控制台修改

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a087709529b969ae78c0454c99a1a83c67" aria-expanded="true"><div class="accordion-toggle"><span style="">F12控制台修改</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a087709529b969ae78c0454c99a1a83c67" class="collapse collapse-content"><p></p>

### 自定义右键菜单美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-05dae99e5b546a9b2b815f2be658b17d75" aria-expanded="true"><div class="accordion-toggle"><span style="">自定义右键菜单美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-05dae99e5b546a9b2b815f2be658b17d75" class="collapse collapse-content"><p></p>首先在`主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码`位置添加以下代码。

```html

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

再将下面的代码放到`自定义输出body 尾部的HTML代码`处

要把代码里的网址改成自己的

### 鼠标点击特效-富强、民主文字样式

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6cb31ae6e19b16c6e525f9ef2bd60b1323" aria-expanded="true"><div class="accordion-toggle"><span style="">鼠标点击特效-富强、民主文字样式</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6cb31ae6e19b16c6e525f9ef2bd60b1323" class="collapse collapse-content"><p></p>把代码在`自定义输出body尾部的HTML代码`处粘贴即可

# 修改文件

这部分基本上全是通过修改文件来达到美化的目的，故一定要提前做好备份~
</div>

### 博主介绍文字动态化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e66ff834e4bff84f321fcec917c8715577" aria-expanded="true"><div class="accordion-toggle"><span style="">博主介绍文字动态化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e66ff834e4bff84f321fcec917c8715577" class="collapse collapse-content"><p></p>将以下代码放到`主题后台-外观-设置外观-初级设置-博主的介绍`

### 给正文添加结束标识

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-45a3ce3d8740621cbe2baa94f9804b1468" aria-expanded="true"><div class="accordion-toggle"><span style="">给正文添加结束标识</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-45a3ce3d8740621cbe2baa94f9804b1468" class="collapse collapse-content"><p></p>首先打开 网站根目录`/usr/themes/handsome的post.php`文件
找到`<?php if ($this->options->adContentPost != ""): ?>`这行代码，在其上方粘贴以下代码

```html

<div class="tt-fenge-end">
    <span>End</span>
</div>

```

并在改好保存后，在`自定义CSS`处添加以下代码

### 右侧添加人生倒计时

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f1690d054f171600cd1989fae1e287a662" aria-expanded="true"><div class="accordion-toggle"><span style="">右侧添加人生倒计时</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f1690d054f171600cd1989fae1e287a662" class="collapse collapse-content"><p></p>首先找到网站根目录`/usr/themes/handsome/component`
打开`sidebar.php`文件，找到``这一行内容。
在该内容向上两行找到`<?php endif; ?>`，在该行紧接着下面添加如下代码：

改好后保存退出，进入网站根目录`/usr/themes/handsome/assets/js/`的文件夹
创建一个名为`timeinfo.js`的文件，并将以下代码放进该文件后，保存并退出

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

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

```html
  
<script src="https://你的域名/usr/themes/handsome/assets/js/timeinfo.js"></script>
```

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

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f6e81d9d6ac6509a33ff0e623619b73110" aria-expanded="true"><div class="accordion-toggle"><span style="">信息统计增加全站字数、在线人数、响应耗时和访客总数</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f6e81d9d6ac6509a33ff0e623619b73110" class="collapse collapse-content"><p></p>首先将以下代码加到`/usr/themes/handsome/libs/Content.php`中，放在`class Content`的上面

### 底部版权美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-27bdf44ee5cac28127364e66741bd2a284" aria-expanded="true"><div class="accordion-toggle"><span style="">底部版权美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-27bdf44ee5cac28127364e66741bd2a284" class="collapse collapse-content"><p></p>左侧底部放在 `后台-开发者设置-博客底部左侧信息`

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

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

.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
}
```

把下面代码放在主题目录`usr/themes/handsome/component/footer.php`内大概在`177`行，覆盖原来的即可

</footer>
```

### 页脚处添加网站运行时间

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-274f3df63abbfee3bd28cda2f7d28c8737" aria-expanded="true"><div class="accordion-toggle"><span style="">页脚处添加网站运行时间</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-274f3df63abbfee3bd28cda2f7d28c8737" class="collapse collapse-content"><p></p>代码放到`后台-开发者设置-博客底部左侧信息`

### 添加网站加载动画

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-62ed8d457090fa45a573a12dde16cf4a31" aria-expanded="true"><div class="accordion-toggle"><span style="">添加网站加载动画</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-62ed8d457090fa45a573a12dde16cf4a31" class="collapse collapse-content"><p></p>首先找到`/usr/themes/handsome/component/`文件夹内的`header.php`，将以下代码加到最后`</style>`之后