Typecho调试记录部分一

博主： Boiling
发布时间：2023 年 12 月 25 日
22020 次浏览
暂无评论
44582字数
分类：收藏

Handsome主题文件目录结构

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：红色

基础设置

自定义后台路径

1、将 Typecho程序根目录中的后台文件夹 "admin"改名，名字即为你想自定义的地址名，例如：将 "admin"改为 "xxx"
2、修改根目录文件 "config.inc.php"，打开该文件后找到

/* 后台路径(相对路径) /
define(' **TYPECHO_ADMIN_DIR** ', '/admin/');

将代码中 "admin"改为你自定义的地址，例如：xxx
这样一来，我们的 Typecho程序网站的后台就改成：域名 /xxx了

文章中嵌入网页

比如在独立页面上放置一个单独的网页页面
使用方法
在文章中添加代码即可，将链接地址修改为你需要展示的网站地址

<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>

时光机栏目增添额外内容

使用方法
将以下代码按照需求自行修改后放到主题 后台-时光机配置-RSS动态内容配置内即可

{"id":"iciba","name":"每日一句","url":"https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster"},
{"id":"oschina","name":"开源中国","url":"https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news"},
{"id":"bing","name":"Bing 壁纸","url":"https://proxy.attainment.cn/https://rss.attainment.cn/bing"},
{"id":"sspai","name":"少数派","url":"https://proxy.attainment.cn/https://sspai.com/feed"},
{"id":"DailyArt","name":"每日艺术","url":"https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh"}

自定义音乐播放器音量

后台-设置外观-开发者设置-自定义JS 添加以下代码

setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);

其中 volume=0.3为播放器音量控制，默认为 0.3支持修改范围为 0.0 - 1可自行设置

自定义CSS

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

文章标题居中

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

首页标题文字居中

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

文章日期居中

/*文章日期居中*/
.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
text-align: center;
}

左上角博客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;}}

左上角博主信息羽毛背景

羽毛背景

background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）

/* 羽毛_css */
.dropdown.wrapper {
background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}

时光机内圆形头像

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

/* 时光机圆形头像 */
.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
}

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

/* 鼠标经过头像旋转放大 */
.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;
    }
}

赞赏按钮跳动

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

标题悬停颜色

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

全站页面纯白

全站页面使用白色时，需要在 后台设置-外观设置-主题色调自定义搭配修改为 white-white-white

全站页面纯白

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

局部阴影

/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
background: white;
box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
/*文章圆角-阴影*/
.panel {
box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
border-radius: 6px!important;
}

文章版式阴影化

可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。
所有 rgba后面的，如 26, 169, 255都可以进行修改，它代表的是散发出来的颜色类型。
你同样可以去 http://tools.jb51.net/static/colorpicker/ 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\~

/* 首页文章版式阴影颜色 */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}

获取焦点放大

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

首页文章列表悬停上浮

/*首页文章列表悬停上浮*/
.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);
}

等距标签云

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

右侧列表导航栏图标颜色

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

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

赞赏按钮跳动

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

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

to {
    transform: scale(1.1);
}
}

评论边框

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

粗斜体上色

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

开启全站变灰（黑白模式）

开启全站变灰

方式一：

<!--开启黑白模式-->
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);}
<!--黑白模式结束-->

方式二：

<!--开启黑白模式--> <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> <!--黑白模式结束-->

方式三：

<!--开启黑白模式--> <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> <!--黑白模式结束-->

方式四：

<!--开启黑白模式--> <style>html {-webkit-filter: grayscale(100%);}</style> <!--黑白模式结束-->

首页文章添加圆角效果

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

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

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

自定义字体

选择字体，然后去字体转换把 otf、ttf转换成 woff格式。
将转换成功后的字体上传至网站目录中,默认字体目录是 /usr/themes/handsome/assets/fonts文件夹里。

自定义字体

/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}

修改h1，h2标题背景颜色

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

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

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

网站背景添加海浪背景

添加至后台 主题设置-开发者设置-自定义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>

自定义JavaScript

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义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回调函数里面添加以下代码：

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

网页文字禁止复制

<script language="Javascript">
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
</script>

复制成功提示

/* 复制成功提示代码开始 */ 
    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.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);
    }
}
/* 复制文章自动带版权结束 */

鼠标点击特效-爱心样式

//鼠标点击出现爱心特效
(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();
})();

动态网站标题

/* 动态网站标题 */
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);
     }
 });

打字动画效果

/* 打字动效 */
(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);

添加复制弹窗

首先添加以下代码至 自定义输出body尾部的HTML代码

<!-- 复制样式CSS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

然后将以下代码加到 自定义JavaScripts，文字部分可以自行更改~

/* 复制效果 */
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

自定义body

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

自定义右键菜单美化

注意：一定首先在 主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码位置添加以下代码。如果不添加将不会显示图标

<!-- 图标添加 -->
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

加完之后再将下面的代码放到 自定义输出body 尾部的HTML代码处
另外，一定要把代码里的网址改成自己的！！\~

<!-- 自定义右键菜单美化 -->
  <style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#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>
<!-- 自定义右键菜单美化 -->

清空控制台

首先添加以下代码至 自定义输出body尾部的HTML代码

<!--输出控制台-->
<script type="text/javascript">
  console.clear();  //清空控制台
  console.log("\n %c 沸腾笔记  控制台--没什么可看的","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台，可写html代码
</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.boiling.top"}});
    console.log(element);
</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>

首页新年倒计时

将如下代码加到 开发者设置-首页列表最前方广告位即可

<!-- 首页倒计时 -->
<style>
    .gn_box {
        border: none;
        border-radius: 15px;
    }

    .gn_box {
        padding: 10px 14px;
        margin: 10px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #fff;
    }

    #t_d {
        color: #982585;
        font-size: 18px;
    }

    #t_h {
        color: #8f79c1;
        font-size: 18px;
    }

    #t_m {
        color: #65b4b5;
        font-size: 18px;
    }

    #t_s {
        color: #83caa3;
        font-size: 18px;
    }
</style>
<div class="gn_box">
    <h1>
        <font color=#E80017>2</font>
        <font color=#D1002E>0</font>
        <font color=#BA0045>2</font>
        <font color=#A3005C>3</font>
        <font color=#8C0073>年</font>
        <font color=#75008A>-</font>
        <font color=#5E00A1>新</font>
        <font color=#4700B8>年</font>
        <font color=#3000CF>倒</font>
        <font color=#1900E6>计</font>
        <font color=#0200FD>时</font>
    </h1>
    <center>
        <div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span
                id="t_s"> 秒</span></div>
    </center>
    <script type="text/javascript">
        function getRTime() {
            var EndTime = new Date('2023/01/01 00:00:00');   // 这里是明年第一天时间
            var NowTime = new Date('2022/8/25 23:02:01');    // 这里是当前时间 自己修改
            var t = EndTime.getTime() - NowTime.getTime();
            var d = Math.floor(t / 1000 / 60 / 60 / 24);
            var h = Math.floor(t / 1000 / 60 / 60 % 24);
            var m = Math.floor(t / 1000 / 60 % 60);
            var s = Math.floor(t / 1000 % 60);
            var day = document.getElementById("t_d");
            if (day != null) {
                day.innerHTML = d + " 天";
            }
            var hour = document.getElementById("t_h");
            if (hour != null) {
                hour.innerHTML = h + " 时";
            }
            var min = document.getElementById("t_m");
            if (min != null) {
                min.innerHTML = m + " 分";
            }
            var sec = document.getElementById("t_s");
            if (sec != null) {
                sec.innerHTML = s + " 秒";
            }
        }
        setInterval(getRTime, 1000);   
    </script>
</div>

给正文添加结束标识

首先打开网站根目录 /usr/themes/handsome的post.php文件
找到 <?php if ($this->options->adContentPost != ""): ?>这行代码，在其上方的空白位置添加以下代码

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

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

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

正文下方添加版权声明

这个代码同样也是在 <?php if ($this->options->adContentPost != ""): ?>的上方
添加位置和上面正文结束功能的添加位置相同，找到后添加以下代码(你也可以添加到其他你认为合适的地方)

<!--知识共享许可协议-->
<div
    style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
    <div class="tt-license">
        <p><span class="tt-license-icon"><i data-feather="award"></i></span>本文标题：
            <?php $this->title() ?>
        </p>
        <p><span class="tt-license-icon"><i data-feather="link"></i></span>本文链接：
            <?php $this->permalink() ?>
        </p>
        <p><span class="tt-license-icon"><i data-feather="shield"></i></span>除非另有说明，本作品采用 <a rel="license"
                href="http://creativecommons.org/licenses/by-nc-sa/4.0/"> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>。</p>
        <p><span class="tt-license-icon"><i data-feather="alert-circle"></i></span>声明：转载请注明文章来源。</p>
    </div>
</div>
<!-- / 知识共享许可协议-->

添加好后，在 自定义CSS中添加以下代码：

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

右侧添加人生倒计时（岁月不待人）

首先找到网站根目录 /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/component/say.php文件，将以下代码注释掉

#talk .streamline>.comment-list > .comment-body >.time-machine > .panel-body p:first-letter {
    font-size: 140%;
    /* float: left; */
    vertical-align: middle;
}

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

全站字数、在线人数、响应耗时和访客总数

首先将以下代码加到 /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.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>

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

<!--右侧底部-->
<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*/
.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行，覆盖原来的即可

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

页脚处添加网站运行时间

网站运行时间

注意这个功能我是在上一个页脚美化的基础上添加的，如果没有添加页脚美化功能，该运行时间的排版会出现问题。当然你也可以改成你喜欢的样子\~
代码放到 后台-开发者设置-博客底部左侧信息

|  
<!-- 建站时间 -->
<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>

添加网站加载效果

网站加载效果

首先找到 /usr/themes/handsome/component/文件夹内的 header.php，将以下代码加到最后 </style>之后

<!--加载动画-->
<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 skt-loading">

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

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

在博客顶部添加心知天气

心知天气

首先去心知天气官网注册账号并申请API
之后在 /usr/themes/handsome/component/headnav.php文件中的动态日历中 <?php endif;?>下方添加以下代码
注意将API信息改成自己的

<!-- 心知天气-->
    <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>
    <!-- 心知结束-->

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

找到 /usr/themes/handsome文件夹内的 404.php文件并打开。
在 h1 class="text-shadow text-white">404这一行下面加入以下代码：

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

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

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

在文章顶部添加百度是否收录

百度是否收录

在 handsome/functions.php最底部添加代码

/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1){
    echo "百度已收录";
}
else{
    echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
    $url = 'http://www.baidu.com/s?wd=' . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
        return 1;
    } else {
        return -1;
    }
}

然后在 handsome/post.php在63行左右添加代码

<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>

插件推荐

鼠标美化插件HoerMouse

鼠标美化

插件下载：
食用方法：

下载插件，解压到 usr/plugins/目录中
修改文件夹名为HoerMouse
进入后台设置激活插件

UserAgent插件

插件下载：
食用方法：

操作前请做好相应备份工作，此插件只针对于 Handsome主题

下载插件，解压到 usr/plugins目录中
修改文件夹名为UserAgent
进入后台设置激活插件
修改 Handsome主题 component目录下 comments.php，代码大概在 99~100行左右。

<span class="comment-author vcard">
              <b class="fn"><?php echo $author; ?></b>
</span>

添加代码<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>，修改后代码如下：

<span class="comment-author vcard">
              <b class="fn"><?php echo $author; ?></b><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>



</span>

获取真实IP

Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在Typecho博客网站的根目录的 config.inc.php插入下面的代码：

//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

邮箱评论通知插件CommentToMail

邮箱评论通知

插件下载：
食用方法：

下载插件，解压到 usr/plugins/目录中
修改文件夹名为CommentToMail
进入后台设置激活插件

最后修改：2024 年 01 月 06 日

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

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Typecho调试记录部分一

Boiling • 2023 年 12 月 25 日

<p><img src="https://www.boiling.top/usr/uploads/2024/01/3025645119.png" alt="" title="" style=""></p><h2>Handsome主题文件目录结构</h2><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-fda4ffc62c99ddbdf9c9f0ee9581aff723" aria-expanded="true"><div class="accordion-toggle"><span style="">Handsome主题文件目录结构</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-fda4ffc62c99ddbdf9c9f0ee9581aff723" class="collapse collapse-content"><p></p></p><pre><code class="lang-shell">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：红色</code></pre><p><p></p></div></div></div></p><h2>基础设置</h2><h3>自定义后台路径</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ea4bff1870a990c4083c155f208ff4ab80" 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-ea4bff1870a990c4083c155f208ff4ab80" class="collapse collapse-content"><p></p></p><p>1、将 <code>Typecho</code>程序根目录中的后台文件夹 <code>&quot;admin&quot;</code>改名，名字即为你想自定义的地址名，例如：将 <code>&quot;admin&quot;</code>改为 <code>&quot;xxx&quot;</code><br>2、修改根目录文件 <code>&quot;config.inc.php&quot;</code>，打开该文件后找到</p><pre><code class="lang-shell">/* 后台路径(相对路径) /
define(&#039; **TYPECHO_ADMIN_DIR** &#039;, &#039;/admin/&#039;);</code></pre><p>将代码中 <code>&quot;admin&quot;</code>改为你自定义的地址，例如：<code>xxx</code><br>这样一来，我们的 <code>Typecho</code>程序网站的后台就改成：域名 <code>/xxx</code>了</p><p><p></p></div></div></div></p><h3>文章中嵌入网页</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2eed78cc2ba27a528fc8dfd457939ab520" 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-2eed78cc2ba27a528fc8dfd457939ab520" class="collapse collapse-content"><p></p></p><p>比如在独立页面上放置一个单独的网页页面<br>使用方法<br>在文章中添加代码即可，将链接地址修改为你需要展示的网站地址</p><pre><code class="lang-shell">&lt;iframe align=&quot;center&quot; width=&quot;100%&quot; height=&quot;740px&quot; src=&quot;链接地址&quot;  frameborder=&quot;no&quot; border=&quot;0&quot;  scrolling=&quot;no&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; &gt;&lt;/iframe&gt;</code></pre><p><p></p></div></div></div></p><h3>时光机栏目增添额外内容</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7f1dbc5d71737ef344b969fcd366dc8335" 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-7f1dbc5d71737ef344b969fcd366dc8335" class="collapse collapse-content"><p></p></p><p>使用方法<br>将以下代码按照需求自行修改后放到主题 <code>后台-时光机配置-RSS动态</code>内容配置内即可</p><pre><code class="lang-shell">{&quot;id&quot;:&quot;iciba&quot;,&quot;name&quot;:&quot;每日一句&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster&quot;},
{&quot;id&quot;:&quot;oschina&quot;,&quot;name&quot;:&quot;开源中国&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news&quot;},
{&quot;id&quot;:&quot;bing&quot;,&quot;name&quot;:&quot;Bing 壁纸&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/bing&quot;},
{&quot;id&quot;:&quot;sspai&quot;,&quot;name&quot;:&quot;少数派&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://sspai.com/feed&quot;},
{&quot;id&quot;:&quot;DailyArt&quot;,&quot;name&quot;:&quot;每日艺术&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh&quot;}</code></pre><p><p></p></div></div></div></p><h3>自定义音乐播放器音量</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f66eb34887362d6060e95145acd0fafb64" 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-f66eb34887362d6060e95145acd0fafb64" class="collapse collapse-content"><p></p></p><p><code>后台-设置外观-开发者设置-自定义JS</code> 添加以下代码</p><pre><code class="lang-js">setTimeout(function (){document.querySelector(&quot;.skPlayer-source&quot;).volume=0.3;}, 3000);</code></pre><p>其中 <code>volume=0.3</code>为播放器音量控制，默认为 <code>0.3</code>支持修改范围为 <code>0.0 - 1</code>可自行设置</p><p><p></p></div></div></div></p><h2>自定义CSS</h2><p>该修改项位于Handsome主题后台-<code>外观-设置外观-开发者设置-自定义CSS</code>处：</p><h3>文章标题居中</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-94f373458ce8e8fa17e680c9afda518928" 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-94f373458ce8e8fa17e680c9afda518928" class="collapse collapse-content"><p></p></p><pre><code>/*文章标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}</code></pre><p><p></p></div></div></div></p><h3>首页标题文字居中</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2374bad12a5e936931fcdfe86c9d097435" 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-2374bad12a5e936931fcdfe86c9d097435" class="collapse collapse-content"><p></p></p><pre><code>/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
text-align:center !important;
}</code></pre><p><p></p></div></div></div></p><h3>文章日期居中</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0cba05f3a61d3e35cfdfbe7200d84cc815" 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-0cba05f3a61d3e35cfdfbe7200d84cc815" class="collapse collapse-content"><p></p></p><pre><code>/*文章日期居中*/
.text-muted.post-item-foot-icon.text-ellipsis.list-inline {
text-align: center;
}</code></pre><p><p></p></div></div></div></p><h3>左上角博客LOGO/博客名称的扫光效果</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-67f7d0913e8046baefa3d482b7e25f2366" 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-67f7d0913e8046baefa3d482b7e25f2366" class="collapse collapse-content"><p></p></p><pre><code>/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:&quot;&quot;; 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;}}</code></pre><p><p></p></div></div></div></p><h3>左上角博主信息羽毛背景</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c6d8878708ae8e07143efacd17e1d5348" 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-c6d8878708ae8e07143efacd17e1d5348" class="collapse collapse-content"><p></p><br><code>background:url</code>后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）</p><pre><code>/* 羽毛_css */
.dropdown.wrapper {
background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}</code></pre><p><img src="https://www.boiling.top/usr/uploads/2024/01/2804376467.webp" alt="yumao.webp" title="yumao.webp" style=""><br><p></p></div></div></div></p><h3>时光机内圆形头像</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8838d375a8a1d5e8e59a7b367647c66691" 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-8838d375a8a1d5e8e59a7b367647c66691" class="collapse collapse-content"><p></p><br>顾名思义，就是将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)</p><pre><code>/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}</code></pre><p><p></p></div></div></div></p><h3>网站右侧滚动条样式</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b87744585fa77e8d857e7586562542a517" 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-b87744585fa77e8d857e7586562542a517" class="collapse collapse-content"><p></p><br>此处的 <code>#949494;</code>即为滚动条的颜色，你可以去 <span class="external-link"><a class="no-external-link" href="https://www.5k5b.com/go/aHR0cDovL3Rvb2xzLmpiNTEubmV0L3N0YXRpYy9jb2xvcnBpY2tlci8" target="_blank"><i data-feather="external-link"></i>http://tools.jb51.net/static/colorpicker/</a></span> 这个链接去找到你喜欢的颜色然后替换<br>注意：替换的是 <code>#</code>后面的 <code>6</code>位数字，<code>#</code>不要动\~</p><pre><code>/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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
}</code></pre><p><p></p></div></div></div></p><h3>鼠标路过头像时放大并旋转</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ea0f31560017a76be77d337388e570034" 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-ea0f31560017a76be77d337388e570034" class="collapse collapse-content"><p></p></p><pre><code>/* 鼠标经过头像旋转放大 */
.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;
    }
}</code></pre><p><p></p></div></div></div></p><h3>赞赏按钮跳动</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-72bcf9e81284cce0ee3fe81264e397e959" 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-72bcf9e81284cce0ee3fe81264e397e959" class="collapse collapse-content"><p></p></p><pre><code>/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from { transform: scale(1); }
to { transform: scale(1.1); }
}</code></pre><p><p></p></div></div></div></p><h3>标题悬停颜色</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e7859af2ace1b254381e606f266f5fc917" 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-e7859af2ace1b254381e606f266f5fc917" class="collapse collapse-content"><p></p></p><pre><code>.index-post-title a:hover {
color: #2ebaae;
}</code></pre><p><p></p></div></div></div></p><h3>全站页面纯白</h3><p><div class="tip inlineBlock warning">

全站页面使用白色时，需要在 <code>后台设置-外观设置-主题色调自定义搭配</code>修改为 <code>white-white-white</code>
</div><br><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0fcc874a2754fd4425168d47e4cce12d34" 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-0fcc874a2754fd4425168d47e4cce12d34" class="collapse collapse-content"><p></p></p><pre><code>/*白色整体背景*/
div#alllayout {
background-color: #fff;
}
.night div#alllayout {
background-color: #1d1f20;
}
/*左侧-顶部-底部*/
.bg-white{
background-color: #fff;
}
/*页面底部*/
.bg-light {
background-color: #fff;
}
/*首页标题背景变白*/
.bg-light .lter, .bg-light.lter {
background-color: #fff;
}
/* 右侧背景 */
.bg-white-only{
background-color:#fff;
}
/*文章页面变白*/
#post-panel {
background: white;
}
/*登录后前台头像下变白*/
li.wrapper.b-b.m-b-sm.bg-light.m-t-n-xs {
background-color: #fff;
}</code></pre><p><p></p></div></div></div></p><h3>局部阴影</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e2ec21fa93ba2b9e9e0b5db0901f3ed598" 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-e2ec21fa93ba2b9e9e0b5db0901f3ed598" class="collapse collapse-content"><p></p></p><pre><code>/*博客信息-搜索框-幻灯片 阴影*/
.box-shadow-wrap-normal {
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.16);
}
/*盒子四周阴影*/
.app.container {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.16)!important;
}
/*文章圆角-阴影*/
.panel {
box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
border-radius: 6px!important;
}
/*文章标题阴影*/
.bg-white-pure {
background: white;
box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
}
/*文章圆角-阴影*/
.panel {
box-shadow: 0 0px 2px 2px rgba(0, 0, 0, .13);
border-radius: 6px!important;
}</code></pre><p><p></p></div></div></div></p><h3>文章版式阴影化</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9f2ba4516cb0e178440f1c8860f081a679" 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-9f2ba4516cb0e178440f1c8860f081a679" class="collapse collapse-content"><p></p><br>可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。<br>所有 <code>rgba</code>后面的，如 <code>26, 169, 255</code>都可以进行修改，它代表的是散发出来的颜色类型。<br>你同样可以去 <span class="external-link"><a class="no-external-link" href="https://www.5k5b.com/go/aHR0cDovL3Rvb2xzLmpiNTEubmV0L3N0YXRpYy9jb2xvcnBpY2tlci8" target="_blank"><i data-feather="external-link"></i>http://tools.jb51.net/static/colorpicker/</a></span> 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\~</p><pre><code>/* 首页文章版式阴影颜色 */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}</code></pre><p><p></p></div></div></div></p><h3>获取焦点放大</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f09f1d9cbb7ca30ee2b68ab59e4e763298" 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-f09f1d9cbb7ca30ee2b68ab59e4e763298" class="collapse collapse-content"><p></p></p><pre><code>/*首页文章图片获取焦点放大*/
.item-thumb {
cursor: pointer;
transition: all .6s;
}
.item-thumb:hover {
transform: scale(1.05);
}</code></pre><p><p></p></div></div></div></p><h3>首页文章列表悬停上浮</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-bd11325241c1a076aa7273f712fec11816" 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-bd11325241c1a076aa7273f712fec11816" class="collapse collapse-content"><p></p></p><pre><code>/*首页文章列表悬停上浮*/
.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);
}</code></pre><p><p></p></div></div></div></p><h3>等距标签云</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c2c995775dcf9edde0cd9a2970b5175244" 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-c2c995775dcf9edde0cd9a2970b5175244" class="collapse collapse-content"><p></p></p><pre><code>/*词云等距美化*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}</code></pre><p><p></p></div></div></div></p><h3>右侧列表导航栏图标颜色</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7b85f61cf482efdaad61ddf0339d95da57" 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-7b85f61cf482efdaad61ddf0339d95da57" class="collapse collapse-content"><p></p><br>这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。<br>同样 <code>#</code>后面的六位数字代表颜色，可以改~</p><pre><code>/* 右侧列表导航栏图标颜色 */
.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;
}</code></pre><p><p></p></div></div></div></p><h3>赞赏按钮跳动</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c8b6b08c3211ec7cfb148f35eb17d35b38" 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-c8b6b08c3211ec7cfb148f35eb17d35b38" class="collapse collapse-content"><p></p></p><pre><code>/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
    transform: scale(1.1);
}
}</code></pre><p><p></p></div></div></div></p><h3>评论边框</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-cd906b19db5bc92c57aeab0fbe2aff2063" 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-cd906b19db5bc92c57aeab0fbe2aff2063" class="collapse collapse-content"><p></p></p><pre><code>/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}</code></pre><p><p></p></div></div></div></p><h3>粗斜体上色</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7047df023056b4d6de6ea8485385b85334" 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-7047df023056b4d6de6ea8485385b85334" class="collapse collapse-content"><p></p></p><pre><code>/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}</code></pre><p><p></p></div></div></div></p><h3>开启全站变灰（黑白模式）</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6cc31aecc7e9bd7e25e0d6c3cfd7d59139" 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-6cc31aecc7e9bd7e25e0d6c3cfd7d59139" class="collapse collapse-content"><p></p><br>方式一：</p><pre><code>&lt;!--开启黑白模式--&gt;
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(&quot;data:image/svg+xml;utf8,#grayscale&quot;); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
&lt;!--黑白模式结束--&gt;</code></pre><p>方式二：</p><pre><code>&lt;!--开启黑白模式--&gt; &lt;style type=&quot;text/css&quot;&gt;html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(&quot;data:image/svg+xml;utf8,#grayscale&quot;); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);} &lt;/style&gt; &lt;!--黑白模式结束--&gt;</code></pre><p>方式三：</p><pre><code>&lt;!--开启黑白模式--&gt; &lt;style&gt;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;     } &lt;/style&gt; &lt;!--黑白模式结束--&gt;</code></pre><p>方式四：</p><pre><code>&lt;!--开启黑白模式--&gt; &lt;style&gt;html {-webkit-filter: grayscale(100%);}&lt;/style&gt; &lt;!--黑白模式结束--&gt;</code></pre><p><p></p></div></div></div></p><h3>首页文章添加圆角效果</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-63783adfc3cc6dd21c1484865a3ecc8b92" 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-63783adfc3cc6dd21c1484865a3ecc8b92" class="collapse collapse-content"><p></p></p><pre><code>/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

.item-thumb{
    border-radius: 15px;  
}</code></pre><p><p></p></div></div></div></p><h3>自定义字体</h3><p>选择字体，然后去<span class="external-link"><a class="no-external-link" href="https://www.aconvert.com/cn/image/ttf-to-woff/" target="_blank"><i data-feather="external-link"></i>字体转换</a></span>把 <code>otf、ttf</code>转换成 <code>woff</code>格式。<br>将转换成功后的字体上传至网站目录中,默认字体目录是 <code>/usr/themes/handsome/assets/fonts</code>文件夹里。</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-9066e68497c85b755eb897d81c96e56b28" 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-9066e68497c85b755eb897d81c96e56b28" class="collapse collapse-content"><p></p></p><pre><code>/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format(&#039;woff2&#039;)}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}</code></pre><p><p></p></div></div></div></p><h3>修改h1，h2标题背景颜色</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6f5c5b2317283d55ade1122b4d47774023" 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-6f5c5b2317283d55ade1122b4d47774023" class="collapse collapse-content"><p></p></p><pre><code>/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}</code></pre><p><p></p></div></div></div></p><h3>手机端不显示热门文章和标签云</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-42e2130e0e0c48577bbf66fa177be5716" 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-42e2130e0e0c48577bbf66fa177be5716" class="collapse collapse-content"><p></p></p><pre><code>/*手机不显示热门文章和标签云*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}</code></pre><p><p></p></div></div></div></p><h3>网站背景添加海浪背景</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-78996df9ae85baaa0ed8c75050f0978827" 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-78996df9ae85baaa0ed8c75050f0978827" class="collapse collapse-content"><p></p><br>添加至后台 <code>主题设置-开发者设置-自定义CSS</code></p><pre><code>/* 海浪背景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 &gt; use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax &gt; use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax &gt; use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax &gt; use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax &gt; 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%); } }</code></pre><p>添加至后台 <code>主题设置-开发者设置-自定义输出head 头部的HTML代码</code></p><pre><code>&lt;!-- 海浪背景 --&gt;
&lt;div id=&quot;wavesDIV&quot; style=&quot;display: block;&quot;&gt;
        &lt;svg class=&quot;waves&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 24 150 28&quot; preserveAspectRatio=&quot;none&quot; shape-rendering=&quot;auto&quot;&gt;
            &lt;defs&gt;
                &lt;path id=&quot;gentle-wave&quot; d=&quot;M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z&quot;&gt;&lt;/path&gt;
            &lt;/defs&gt;
            &lt;g class=&quot;parallax&quot;&gt;
                &lt;use xlink:href=&quot;#gentle-wave&quot; x=&quot;48&quot; y=&quot;-2&quot; fill=&quot;rgba(125,165,191,0.3)&quot;&gt;&lt;/use&gt;
                &lt;use xlink:href=&quot;#gentle-wave&quot; x=&quot;48&quot; y=&quot;3&quot; fill=&quot;rgba(125,165,191,0.5)&quot;&gt;&lt;/use&gt;
                &lt;use xlink:href=&quot;#gentle-wave&quot; x=&quot;48&quot; y=&quot;5&quot; fill=&quot;rgba(125,165,191,0.7)&quot;&gt;&lt;/use&gt;
                &lt;use xlink:href=&quot;#gentle-wave&quot; x=&quot;48&quot; y=&quot;12&quot; fill=&quot;rgba(125,165,191,1)&quot;&gt;&lt;/use&gt;
            &lt;/g&gt;
        &lt;/svg&gt;
    &lt;/div&gt;</code></pre><p><p></p></div></div></div></p><h2>自定义JavaScript</h2><p>该修改项位于Handsome主题后台-<code>外观-设置外观-开发者设置-自定义Javascript</code>处</p><h3>左侧彩色图标和彩色标签云</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-19843bed0694744a65ff0c2a50f4761157" 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-19843bed0694744a65ff0c2a50f4761157" class="collapse collapse-content"><p></p></p><pre><code>/* 左侧图标颜色and彩色标签云 */
let tags = document.querySelectorAll(&quot;#tag_cloud-2 a&quot;);
let infos = document.querySelectorAll(&quot;.badge&quot;);
let colorArr = [&quot;#428BCA&quot;, &quot;#AEDCAE&quot;, &quot;#ECA9A7&quot;, &quot;#DA99FF&quot;, &quot;#FFB380&quot;, &quot;#D9B999&quot;];
tags.forEach(tag =&gt; {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info =&gt; {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById(&quot;comment&quot;).value.length;
    if(length&gt; 0){
        document.getElementById(&quot;comment&quot;).focus()
        document.getElementById(&quot;comment&quot;).value += &#039;\n&#039; + a + new Date
    }else{
        document.getElementById(&quot;comment&quot;).focus()
        document.getElementById(&quot;comment&quot;).value += a + new Date
    }
}
let leftHeader = document.querySelectorAll(&quot;span.nav-icon&gt;svg,span.nav-icon&gt;i&quot;);
let leftHeaderColorArr = [&quot;#FF69B4&quot;, &quot;#58c7ea&quot;, &quot;#E066FF&quot;, &quot;#FF69B4&quot;, &quot;#FFA54F&quot;, &quot;#90EE90&quot;];
leftHeader.forEach(tag =&gt; {
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});</code></pre><p>如果你博客开启了PJAX，还需要在 <code>PJAX回调函数</code>里面添加以下代码：</p><pre><code>// 彩色标签云
let tags = document.querySelectorAll(&quot;#tag_cloud-2 a&quot;);
let infos = document.querySelectorAll(&quot;.badge&quot;);
let colorArr = [&quot;#428BCA&quot;, &quot;#AEDCAE&quot;, &quot;#ECA9A7&quot;, &quot;#DA99FF&quot;, &quot;#FFB380&quot;, &quot;#D9B999&quot;];
tags.forEach(tag =&gt; {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info =&gt; {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById(&quot;comment&quot;).value.length;
    if(length&gt; 0){
        document.getElementById(&quot;comment&quot;).focus()
        document.getElementById(&quot;comment&quot;).value += &#039;\n&#039; + a + new Date
    }else{
        document.getElementById(&quot;comment&quot;).focus()
        document.getElementById(&quot;comment&quot;).value += a + new Date
    }
}</code></pre><p><p></p></div></div></div></p><h3>网页文字禁止复制</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a99b037db1c093a69a421d450d4d205d89" 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-a99b037db1c093a69a421d450d4d205d89" class="collapse collapse-content"><p></p></p><pre><code>&lt;script language=&quot;Javascript&quot;&gt;
document.oncontextmenu=new Function(&quot;event.returnValue=false&quot;);
document.onselectstart=new Function(&quot;event.returnValue=false&quot;);
&lt;/script&gt;</code></pre><p><p></p></div></div></div></p><h3>复制成功提示</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b8cdae012c1fa5a43af0ca00794308c191" 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-b8cdae012c1fa5a43af0ca00794308c191" class="collapse collapse-content"><p></p></p><pre><code>/* 复制成功提示代码开始 */ 
    kaygb_copy();function kaygb_copy(){$(document).ready(function(){$(&quot;body&quot;).bind(&#039;copy&#039;,function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: &quot;尊重原创，转载请注明出处！&lt;br&gt; 本文作者：沸腾的冰块&lt;br&gt;原文链接：&quot;+sitesurl,
    title: &quot;复制成功&quot;,
    type: &quot;warning&quot;,
    autoHide: !1,
    time: &quot;5000&quot;
    })
}}
/* 复制成功提示代码结束 */</code></pre><p><p></p></div></div></div></p><h3>复制文章带有文章版权</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-076577817f71dde87511fe1442bd677660" 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-076577817f71dde87511fe1442bd677660" class="collapse collapse-content"><p></p></p><pre><code>/* 复制文章自动带版权开始 */ 
document.body.addEventListener(&#039;copy&#039;, function (e) {
    if (window.getSelection().toString() &amp;&amp; window.getSelection().toString().length &gt; 42) {
        setClipboardText(e);
     notie({
  type: &#039;info&#039;,
  text: &#039;商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。&#039;, 
  autoHide: true
})
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
 
        var htmlData = &#039;&#039;
            + &#039;著作权归作者所有。&lt;br&gt;&#039;
            + &#039;商业转载请联系作者获得授权，非商业转载请注明出处！&lt;br&gt;&#039;
      + &#039;本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！&lt;br&gt;&#039;
            + &#039;作者：岁月无声&lt;br&gt;&#039;
            + &#039;链接：&#039; + window.location.href + &#039;&lt;br&gt;&#039;
            + &#039;来源：http://www.5k5b.com/&lt;br&gt;&lt;br&gt;&#039;
            + window.getSelection().toString();
        var textData = &#039;&#039;
            + &#039;著作权归作者所有。\n&#039;
            + &#039;商业转载请联系作者获得授权，非商业转载请注明出处！\n&#039;
      + &#039;本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n&#039;
            + &#039;作者：hellolin.cn\n&#039;
            + &#039;链接：&#039; + window.location.href + &#039;\n&#039;
            + &#039;来源：http://www.5k5b.com/\n\n&#039;
            + window.getSelection().toString();
 
        clipboardData.setData(&#039;text/html&#039;, htmlData);
        clipboardData.setData(&#039;text/plain&#039;,textData);
    }
}
/* 复制文章自动带版权结束 */</code></pre><p><p></p></div></div></div></p><h3>鼠标点击特效-爱心样式</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b2edb12cec5a2146ed7a91fd3261d2c120" 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-b2edb12cec5a2146ed7a91fd3261d2c120" class="collapse collapse-content"><p></p></p><pre><code>//鼠标点击出现爱心特效
(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(&quot;.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: &#039;&#039;;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;}&quot;);
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i&lt;hearts.length;i++){
if(hearts[i].alpha &lt;=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 = &quot;left:&quot;+hearts[i].x+&quot;px;top:&quot;+hearts[i].y+&quot;px;opacity:&quot;+hearts[i].alpha+&quot;;transform:scale(&quot;+hearts[i].scale+&quot;,&quot;+hearts[i].scale+&quot;) rotate(45deg);background:&quot;+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.onclick===&quot;function&quot; &amp;&amp; window.onclick;
window.onclick = function(event){
old &amp;&amp; old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement(&quot;div&quot;);
d.className = &quot;heart&quot;;
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(&quot;style&quot;);
style.type=&quot;text/css&quot;;
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName(&#039;head&#039;)[0].appendChild(style);
}
function randomColor(){
return &quot;rgb(&quot;+(~~(Math.random()*255))+&quot;,&quot;+(~~(Math.random()*255))+&quot;,&quot;+(~~(Math.random()*255))+&quot;)&quot;;
}
})(window,document);</code></pre><p><p></p></div></div></div></p><h3>网站加载完成提示</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-97875ce2d2d1e9794d9a80d343d623eb4" 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-97875ce2d2d1e9794d9a80d343d623eb4" class="collapse collapse-content"><p></p></p><pre><code>/* 网站加载完成提示开始 */ 
function kaygb_referrer(){
var kaygb_referrer = document.referrer;
if  (kaygb_referrer != &quot;&quot;){
return &quot;感谢您的访问！ 您来自：&lt;br&gt;&quot; + document.referrer;
}else{
return &quot;&quot;;
}}
$.message({
    message: &quot;为了网站的正常运行，请不要使用广告屏蔽插件，谢谢！&lt;br &gt;&quot; + kaygb_referrer(),
    title: &quot;网站加载完成&quot;,
    type: &quot;success&quot;,
    autoHide: !1,
    time: &quot;3000&quot;
})
/* 网站加载完成提示结束 */</code></pre><p><p></p></div></div></div></p><h3>左上角网站FPS显示</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-da2d296180fb9bc250ece9c8dceae28383" 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-da2d296180fb9bc250ece9c8dceae28383" class="collapse collapse-content"><p></p></p><pre><code>/* FPS显示 */
var console={};
console.log=function(){};

$(&#039;body&#039;).before(&#039;&lt;div id=&quot;fps&quot; style=&quot;z-index:10000;position:fixed;top:3;left:3;font-weight:bold;&quot;&gt;&lt;/div&gt;&#039;);
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 &gt;= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+&#039;FPS&#039;);
        $(&#039;#fps&#039;).html(fps+&#039;FPS&#039;);
    };
    step();
})();</code></pre><p><p></p></div></div></div></p><h3>动态网站标题</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-13dba0b7df31a33c2daae1e4d15bb10e68" 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-13dba0b7df31a33c2daae1e4d15bb10e68" class="collapse collapse-content"><p></p></p><pre><code>/* 动态网站标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener(&#039;visibilitychange&#039;, function () {
     if (document.hidden) {
         $(&#039;[rel=&quot;icon&quot;]&#039;).attr(&#039;href&#039;, &quot;https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/warning.webp&quot;);
         document.title = &#039;网页崩溃了！！！&#039;;
         clearTimeout(titleTime);
     }
     else {
         $(&#039;[rel=&quot;icon&quot;]&#039;).attr(&#039;href&#039;, &quot;https://cdn.jsdelivr.net/gh/Catalpablog/handsome/img/favicon.webp&quot;);
         document.title = &#039;咦，又好啦(✿◡‿◡)&#039; ;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });</code></pre><p><p></p></div></div></div></p><h3>打字动画效果</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-73c683f6badd68099c16156f335cfd4041" 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-73c683f6badd68099c16156f335cfd4041" class="collapse collapse-content"><p></p></p><pre><code>/* 打字动效 */
(function webpackUniversalModuleDefinition(a,b){if(typeof exports===&quot;object&quot;&amp;&amp;typeof module===&quot;object&quot;){module.exports=b()}else{if(typeof define===&quot;function&quot;&amp;&amp;define.amd){define([],b)}else{if(typeof exports===&quot;object&quot;){exports[&quot;POWERMODE&quot;]=b()}else{a[&quot;POWERMODE&quot;]=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=&quot;&quot;;return c(0)})([function(c,g,b){var d=document.createElement(&quot;canvas&quot;);d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText=&quot;position:fixed;top:0;left:0;pointer-events:none;z-index:999999&quot;;window.addEventListener(&quot;resize&quot;,function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext(&quot;2d&quot;);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&quot;hsla(&quot;+l(q-10,q+10)+&quot;, 100%, &quot;+l(50,80)+&quot;%, &quot;+1+&quot;)&quot;}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName===&quot;TEXTAREA&quot;||(t.tagName===&quot;INPUT&quot;&amp;&amp;t.getAttribute(&quot;type&quot;)===&quot;text&quot;)){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:&quot;transparent&quot;}}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()&gt;0.5?-1:1);var u=r*(Math.random()&gt;0.5?-1:1);document.body.style.marginLeft=q+&quot;px&quot;;document.body.style.marginTop=u+&quot;px&quot;;setTimeout(function(){document.body.style.marginLeft=&quot;&quot;;document.body.style.marginTop=&quot;&quot;},75)}}o.colorful=false;function i(){if(f&gt;0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q&lt;n.length;++q){var r=n[q];if(r.alpha&lt;=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=[&quot;direction&quot;,&quot;boxSizing&quot;,&quot;width&quot;,&quot;height&quot;,&quot;overflowX&quot;,&quot;overflowY&quot;,&quot;borderTopWidth&quot;,&quot;borderRightWidth&quot;,&quot;borderBottomWidth&quot;,&quot;borderLeftWidth&quot;,&quot;borderStyle&quot;,&quot;paddingTop&quot;,&quot;paddingRight&quot;,&quot;paddingBottom&quot;,&quot;paddingLeft&quot;,&quot;fontStyle&quot;,&quot;fontVariant&quot;,&quot;fontWeight&quot;,&quot;fontStretch&quot;,&quot;fontSize&quot;,&quot;fontSizeAdjust&quot;,&quot;lineHeight&quot;,&quot;fontFamily&quot;,&quot;textAlign&quot;,&quot;textTransform&quot;,&quot;textIndent&quot;,&quot;textDecoration&quot;,&quot;letterSpacing&quot;,&quot;wordSpacing&quot;,&quot;tabSize&quot;,&quot;MozTabSize&quot;];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&amp;&amp;o.debug||false;if(h){var i=document.querySelector(&quot;#input-textarea-caret-position-mirror-div&quot;);if(i){i.parentNode.removeChild(i)}}var f=document.createElement(&quot;div&quot;);f.id=&quot;input-textarea-caret-position-mirror-div&quot;;document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace=&quot;pre-wrap&quot;;if(k.nodeName!==&quot;INPUT&quot;){g.wordWrap=&quot;break-word&quot;}g.position=&quot;absolute&quot;;if(!h){g.visibility=&quot;hidden&quot;}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight&gt;parseInt(j.height)){g.overflowY=&quot;scroll&quot;}}else{g.overflow=&quot;hidden&quot;}f.textContent=k.value.substring(0,l);if(k.nodeName===&quot;INPUT&quot;){f.textContent=f.textContent.replace(/\s/g,&quot;\u00a0&quot;)}var n=document.createElement(&quot;span&quot;);n.textContent=k.value.substring(l)||&quot;.&quot;;f.appendChild(n);var m={top:n.offsetTop+parseInt(j[&quot;borderTopWidth&quot;]),left:n.offsetLeft+parseInt(j[&quot;borderLeftWidth&quot;])};if(h){n.style.backgroundColor=&quot;#aaa&quot;}else{document.body.removeChild(f)}return m}if(typeof b!=&quot;undefined&quot;&amp;&amp;typeof b.exports!=&quot;undefined&quot;){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener(&quot;input&quot;,POWERMODE);</code></pre><p><p></p></div></div></div></p><h3>添加复制弹窗</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-751e634ca9329c337a351819ec67516d44" 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-751e634ca9329c337a351819ec67516d44" class="collapse collapse-content"><p></p><br>首先添加以下代码至 <code>自定义输出body尾部的HTML代码</code></p><pre><code>&lt;!-- 复制样式CSS --&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/sweetalert2@8&quot;&gt;&lt;/script&gt;</code></pre><p>然后将以下代码加到 <code>自定义JavaScripts</code>，文字部分可以自行更改~</p><pre><code>/* 复制效果 */
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:&#039;success&#039;,title: &#039;复制成功,如转载请注明出处！&#039;,showConfirmButton: false,timer: 2000});};</code></pre><p><p></p></div></div></div></p><h2>自定义body</h2><p>该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码处</p><h3>自定义右键菜单美化</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-42d40de00000da89adef947a80a5c35535" 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-42d40de00000da89adef947a80a5c35535" class="collapse collapse-content"><p></p><br>注意：一定首先在 <code>主题后台-外观-设置外观-开发者设置-自定义输出head 头部的HTML代码</code>位置添加以下代码。如果不添加将不会显示图标</p><pre><code>&lt;!-- 图标添加 --&gt;
&lt;link href=&quot;https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;</code></pre><p>加完之后再将下面的代码放到 <code>自定义输出body 尾部的HTML代码</code>处<br>另外，一定要把代码里的网址改成自己的！！\~</p><pre><code>&lt;!-- 自定义右键菜单美化 --&gt;
  &lt;style type=&quot;text/css&quot;&gt;
    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;}
    &lt;/style&gt;
&lt;div class=&quot;usercm&quot; style=&quot;left: 199px; top: 5px; display: none;&quot;&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;放你网站的对应网址&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;&lt;span&gt;首页&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;getSelect();&quot;&gt;&lt;i class=&quot;fa fa-copy&quot;&gt;&lt;/i&gt;&lt;span&gt;复制&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;baiduSearch();&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;span&gt;搜索&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;javascript:history.go(1);&quot;&gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;span&gt;前进&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;javascript:history.go(-1);&quot;&gt;&lt;i class=&quot;fa fa-arrow-left&quot;&gt;&lt;/i&gt;&lt;span&gt;后退&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li style=&quot;border-bottom:1px solid gray&quot;&gt;&lt;a href=&quot;javascript:window.location.reload();&quot;&gt;&lt;i class=&quot;fa fa-refresh&quot;&gt;&lt;/i&gt;&lt;span&gt;重载网页&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;放你网站的对应网址&quot;&gt;&lt;i class=&quot;fa fa-meh-o&quot;&gt;&lt;/i&gt;&lt;span&gt;和我当邻居&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;  
        &lt;li&gt;&lt;a href=&quot;放你网站的对应网址&quot;&gt;&lt;i class=&quot;fa fa-pencil-square-o&quot;&gt;&lt;/i&gt;&lt;span&gt;给我留言吧&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    (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() &gt;= d &amp;&amp; (e = e - a(b).width() - 5);
                    k + a(b).height() &gt;= c &amp;&amp; (f = f - a(b).height() - 5);
                    a(&quot;html&quot;).on({
                        contextmenu: function(c) {
                            3 == c.which &amp;&amp; a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
   
    function getSelect() {
        &quot;&quot; == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg(&quot;啊噢...你没还没选择文字呢！&quot;) : document.execCommand(&quot;Copy&quot;)
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        &quot;&quot; == a ? layer.msg(&quot;啊噢...你没还没选择文字呢！&quot;) : window.open(&quot;https://www.baidu.com/s?wd=&quot; + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = &quot;Android;iPhone;SymbianOS;Windows Phone;iPad;iPod&quot;.split(&quot;;&quot;), d = !0, c = 0; c &lt; b.length; c++) if (0 &lt; a.indexOf(b[c])) {
            d = !1;
            break
        }
        d &amp;&amp; ($.mouseMoveShow(&quot;.usercm&quot;), $.disabledContextMenu())
    });
&lt;script src=&quot;https://lib.baomitu.com/layer/3.1.1/layer.js&quot;&gt;&lt;/script&gt;
    &lt;/script&gt;
&lt;!-- 自定义右键菜单美化 --&gt;</code></pre><p><p></p></div></div></div></p><h3>清空控制台</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c8c8488d3be45c7cae6f668433bfcb2d89" 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-c8c8488d3be45c7cae6f668433bfcb2d89" class="collapse collapse-content"><p></p><br>首先添加以下代码至 <code>自定义输出body尾部的HTML代码</code></p><pre><code>&lt;!--输出控制台--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
  console.clear();  //清空控制台
  console.log(&quot;\n %c 沸腾笔记  控制台--没什么可看的&quot;,&quot;color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;&quot;);  //万能控制台，可写html代码
&lt;/script&gt;</code></pre><p><p></p></div></div></div></p><h3>防止他人F12抓你代码</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a99c7ea4992e62e0a829b4ada46f58da78" 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-a99c7ea4992e62e0a829b4ada46f58da78" class="collapse collapse-content"><p></p><br>首先要说，这个功能防君子不防小人。所以真的会扒你网站代码的人总是会有办法的。<br>提示内容可以自行修改哦~</p><pre><code>&lt;!-- 防调试 --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(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 &amp;&amp; window.event.keyCode == 123) {
          event.keyCode = 0;
          event.returnValue = false;
          layer.msg(&quot;球球了，别再扒孩子了=.=&quot;)
          return false;
        }
        //ctrl+u
        if (event.ctrlKey &amp;&amp; window.event.keyCode == 85) {
          return false;
        }
        //ctrl+shift+i
        if ((event.ctrlKey) &amp;&amp; (event.shiftKey) &amp;&amp; (event.keyCode == 73)) {
          return false;
        }
        // Ctrl+S
        else if ((event.ctrlKey) &amp;&amp; (event.keyCode == 83)) {
          return false;
        }
      };

});
  &lt;/script&gt;
&lt;script&gt;
    //debug调试时跳转页面
    var element = new Image();
    Object.defineProperty(element,&#039;id&#039;,{get:function(){window.location.href=&quot;https://www.boiling.top&quot;}});
    console.log(element);
&lt;/script&gt;</code></pre><p><p></p></div></div></div></p><h2>其他修改</h2><h3>博主文字介绍动态化</h3><p>将代码里的 <code>这是我的介绍</code>文字内容修改成需要展示的文字内容即可，顺便那个❤也是可以改的。 将以下代码放到 <code>主题后台-外观-设置外观-初级设置-博主的介绍</code>内即可</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-7338d89193fac3efbb2a2f526953b4da52" 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-7338d89193fac3efbb2a2f526953b4da52" class="collapse collapse-content"><p></p></p><pre><code>&lt;span class=&quot;text-muted text-xs block&quot;&gt;&lt;div id=&quot;chakhsu&quot;&gt;&lt;/div&gt;

&lt;script&gt;
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 &gt; i; i++) {
var l = document.createElement(&quot;span&quot;);
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 &lt; l.length ? (c.prefixP &gt;= 0 &amp;&amp; (c.text += l[c.prefixP]), c.prefixP++) :
&quot;forward&quot; === c.direction ? c.skillP &lt; t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- :
(c.direction = &quot;backward&quot;, c.delay = a) : c.skillP &gt; 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
(c.skillI + 1) % o.length, c.direction = &quot;forward&quot;)), r.textContent = c.text, r.appendChild(n(c.prefixP &lt; l.length ?
Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
/*以下内容自定义修改*/
var l = &quot;❤&quot;,
o = [&quot;这是我的介绍&quot;].map(function(r) {
return r + &quot;&quot;
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = [&quot;rgb(110,64,170)&quot;, &quot;rgb(150,61,179)&quot;, &quot;rgb(191,60,175)&quot;, &quot;rgb(228,65,157)&quot;, &quot;rgb(254,75,131)&quot;,
&quot;rgb(255,94,99)&quot;, &quot;rgb(255,120,71)&quot;, &quot;rgb(251,150,51)&quot;, &quot;rgb(226,183,47)&quot;, &quot;rgb(198,214,60)&quot;, &quot;rgb(175,240,91)&quot;,
&quot;rgb(127,246,88)&quot;, &quot;rgb(82,246,103)&quot;, &quot;rgb(48,239,130)&quot;, &quot;rgb(29,223,163)&quot;, &quot;rgb(26,199,194)&quot;,
&quot;rgb(35,171,216)&quot;, &quot;rgb(54,140,225)&quot;, &quot;rgb(76,110,219)&quot;, &quot;rgb(96,84,200)&quot;
],
c = {
text: &quot;&quot;,
prefixP: -s,
skillI: 0,
skillP: 0,
direction: &quot;forward&quot;,
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById(&#039;chakhsu&#039;));
&lt;/script&gt;

&lt;/span&gt;</code></pre><p><p></p></div></div></div></p><h3>首页新年倒计时</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-22868d45b8e8b0caa62e2debffecca8b38" 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-22868d45b8e8b0caa62e2debffecca8b38" class="collapse collapse-content"><p></p><br>将如下代码加到 <code>开发者设置-首页列表最前方广告位</code>即可</p><pre><code>&lt;!-- 首页倒计时 --&gt;
&lt;style&gt;
    .gn_box {
        border: none;
        border-radius: 15px;
    }

.gn_box {
        padding: 10px 14px;
        margin: 10px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #fff;
    }

#t_d {
        color: #982585;
        font-size: 18px;
    }

#t_h {
        color: #8f79c1;
        font-size: 18px;
    }

#t_m {
        color: #65b4b5;
        font-size: 18px;
    }

#t_s {
        color: #83caa3;
        font-size: 18px;
    }
&lt;/style&gt;
&lt;div class=&quot;gn_box&quot;&gt;
    &lt;h1&gt;
        &lt;font color=#E80017&gt;2&lt;/font&gt;
        &lt;font color=#D1002E&gt;0&lt;/font&gt;
        &lt;font color=#BA0045&gt;2&lt;/font&gt;
        &lt;font color=#A3005C&gt;3&lt;/font&gt;
        &lt;font color=#8C0073&gt;年&lt;/font&gt;
        &lt;font color=#75008A&gt;-&lt;/font&gt;
        &lt;font color=#5E00A1&gt;新&lt;/font&gt;
        &lt;font color=#4700B8&gt;年&lt;/font&gt;
        &lt;font color=#3000CF&gt;倒&lt;/font&gt;
        &lt;font color=#1900E6&gt;计&lt;/font&gt;
        &lt;font color=#0200FD&gt;时&lt;/font&gt;
    &lt;/h1&gt;
    &lt;center&gt;
        &lt;div id=&quot;CountMsg&quot; class=&quot;HotDate&quot;&gt;&lt;span id=&quot;t_d&quot;&gt; 天&lt;/span&gt;&lt;span id=&quot;t_h&quot;&gt; 时&lt;/span&gt;&lt;span id=&quot;t_m&quot;&gt; 分&lt;/span&gt;&lt;span
                id=&quot;t_s&quot;&gt; 秒&lt;/span&gt;&lt;/div&gt;
    &lt;/center&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        function getRTime() {
            var EndTime = new Date(&#039;2023/01/01 00:00:00&#039;);   // 这里是明年第一天时间
            var NowTime = new Date(&#039;2022/8/25 23:02:01&#039;);    // 这里是当前时间 自己修改
            var t = EndTime.getTime() - NowTime.getTime();
            var d = Math.floor(t / 1000 / 60 / 60 / 24);
            var h = Math.floor(t / 1000 / 60 / 60 % 24);
            var m = Math.floor(t / 1000 / 60 % 60);
            var s = Math.floor(t / 1000 % 60);
            var day = document.getElementById(&quot;t_d&quot;);
            if (day != null) {
                day.innerHTML = d + &quot; 天&quot;;
            }
            var hour = document.getElementById(&quot;t_h&quot;);
            if (hour != null) {
                hour.innerHTML = h + &quot; 时&quot;;
            }
            var min = document.getElementById(&quot;t_m&quot;);
            if (min != null) {
                min.innerHTML = m + &quot; 分&quot;;
            }
            var sec = document.getElementById(&quot;t_s&quot;);
            if (sec != null) {
                sec.innerHTML = s + &quot; 秒&quot;;
            }
        }
        setInterval(getRTime, 1000);   
    &lt;/script&gt;
&lt;/div&gt;</code></pre><p><p></p></div></div></div></p><h3>给正文添加结束标识</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c4927d43901383885ba641fd2c8799f968" 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-c4927d43901383885ba641fd2c8799f968" class="collapse collapse-content"><p></p><br>首先打开 网站根目录 <code>/usr/themes/handsome的post.php</code>文件<br>找到 <code>&lt;?php if ($this-&gt;options-&gt;adContentPost != &quot;&quot;): ?&gt;</code>这行代码，在其上方的空白位置添加以下代码</p><pre><code>&lt;!--内容结束分割线--&gt;
&lt;div class=&quot;tt-fenge-end&quot;&gt;
    &lt;span&gt;结束&lt;/span&gt;
&lt;/div&gt;
&lt;!--/ 内容结束分割线--&gt;</code></pre><p>并在改好保存后，在 <code>自定义CSS</code>处添加以下代码</p><pre><code>/*文章正文下的结束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;}</code></pre><p><p></p></div></div></div></p><h3>正文下方添加版权声明</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-460cfdc1e243b3e0f7d4e141cb8023fe22" 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-460cfdc1e243b3e0f7d4e141cb8023fe22" class="collapse collapse-content"><p></p><br>这个代码同样也是在 <code>&lt;?php if ($this-&gt;options-&gt;adContentPost != &quot;&quot;): ?&gt;</code>的上方<br>添加位置和上面正文结束功能的添加位置相同，找到后添加以下代码(你也可以添加到其他你认为合适的地方)</p><pre><code>&lt;!--知识共享许可协议--&gt;
&lt;div
    style=&quot;padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;&quot;&gt;
    &lt;div class=&quot;tt-license&quot;&gt;
        &lt;p&gt;&lt;span class=&quot;tt-license-icon&quot;&gt;&lt;i data-feather=&quot;award&quot;&gt;&lt;/i&gt;&lt;/span&gt;本文标题：
            &lt;?php $this-&gt;title() ?&gt;
        &lt;/p&gt;
        &lt;p&gt;&lt;span class=&quot;tt-license-icon&quot;&gt;&lt;i data-feather=&quot;link&quot;&gt;&lt;/i&gt;&lt;/span&gt;本文链接：
            &lt;?php $this-&gt;permalink() ?&gt;
        &lt;/p&gt;
        &lt;p&gt;&lt;span class=&quot;tt-license-icon&quot;&gt;&lt;i data-feather=&quot;shield&quot;&gt;&lt;/i&gt;&lt;/span&gt;除非另有说明，本作品采用 &lt;a rel=&quot;license&quot;
                href=&quot;http://creativecommons.org/licenses/by-nc-sa/4.0/&quot;&gt; 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议&lt;/a&gt;。&lt;/p&gt;
        &lt;p&gt;&lt;span class=&quot;tt-license-icon&quot;&gt;&lt;i data-feather=&quot;alert-circle&quot;&gt;&lt;/i&gt;&lt;/span&gt;声明：转载请注明文章来源。&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;!-- / 知识共享许可协议--&gt;</code></pre><p>添加好后，在 <code>自定义CSS</code>中添加以下代码：</p><pre><code>/*文章正文下的知识共享许可协议*/
.tt-license {font-size: 12px;font-weight: 600;padding: 1rem;background: repeating-linear-gradient(135deg,#f6f6f6,#f6f6f6 12px,#fff 0,#fff 24px);background-color: #f3f5f7;border-left: 3px solid #dde6e9;margin-bottom: 20px;}
.tt-license-icon {align-items: center;position: relative;float: left;margin: -10px -10px -10px 0;margin-right: 10px;overflow: hidden;text-align: center;display: flex;height: 40px;color: #ff5722;}
.tt-license a {color: #337ab7;text-decoration: underline;margin: 0 5px;}
/*深色模式下的知识共享许可协议*/
html.theme-dark .tt-license {background: repeating-linear-gradient(135deg,#191919,#191919 12px,#222 0,#222 24px);border-left: 3px solid #494949;}.tt-license p {line-height: 1.5em;margin: 5px 0!important;}</code></pre><p><p></p></div></div></div></p><h3>右侧添加人生倒计时（岁月不待人）</h3><p>首先找到网站根目录 <code>/usr/themes/handsome/component/sidebar.php</code>文件，找到 <code>&lt;!--广告位置--&gt;</code>这一行内容。 在该内容向上两行找到 <code>&lt;?php endif; ?&gt;</code>，在该行紧接着下面添加如下代码：<br><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-973ada53232869051264cfa8fa4241fd22" 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-973ada53232869051264cfa8fa4241fd22" class="collapse collapse-content"><p></p></p><pre><code>&lt;section id=&quot;blog_info&quot; class=&quot;widget widget_categories wrapper-md clear&quot;&gt;
    &lt;h5 class=&quot;widget-title m-t-none text-md&quot;&gt;&lt;?php _me(&quot;岁月不待人&quot;) ?&gt;&lt;/h5&gt;
&lt;div class=&quot;sidebar sidebar-count&quot;&gt;
    &lt;div class=&quot;content&quot;&gt;
        &lt;div class=&quot;item&quot; id=&quot;dayProgress&quot;&gt;
            &lt;div class=&quot;title&quot;&gt;今日已经过去&lt;span&gt;&lt;/span&gt;小时&lt;/div&gt;
            &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar&quot;&gt;
                    &lt;div class=&quot;progress-inner progress-inner-1&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;progress-percentage&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;item&quot; id=&quot;weekProgress&quot;&gt;
            &lt;div class=&quot;title&quot;&gt;这周已经过去&lt;span&gt;&lt;/span&gt;天&lt;/div&gt;
            &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar&quot;&gt;
                    &lt;div class=&quot;progress-inner progress-inner-2&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;progress-percentage&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;item&quot; id=&quot;monthProgress&quot;&gt;
            &lt;div class=&quot;title&quot;&gt;本月已经过去&lt;span&gt;&lt;/span&gt;天&lt;/div&gt;
            &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar&quot;&gt;
                    &lt;div class=&quot;progress-inner progress-inner-3&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;progress-percentage&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;item&quot; id=&quot;yearProgress&quot;&gt;
            &lt;div class=&quot;title&quot;&gt;今年已经过去&lt;span&gt;&lt;/span&gt;个月&lt;/div&gt;
            &lt;div class=&quot;progress&quot;&gt;
                &lt;div class=&quot;progress-bar&quot;&gt;
                    &lt;div class=&quot;progress-inner progress-inner-4&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;progress-percentage&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
     &lt;/section&gt;
&lt;!-- 时间倒计时代码结束 --&gt;</code></pre><p><p></p></div></div></div></p><h3>取消时光机文字首字放大效果</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a404d8821b6afc1ae79251e3dd69d75217" 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-a404d8821b6afc1ae79251e3dd69d75217" class="collapse collapse-content"><p></p><br>修改 <code>usr/themes/handsome/component/say.php</code>文件，将以下代码注释掉</p><pre><code>#talk .streamline&gt;.comment-list &gt; .comment-body &gt;.time-machine &gt; .panel-body p:first-letter {
    font-size: 140%;
    /* float: left; */
    vertical-align: middle;
}</code></pre><p><p></p></div></div></div></p><h3>信息统计增加全站字数、在线人数、响应耗时和访客总数</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3aa25af247da2b05eb849fb1420c8d4045" 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-3aa25af247da2b05eb849fb1420c8d4045" class="collapse collapse-content"><p></p><br>首先将以下代码加到 <code>/usr/themes/handsome/libs/Content.php</code>中，放在 <code>class Content</code>的上面</p><pre><code>/*访问总量*/
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db-&gt;fetchAll(&#039;SELECT SUM(VIEWS) FROM `typecho_contents`&#039;);
                 echo number_format($row[0][&#039;SUM(VIEWS)&#039;]);
     }

/*响应时间*/
    function timer_start() {
        global $timestart;
        $mtime = explode( &#039; &#039;, microtime()  );
        $timestart = $mtime[1] + $mtime[0];
        return true; 
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3  ) {
        global $timestart, $timeend;
        $mtime = explode( &#039; &#039;, microtime()  );
        $timeend = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision  );
        $r = $timetotal &lt; 1 ? $timetotal * 1000 . &quot; ms&quot; : $timetotal . &quot; s&quot;;
        if ( $display  ) {
            echo $r;
        }
        return $r;
    }
        /**
     * 全站字数
     */
    function allOfCharacters() {
        $chars = 0;
        $db = Typecho_Db::get();
        $select = $db -&gt;select(&#039;text&#039;)-&gt;from(&#039;table.contents&#039;);
        $rows = $db-&gt;fetchAll($select);
        foreach ($rows as $row) { $chars += mb_strlen(trim($row[&#039;text&#039;]), &#039;UTF-8&#039;); }
        $unit = &#039;&#039;;
        if($chars &gt;= 10000)     { $chars /= 10000; $unit = &#039;万&#039;; } 
        else if($chars &gt;= 1000) { $chars /= 1000;  $unit = &#039;千&#039;; }
        $out = sprintf(&#039;%.2lf %s&#039;,$chars, $unit);
        return $out;
    } 
/**
     * 在线人数
     */
    function online_users() {
        $filename=&#039;online.txt&#039;; //数据文件
        $cookiename=&#039;Nanlon_OnLineCount&#039;; //Cookie名称
        $onlinetime=30; //在线有效时间
        $online=file($filename); 
        $nowtime=$_SERVER[&#039;REQUEST_TIME&#039;]; 
        $nowonline=array(); 
        foreach($online as $line){ 
            $row=explode(&#039;|&#039;,$line); 
            $sesstime=trim($row[1]); 
            if(($nowtime - $sesstime)&lt;=$onlinetime){
                $nowonline[$row[0]]=$sesstime;
            } 
        } 
        if(isset($_COOKIE[$cookiename])){
            $uid=$_COOKIE[$cookiename]; 
        }else{
            $vid=0;
            do{
                $vid++; 
                $uid=&#039;U&#039;.$vid; 
            }while(array_key_exists($uid,$nowonline)); 
            setcookie($cookiename,$uid); 
        } 
        $nowonline[$uid]=$nowtime;
        $total_online=count($nowonline); 
        if($fp=@fopen($filename,&#039;w&#039;)){ 
            if(flock($fp,LOCK_EX)){ 
                rewind($fp); 
                foreach($nowonline as $fuid=&gt;$ftime){ 
                    $fline=$fuid.&#039;|&#039;.$ftime.&quot;\n&quot;; 
                    @fputs($fp,$fline); 
                } 
                flock($fp,LOCK_UN); 
                fclose($fp); 
            } 
        } 
        echo &quot;$total_online&quot;; 
    }</code></pre><p>然后在 <code>/usr/themes/handsome/component/sidebar.php</code>文件内，找到合适和位置添加以下代码： 注：<code>&lt;!--博客信息--&gt;</code>处就是添加代码的地方，找到你想加的位置添加代码即可</p><pre><code>&lt;li class=&quot;list-group-item text-second&quot;&gt;&lt;span class=&quot;blog-info-icons&quot;&gt;&lt;i data-feather=&quot;edit-3&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class=&quot;badge pull-right&quot;&gt;&lt;?php echo allOfCharacters(); ?&gt;&lt;/span&gt;&lt;?php _me(&quot;全站字数&quot;) ?&gt;&lt;/li&gt;
&lt;li class=&quot;list-group-item&quot;&gt; &lt;i class=&quot;glyphicon glyphicon-user text-muted text-muted&quot;&gt;&lt;/i&gt; &lt;span class=&quot;badge pull-right&quot;&gt;&lt;?php echo online_users() ?&gt;&lt;/span&gt;&lt;?php _me(&quot;在线人数&quot;) ?&gt;&lt;/li&gt;
&lt;li class=&quot;list-group-item text-second&quot;&gt; &lt;span class=&quot;blog-info-icons&quot;&gt; &lt;i data-feather=&quot;users&quot;&gt;&lt;/i&gt;&lt;/span&gt;
     &lt;span class=&quot;badge
 pull-right&quot;&gt;&lt;?php echo theAllViews(); ?&gt;&lt;/span&gt;&lt;?php _me(&quot;访客总数&quot;) ?&gt;&lt;/li&gt;
&lt;li class=&quot;list-group-item text-second&quot;&gt; &lt;span class=&quot;blog-info-icons&quot;&gt; &lt;i data-feather=&quot;refresh-ccw&quot;&gt;&lt;/i&gt;&lt;/span&gt;
     &lt;span class=&quot;badge
 pull-right&quot;&gt;&lt;?php echo timer_stop(); ?&gt;&lt;/span&gt;&lt;?php _me(&quot;响应耗时&quot;) ?&gt;&lt;/li&gt;</code></pre><p><p></p></div></div></div></p><h3>底部版权美化</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3c2df7f761a4f54c1c2a3cbe6bb9772423" 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-3c2df7f761a4f54c1c2a3cbe6bb9772423" class="collapse collapse-content"><p></p><br>左侧底部放在 <code>后台-开发者设置-博客底部左侧信息</code></p><pre><code>&lt;!--左侧底部--&gt;
&lt;div class=&quot;github-badge&quot;&gt;
    &lt;span class=&quot;badge-subject&quot;&gt;Copyright&lt;/span&gt;
    &lt;a href=&quot;https://www.5k5b.com&quot; target=&quot;_blank&quot;&gt;
        &lt;span class=&quot;badge-value bg-blue&quot;&gt;©2022 5k5b.&lt;/span&gt;
    &lt;/a&gt;
&lt;/div&gt; |
&lt;div class=&quot;github-badge&quot;&gt;
    &lt;span class=&quot;badge-subject&quot;&gt;豫ICP备&lt;/span&gt;
    &lt;a href=&quot;http://beian.miit.gov.cn/&quot; target=&quot;_blank&quot;&gt;
        &lt;span class=&quot;badge-value bg-green&quot;&gt;2020030958号&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&quot;github-badge&quot;&gt;
    &lt;img src=&quot;https: //cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png&quot; style=&quot;float:left;&quot; /&gt;
    &lt;span class=&quot;badge-subject&quot;&gt;豫公网安备&lt;/span&gt;
    &lt;a href=&quot;http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41032602000132&quot; target=&quot;_blank&quot;&gt;
        &lt;span class=&quot;badge-value bg-green&quot;&gt;41032602000132号&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre><p>右侧底部放在 <code>后台-开发者设置-博客底部右侧信息</code></p><pre><code>&lt;!--右侧底部--&gt;
&lt;div class=&quot;github-badge&quot;&gt;
    &lt;span class=&quot;badge-subject&quot;&gt;本站由&lt;/span&gt;
    &lt;a href=&quot;https://www.95vps.com/aff/20&quot; target=&quot;_blank&quot;&gt;
        &lt;span class=&quot;badge-value bg-blue&quot;&gt;桔子数据提供服务&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt; |
&lt;div class=&quot;github-badge&quot;&gt;
    &lt;span class=&quot;badge-subject&quot;&gt;Theme by&lt;/span&gt;
    &lt;a href=&quot;https://www.ihewro.com/&quot; target=&quot;_blank&quot;&gt;
        &lt;span class=&quot;badge-value bg-orange&quot;&gt;Handsome&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre><p>css放在 <code>主题设置-自定义css</code>内</p><pre><code>/*底部页脚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
}</code></pre><p>把下面代码放在主题目录 <code>usr/themes/handsome/component/footer.php</code>内大概在 <code>177</code>行，覆盖原来的即可</p><pre><code>&lt;footer id=&quot;footer&quot; class=&quot;app-footer&quot; role=&quot;footer&quot;&gt;
    &lt;div class=&quot;wrapper bg-light&quot;&gt;
        &lt;span class=&quot;pull-right hidden-xs text-ellipsis&quot;&gt;
            &lt;?php $this-&gt;options-&gt;BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?&gt;
        &lt;/span&gt;
        &lt;span class=&quot;text-ellipsis&quot;&gt;
            &lt;?php
            $this-&gt;options-&gt;BottomleftInfo(); ?&gt;
        &lt;/span&gt;
    &lt;/div&gt;

&lt;/footer&gt;</code></pre><p><p></p></div></div></div></p><h3>页脚处添加网站运行时间</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a4913244893d032369a791c407d7a00e62" 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-a4913244893d032369a791c407d7a00e62" class="collapse collapse-content"><p></p><br>注意这个功能我是在上一个页脚美化的基础上添加的，如果没有添加页脚美化功能，该运行时间的排版会出现问题。当然你也可以改成你喜欢的样子\~<br>代码放到 <code>后台-开发者设置-博客底部左侧信息</code></p><pre><code>|  
&lt;!-- 建站时间 --&gt;
&lt;div class=&quot;github-badge&quot;&gt;
&lt;span class=&quot;badge-subject&quot;&gt;运行时间&lt;/span&gt;
&lt;span class=&quot;badge-value bg-green&quot;&gt;&lt;span id=&quot;span_dt_dt&quot;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;script&gt;
    /*建站时间*/
    function show_date_time() {
        window.setTimeout(&quot;show_date_time()&quot;, 1e3);
        var BirthDay = new Date(&quot;2021/09/11 22:30:00&quot;),
        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 + &quot;天&quot; + hrsold + &quot;小时&quot; + minsold + &quot;分&quot; + seconds + &quot;秒&quot;;
    }
    show_date_time();
&lt;/script&gt;</code></pre><p><p></p></div></div></div></p><h3>添加网站加载效果</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-721af98f4b1d90bba8d06274412130a119" 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-721af98f4b1d90bba8d06274412130a119" class="collapse collapse-content"><p></p><br>首先找到 <code>/usr/themes/handsome/component/</code>文件夹内的 <code>header.php</code>，将以下代码加到最后 <code>&lt;/style&gt;</code>之后</p><pre><code>&lt;!--加载动画--&gt;
&lt;style&gt;
    #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);
        }
    }
&lt;/style&gt;

&lt;!--加载动画--&gt;

&lt;body id=&quot;body&quot; class=&quot;fix-padding skt-loading&quot;&gt;

&lt;body id=&quot;body&quot; class=&quot;fix-padding&quot; style=&quot;overflow:hidden&quot;&gt;
        &lt;div id=&quot;PageLoading&quot; style=&quot;z-index:99999999;&quot;&gt;
            &lt;div id=&quot;PageLoading-center&quot;&gt;
                &lt;div id=&quot;PageLoading-center-absolute&quot;&gt;
                    &lt;div class=&quot;object2&quot; id=&quot;object_four&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;object2&quot; id=&quot;object_three&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;object2&quot; id=&quot;object_two&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;object2&quot; id=&quot;object_one&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/body&gt;</code></pre><p>加好后刷新博客会出现一直卡在加载页面的问题，我们再将以下代码放到 <code>自定义JavaScripts</code>里面</p><pre><code>/* 加载动画 */
$(function(){
        $(&quot;#PageLoading&quot;).fadeOut(400);
        $(&quot;#body&quot;).css(&#039;overflow&#039;,&#039;&#039;);
    });</code></pre><p><p></p></div></div></div></p><h3>在博客顶部添加心知天气</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0ff6a64c1ba9de9a49d3528ef04afc559" 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-0ff6a64c1ba9de9a49d3528ef04afc559" class="collapse collapse-content"><p></p><br>首先去<span class="external-link"><a class="no-external-link" href="https://www.seniverse.com/" target="_blank"><i data-feather="external-link"></i>心知天气</a></span>官网注册账号并申请API<br>之后在 <code>/usr/themes/handsome/component/headnav.php</code>文件中的动态日历中 <code>&lt;?php endif;?&gt;</code>下方添加以下代码<br>注意将API信息改成自己的</p><pre><code>&lt;!-- 心知天气--&gt;
    &lt;div id=&quot;tp-weather-widget&quot; class=&quot;navbar-form navbar-form-sm navbar-left shift&quot;&gt;&lt;/div&gt;
    &lt;script&gt;(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=&quot;utf-8&quot;;P.async=1;a.parentNode.insertBefore(P,a)};T[&quot;ThinkPageWeatherWidgetObject&quot;]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent(&quot;onload&quot;,g)}else{T.addEventListener(&quot;load&quot;,g,false)}}(window,document,&quot;script&quot;,&quot;tpwidget&quot;,&quot;//widget.seniverse.com/widget/chameleon.js&quot;))&lt;/script&gt;
    &lt;script&gt;tpwidget(&quot;init&quot;, {
        &quot;flavor&quot;: &quot;slim&quot;,
        &quot;location&quot;: &quot;WX4FBXXFKE4F&quot;,
        &quot;geolocation&quot;: &quot;enabled&quot;,
        &quot;language&quot;: &quot;auto&quot;,
        &quot;unit&quot;: &quot;c&quot;,
        &quot;theme&quot;: &quot;chameleon&quot;,
        &quot;container&quot;: &quot;tp-weather-widget&quot;,
        &quot;bubble&quot;: &quot;enabled&quot;,
        &quot;alarmType&quot;: &quot;badge&quot;,
        &quot;color&quot;: &quot;#C6C6C6&quot;,
        &quot;uid&quot;: &quot;公钥&quot;,
        &quot;hash&quot;: &quot;私钥&quot;
    });
    tpwidget(&quot;show&quot;);&lt;/script&gt;
    &lt;!-- 心知结束--&gt;</code></pre><p><p></p></div></div></div></p><h3>404页面添加自动返回首页功能</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ff8fe2b217af1c39e290ee16b94ce36869" aria-expanded="true"><div class="accordion-toggle"><span style="">404页面添加自动返回首页功能</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ff8fe2b217af1c39e290ee16b94ce36869" class="collapse collapse-content"><p></p><br>找到 <code>/usr/themes/handsome</code>文件夹内的 <code>404.php</code>文件并打开。<br>在 <code>h1 class=&quot;text-shadow text-white&quot;&gt;404</code>这一行下面加入以下代码：</p><pre><code>&lt;br&gt;
    &lt;small class=&quot;text-muted letterspacing&quot;&gt;&lt;/small&gt;
    &lt;b id=&quot;sp&quot;&gt;2&lt;/b&gt;秒后自动返回···&lt;br&gt;
    &lt;a class=&quot;text-muted letterspacing&quot; href=&quot;#&quot; onclick=&quot;javascript:history.go(-1);&quot;&gt;立刻返回&lt;/a&gt;</code></pre><p>再把下面的代码加入 <code>404.php</code>文件内最底下的 <code>&lt;/body&gt;</code>前面</p><pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
onload = function(){setInterval(go, 1000);};var x=2;
function go() {x--;if(x&gt;0) {document.getElementById(&quot;sp&quot;).innerHTML = x;}else{history.go(-1);}}
&lt;/script&gt;</code></pre><p><p></p></div></div></div></p><h3>在文章顶部添加百度是否收录</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-40c56bb0baa91a7ea587dfc1534e0c7f61" 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-40c56bb0baa91a7ea587dfc1534e0c7f61" class="collapse collapse-content"><p></p><br>在 <code>handsome/functions.php</code>最底部添加代码</p><pre><code>/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url=&#039;http://&#039;.$_SERVER[&#039;HTTP_HOST&#039;].$_SERVER[&#039;REQUEST_URI&#039;];
if(checkBaidu($url)==1){
    echo &quot;百度已收录&quot;;
}
else{
    echo &quot;&lt;a style=\&quot;color:red;\&quot; rel=\&quot;external nofollow\&quot; title=\&quot;点击提交收录！\&quot; target=\&quot;_blank\&quot; href=\&quot;http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\&quot;&gt;百度未收录&lt;/a&gt;&quot;;}
}
function checkBaidu($url) {
    $url = &#039;http://www.baidu.com/s?wd=&#039; . urlencode($url);
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $rs = curl_exec($curl);
    curl_close($curl);
    if (!strpos($rs, &#039;没有找到&#039;)) { //没有找到说明已被百度收录
        return 1;
    } else {
        return -1;
    }
}</code></pre><p>然后在 <code>handsome/post.php</code>在63行左右添加代码</p><pre><code>&lt;!--百度收录--&gt;
&lt;li&gt;&lt;i class=&quot;glyphicon glyphicon-globe&quot;&gt;&lt;/i&gt;&amp;nbsp&lt;?php echo baidu_record() ?&gt;&lt;/li&gt;</code></pre><p><p></p></div></div></div></p><h2>插件推荐</h2><h3>鼠标美化插件HoerMouse</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-715086fdb05473823e4df50b373d9d0a74" 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-715086fdb05473823e4df50b373d9d0a74" class="collapse collapse-content"><p></p></p><p>插件下载：<button class=" btn m-b-xs btn-info btn-rounded " onclick="window.open('https://alist.boiling.top/%E5%8D%9A%E5%AE%A2%E6%96%87%E4%BB%B6/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90%E5%AD%98%E5%82%A8/Typecho%E6%8F%92%E4%BB%B6/HoerMouse.zip','_blank')">HoerMouse v1.3.0</button><br>食用方法：</p><ul><li>下载插件，解压到 <code>usr/plugins/</code>目录中</li><li>修改文件夹名为HoerMouse</li><li>进入后台设置激活插件</li></ul><p><p></p></div></div></div></p><h3>UserAgent插件</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-652d06c93991f3ca204b423e6ea7ccb984" aria-expanded="true"><div class="accordion-toggle"><span style="">UserAgent插件</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-652d06c93991f3ca204b423e6ea7ccb984" class="collapse collapse-content"><p></p></p><p>插件下载：<button class=" btn m-b-xs btn-info btn-rounded " onclick="window.open('https://alist.boiling.top/%E5%8D%9A%E5%AE%A2%E6%96%87%E4%BB%B6/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90%E5%AD%98%E5%82%A8/Typecho%E6%8F%92%E4%BB%B6/UserAgent%20v1.1.1.zip','_blank')">UserAgent v1.1.1</button><br>食用方法：<br><div class="tip inlineBlock info">

操作前请做好相应备份工作，此插件只针对于 <code>Handsome</code>主题
</div></p><ul><li>下载插件，解压到 <code>usr/plugins</code>目录中</li><li>修改文件夹名为UserAgent</li><li>进入后台设置激活插件</li><li>修改 <code>Handsome</code>主题 <code>component</code>目录下 <code>comments.php</code>，代码大概在 <code>99~100</code>行左右。</li></ul><pre><code>&lt;span class=&quot;comment-author vcard&quot;&gt;
              &lt;b class=&quot;fn&quot;&gt;&lt;?php echo $author; ?&gt;&lt;/b&gt;
&lt;/span&gt;</code></pre><p>添加代码<code>&lt;?php UserAgent_Plugin::get_useragent($comments-&gt;agent,$comments-&gt;ip); ?&gt;</code>，修改后代码如下：</p><pre><code>&lt;span class=&quot;comment-author vcard&quot;&gt;
              &lt;b class=&quot;fn&quot;&gt;&lt;?php echo $author; ?&gt;&lt;/b&gt;&lt;?php UserAgent_Plugin::get_useragent($comments-&gt;agent,$comments-&gt;ip); ?&gt;

&lt;/span&gt;</code></pre><h4>获取真实IP</h4><p>Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在Typecho博客网站的根目录的 <code>config.inc.php</code>插入下面的代码：</p><pre><code>//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER[&#039;HTTP_X_FORWARDED_FOR&#039;])) 
{
    $list = explode(&#039;,&#039;,$_SERVER[&#039;HTTP_X_FORWARDED_FOR&#039;]);
    $_SERVER[&#039;REMOTE_ADDR&#039;] = $list[0];
}</code></pre><p><p></p></div></div></div></p><h3>邮箱评论通知插件CommentToMail</h3><p><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-b134c4b36457109cc5a6cace87f8772643" 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-b134c4b36457109cc5a6cace87f8772643" class="collapse collapse-content"><p></p></p><p>插件下载：<button class=" btn m-b-xs btn-info btn-rounded " onclick="window.open('https://alist.boiling.top/%E5%8D%9A%E5%AE%A2%E6%96%87%E4%BB%B6/%E5%8D%9A%E5%AE%A2%E8%B5%84%E6%BA%90%E5%AD%98%E5%82%A8/Typecho%E6%8F%92%E4%BB%B6/CommentToMail.zip','_blank')">CommentToMail</button><br>食用方法：</p><ul><li>下载插件，解压到 <code>usr/plugins/</code>目录中</li><li>修改文件夹名为CommentToMail</li><li>进入后台设置激活插件</li></ul><p><p></p></div></div></div></p>

Handsome主题文件目录结构

基础设置

自定义后台路径

文章中嵌入网页

时光机栏目增添额外内容

自定义音乐播放器音量

自定义CSS

文章标题居中

首页标题文字居中

文章日期居中

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

左上角博主信息羽毛背景

时光机内圆形头像

网站右侧滚动条样式

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

赞赏按钮跳动

标题悬停颜色

全站页面纯白

局部阴影

文章版式阴影化

获取焦点放大

首页文章列表悬停上浮

等距标签云

右侧列表导航栏图标颜色

赞赏按钮跳动

评论边框

粗斜体上色

开启全站变灰（黑白模式）

首页文章添加圆角效果

自定义字体

修改h1，h2标题背景颜色

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

网站背景添加海浪背景

自定义JavaScript

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

网页文字禁止复制

复制成功提示

复制文章带有文章版权

鼠标点击特效-爱心样式

网站加载完成提示

左上角网站FPS显示

动态网站标题

打字动画效果

添加复制弹窗

自定义body

自定义右键菜单美化

清空控制台

防止他人F12抓你代码

其他修改

博主文字介绍动态化

首页新年倒计时

给正文添加结束标识

正文下方添加版权声明

右侧添加人生倒计时（岁月不待人）

取消时光机文字首字放大效果

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

底部版权美化

页脚处添加网站运行时间

添加网站加载效果

在博客顶部添加心知天气

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

在文章顶部添加百度是否收录

插件推荐

鼠标美化插件HoerMouse

UserAgent插件

获取真实IP

邮箱评论通知插件CommentToMail

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho调试记录 部分一

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Typecho调试记录部分一