【handsome】美化备忘录

博主： HelloCode
发布时间：2022 年 04 月 13 日
2664 次浏览
12 条评论
13762字数
分类：杂七杂八
加载中

自定义CSS

主题标题居中

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

等距标签云

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

左侧边栏羽毛

/*羽毛_css*/
.dropdown.wrapper {
background:url(https://cdn.jsdelivr.net/gh/zimo6918/ZIMO6918-CDN/img/202202021631893.webp) right bottom no-repeat;
}

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

首页文章列表悬停上浮

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

赞赏按钮跳动

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

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

to {
    transform: scale(1.1);
}
}

头像鼠标悬停旋转放大

/*头像鼠标悬停旋转放大*/
.img-full {
border-radius: 50%;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}

评论边框

/*评论边框*/
.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;
}

气泡背景

参数设置

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

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

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

自定义JavaScript

复制版权提示

/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创，转载请注明出处！<br> 本文作者：HelloCode.<br>原文链接："+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
})
}}
/* 复制成功提示代码结束 */

彩色标签云及右栏数字

彩色标签云彩色标签云及右栏数字

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可
如果主题中启用了pjax，还需要将上面代码添加到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;
});
/*彩色标签云代码结束*/

禁F12

禁止F12

在开发者设置自定义JavaScript中添加下面代码

// 禁止调试
$(document).ready(function() {
    document.oncontextmenu = function() {
        return false;
    }
    document.onkeydown = function() {
        //f12
        if (window.event && window.event.keyCode == 123) {
            event.keyCode = 0;
            event.returnValue = false;
            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;
        }
    };
});

自定义右键

自定义输出body 尾部的HTML代码加入下面代码

<!-- 自定义右键 -->

<script src="https://www.hellocode.top/sweetalert2@8"></script>

<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="https://www.hellocode.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
        <li><a href="https://www.hellocode.top/links.html"><i class="fa fa-meh-o fa-fw"></i><span>友链申请</span></a></li>  
           <li><a href="https://www.hellocode.top/lyb.html"><i class="fa fa-pencil-square-o fa-fw"></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>

左侧栏小图标颜色

自定义 JavaScript 和pjax回调添加下面代码

<!--左侧彩色图标--> 
  let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#7887EB","#ABDEF3", "#6CC3E8", "#86DEF3", "#7887EB", "#9BA8F5","#7988EC","#B3BCF5","#ABDEF3","#B3BCD7","#91D7F3","#7988EC","#9CD2E9","#9BA8F5","#B3BCF5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});

鼠标点击特效

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

修改文件

响应时间和访客总数

将以下代码放到/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;
}
/*响应时间代码结束*/

然后将以下代码放到/usr/themes/handsome/component/sidebar.php内，找到博客信息添加即可

<!--访客总数代码开始-->
<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>
<!--响应耗时代码结束-->

百度收录检测

1.在模板post.php加入

<!--百度收录代码开始-->
<li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>
<!--百度收录代码结束-->

2.在post.php内加入（必须引入jquery）

<--百度收录代码开始-->
<script>
 function baidu_check(){
    $.getJSON("https://xiaochamao.com/api/baidu.php?domain="+window.location.href,function(result){ 
        if (result.code == 200) {
           $('#baidu_icon').removeClass('glyphicon-refresh');
           $('#baidu_icon').addClass('glyphicon-ok-circle');
           $('#baidu_result').text('百度已收录');
        }else if(result.code == 403){
           $('#baidu_icon').removeClass('glyphicon-refresh');
           $('#baidu_icon').addClass('glyphicon-info-sign');
           $('#baidu_result').text('百度未收录');
           baidu_push();
        }else{
            $('#baidu_icon').removeClass('glyphicon-refresh');
           $('#baidu_icon').addClass('glyphicon-remove-circle');
           $('#baidu_result').text('查询收录失败');
        }
    });
 }
 function baidu_push(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';  
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
 }
 baidu_check();
</script>
<--百度收录代码结束-->

3.pjax回调函数

/*百度收录代码开始*/
if((typeof baidu_check) !== "undefined"){
baidu_check();
}
/*百度收录代码结束*/

文末end

在主题文件post.php内，文章内容下方加上下面的代码

<div class="entry-content l-h-2x">
 <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
 <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div>

版权提示

在主题文件post.php内，文章内容下方加上下面的代码

<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span>  
<span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明：若无注明，本文皆<a href="<?php $this->options->rootUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
</div>

时间流逝

将以下代码加到/usr/themes/handsome/component/sidebar.php，在122行左右，放在<?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>
    <!-- 时间倒计时代码结束 -->

添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css

/* 时间流逝 */
.sidebar-count .content {
    padding: 15px
}
 
.sidebar-count .content .item {
    margin-bottom: 15px
}
 
.sidebar-count .content .item:last-child {
    margin-bottom: 0
}
 
.sidebar-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.sidebar-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-percentage {
    color: var(--info)
}

第三步-添加完成后,在到/usr/themes/handsome/assets/js里面创建名为timeinfo.js后把下面代码复制进去保存.

function init_life_time() {
            function getAsideLifeTime() {
                /* 当前时间戳 */
                let nowDate = +new Date();
                /* 今天开始时间戳 */
                let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
                /* 今天已经过去的时间 */
                let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
                /* 今天已经过去的时间比 */
                let todayPassHoursPercent = (todayPassHours / 24) * 100;
                $('#dayProgress .title span').html(parseInt(todayPassHours));
                $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
                $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
                /* 当前周几 */
                let weeks = {
                    0: 7,
                    1: 1,
                    2: 2,
                    3: 3,
                    4: 4,
                    5: 5,
                    6: 6
                };
                let weekDay = weeks[new Date().getDay()];
                let weekDayPassPercent = (weekDay / 7) * 100;
                $('#weekProgress .title span').html(weekDay);
                $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
                $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
                let year = new Date().getFullYear();
                let date = new Date().getDate();
                let month = new Date().getMonth() + 1;
                let monthAll = new Date(year, month, 0).getDate();
                let monthPassPercent = (date / monthAll) * 100;
                $('#monthProgress .title span').html(date);
                $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
                $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
                let yearPass = (month / 12) * 100;
                $('#yearProgress .title span').html(month);
                $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
                $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
            }
            getAsideLifeTime();
            setInterval(() => {
                getAsideLifeTime();
            }, 1000);
        }
        init_life_time()

添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部

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

加载动画

以下代码放置主题文件header.php内

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

  <!--加载动画-->
<bodyid="body"class="fix-padding skt-loading">
    <bodyid="body"class="fix-padding"style="overflow:hidden">
        <divid="PageLoading"style="z-index:99999999;">
            <divid="PageLoading-center">
                <divid="PageLoading-center-absolute">
                    <divclass="object2"id="object_four"></div>
                    <divclass="object2"id="object_three"></div>
                    <divclass="object2"id="object_two"></div>
                    <divclass="object2"id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>

以下代码放置后台-开发者设置-自定义javascript 内

$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});

底部版权美化

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

<!--左侧底部-->
<div class="github-badge">
  <span class="badge-subject">Copyright</span>
  <a href="https://www.hellocode.top"target="_blank">
    <spanclass="badge-value bg-blue">©2022 HelloCode.</span></a>
</div> | 
<divclass="github-badge">
  <spanclass="badge-subject">豫ICP备</span>
  <ahref="http://beian.miit.gov.cn/"target="_blank">
    <spanclass="badge-value bg-green">2020030958号</span></a>
</div>
<divclass="github-badge">
<imgsrc="https://cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png"style="float:left;"/>
  <spanclass="badge-subject">豫公网安备</span>
  <ahref="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41032602000132"target="_blank">
    <spanclass="badge-value bg-green">41032602000132号</span></a>
</div>

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

<!--右侧底部-->
<div class="github-badge">
  <spanclass="badge-subject">本站由</span>
  <ahref="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"target="_blank">
    <spanclass="badge-value bg-blue">又拍云提供CDN加速服务</span></a>
</div> | 
<divclass="github-badge">
  <spanclass="badge-subject">Theme by</span>
  <ahref="https://www.ihewro.com/"target="_blank">
    <spanclass="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行，覆盖原来的即可
[

](https://cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/20211105133747.png)

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

</footer>

隐藏左侧页面栏目

在handsome/component/aside.php删除下面代码

<!--独立页面pages-->
              <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                    <span class="nav-icon"><i data-feather="file"></i></span>
                  <span><?php _me("页面") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("页面") ?></span>
                    </a>
                  </li><!--这个字段不会被显示出来-->
                  <!--循环输出独立页面-->
                  <?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
                   <?php while($pages->next()): ?>
                       <?php if ($pages->fields->navbar == "hide") continue; ?>
                       <li><a href="<?php $pages->permalink(); ?>"><span><?php $pages->title(); ?></span></a></li>
                   <?php endwhile; ?>
                </ul>
              </li>
                <?php endif; ?>
                <?php if (@!in_array('links', Utils::checkArray($this->options->asideSetting))): ?>

更改一言接口

假如你是个古诗词爱好者，你可能希望将handsome自带的一言换为换成古诗词版的，刚好已经有人开发出这样的api了，我们直接调用即可。

今日诗词官网地址

我比较喜欢的一点是，它会自动获取访客ip，然后根据ip所在地、访问时间等信息来推荐相关的古诗词（比如如果你在上海的晚上打开网站，它就会推送有关江南、夜雨的古诗词），很妙。具体的推荐方式点我查看。

主题根目录下打开index.php，找到以下代码：

<small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();
              }else{
                  echo '加载中……';
                  echo '<script>
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
</script>';
              }
              ?></small>

更改为以下代码：

<small class="text-muted letterspacing indexWords"><span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></small>

当然，别忘了在主题后台启用主题增强功能->增强功能开关->启用一言接口

评论表情包添加

以下提到的JSON内容添加到/usr/themes/handsome/usr/OwO.json文件里面，压缩包内的文件夹放到/usr/themes/handsome/assets/img/emotion目录内

"QQ":{
    "type": "image",
    "name": "QQ",
    "container":[
      {
        "icon": "Y.qq1",
        "text": "QQ"
      },
      {
        "icon": "Y.qq2",
        "text": "QQ"
      },
      {
        "icon": "Y.qq3",
        "text": "QQ"
      },
      {
        "icon": "Y.qq4",
        "text": "QQ"
      },
      {
        "icon": "Y.qq5",
        "text": "QQ"
      },
      {
        "icon": "Y.qq6",
        "text": "QQ"
      },
      {
        "icon": "Y.qq7",
        "text": "QQ"
      },
      {
        "icon": "Y.qq8",
        "text": "QQ"
      },
      {
        "icon": "Y.qq9",
        "text": "QQ"
      },
      {
        "icon": "Y.qq10",
        "text": "QQ"
      },
      {
        "icon": "Y.qq11",
        "text": "QQ"
      },
      {
        "icon": "Y.qq12",
        "text": "QQ"
      },
      {
        "icon": "Y.qq13",
        "text": "QQ"
      },
      {
        "icon": "Y.qq14",
        "text": "QQ"
      },
      {
        "icon": "Y.qq15",
        "text": "QQ"
      },
      {
        "icon": "Y.qq17",
        "text": "QQ"
      },
      {
        "icon": "Y.qq18",
        "text": "QQ"
      },
      {
        "icon": "Y.qq19",
        "text": "QQ"
      },
      {
        "icon": "Y.qq20",
        "text": "QQ"
      },
      {
        "icon": "Y.qq23",
        "text": "QQ"
      },
      {
        "icon": "Y.qq24",
        "text": "QQ"
      },
      {
        "icon": "Y.qq25",
        "text": "QQ"
      },
      {
        "icon": "Y.qq26",
        "text": "QQ"
      },
      {
        "icon": "Y.qq27",
        "text": "QQ"
      },
      {
        "icon": "Y.qq28",
        "text": "QQ"
      },
      {
        "icon": "Y.qq29",
        "text": "QQ"
      },
      {
        "icon": "Y.qq30",
        "text": "QQ"
      },
      {
        "icon": "Y.qq31",
        "text": "QQ"
      },
      {
        "icon": "Y.qq32",
        "text": "QQ"
      },
      {
        "icon": "Y.qq33",
        "text": "QQ"
      },
      {
        "icon": "Y.qq34",
        "text": "QQ"
      },
      {
        "icon": "Y.qq35",
        "text": "QQ"
      },
      {
        "icon": "Y.qq36",
        "text": "QQ"
      },
      {
        "icon": "Y.qq37",
        "text": "QQ"
      },
      {
        "icon": "Y.qq38",
        "text": "QQ"
      },
      {
        "icon": "Y.qq39",
        "text": "QQ"
      },
      {
        "icon": "Y.qq40",
        "text": "QQ"
      },
      {
        "icon": "Y.qq41",
        "text": "QQ"
      },
      {
        "icon": "Y.qq42",
        "text": "QQ"
      },
      {
        "icon": "Y.qq43",
        "text": "QQ"
      },
      {
        "icon": "Y.qq44",
        "text": "QQ"
      },
      {
        "icon": "Y.qq45",
        "text": "QQ"
      },
      {
        "icon": "Y.qq46",
        "text": "QQ"
      },
      {
        "icon": "Y.qq47",
        "text": "QQ"
      },
      {
        "icon": "Y.qq48",
        "text": "QQ"
      },
      {
        "icon": "Y.qq49",
        "text": "QQ"
      },
      {
        "icon": "Y.qq50",
        "text": "QQ"
      },
      {
        "icon": "Y.qq51",
        "text": "QQ"
      },
      {
        "icon": "Y.qq52",
        "text": "QQ"
      },
      {
        "icon": "Y.qq53",
        "text": "QQ"
      },
      {
        "icon": "Y.qq54",
        "text": "QQ"
      },
      {
        "icon": "Y.qq55",
        "text": "QQ"
      },
      {
        "icon": "Y.qq56",
        "text": "QQ"
      },
      {
        "icon": "Y.qq57",
        "text": "QQ"
      },
      {
        "icon": "Y.qq58",
        "text": "QQ"
      },
      {
        "icon": "Y.qq59",
        "text": "QQ"
      },
      {
        "icon": "Y.qq60",
        "text": "QQ"
      },
      {
        "icon": "Y.qq61",
        "text": "QQ"
      },
      {
        "icon": "Y.qq62",
        "text": "QQ"
      },
      {
        "icon": "Y.qq63",
        "text": "QQ"
      },
      {
        "icon": "Y.qq64",
        "text": "QQ"
      },
      {
        "icon": "Y.qq65",
        "text": "QQ"
      },
      {
        "icon": "Y.qq66",
        "text": "QQ"
      },
      {
        "icon": "Y.qq67",
        "text": "QQ"
      },
      {
        "icon": "Y.qq68",
        "text": "QQ"
      },
      {
        "icon": "Y.qq69",
        "text": "QQ"
      },
      {
        "icon": "Y.qq70",
        "text": "QQ"
      },
      {
        "icon": "Y.qq71",
        "text": "QQ"
      },
      {
        "icon": "Y.qq72",
        "text": "QQ"
      },
      {
        "icon": "Y.qq73",
        "text": "QQ"
      },
      {
        "icon": "Y.qq74",
        "text": "QQ"
      },
      {
        "icon": "Y.qq75",
        "text": "QQ"
      },
      {
        "icon": "Y.qq76",
        "text": "QQ"
      },
      {
        "icon": "Y.qq77",
        "text": "QQ"
      },
      {
        "icon": "Y.qq78",
        "text": "QQ"
      },
      {
        "icon": "Y.qq79",
        "text": "QQ"
      },
      {
        "icon": "Y.qq80",
        "text": "QQ"  
      }
    ]
  },

微博

"微博":{
    "type": "image",
    "name": "weibo",
    "container":[
      {
        "icon": "Y.wb1",
        "text": "微博"
      },
      {
        "icon": "Y.wb2",
        "text": "微博"
      },
      {
        "icon": "Y.wb3",
        "text": "微博"
      },
      {
        "icon": "Y.wb4",
        "text": "微博"
      },
      {
        "icon": "Y.wb5",
        "text": "微博"
      },
      {
        "icon": "Y.wb6",
        "text": "微博"
      },
      {
        "icon": "Y.wb7",
        "text": "微博"
      },
      {
        "icon": "Y.wb8",
        "text": "微博"
      },
      {
        "icon": "Y.wb9",
        "text": "微博"
      },
      {
        "icon": "Y.wb10",
        "text": "微博"
      },
      {
        "icon": "Y.wb11",
        "text": "微博"
      },
      {
        "icon": "Y.wb12",
        "text": "微博"
      },
      {
        "icon": "Y.wb13",
        "text": "微博"
      },
      {
        "icon": "Y.wb14",
        "text": "微博"
      },
      {
        "icon": "Y.wb15",
        "text": "微博"
      },
      {
        "icon": "Y.wb16",
        "text": "微博"
      },
      {
        "icon": "Y.wb17",
        "text": "微博"
      },
      {
        "icon": "Y.wb18",
        "text": "微博"
      },
      {
        "icon": "Y.wb19",
        "text": "微博"
      },
      {
        "icon": "Y.wb20",
        "text": "微博"
      },
      {
        "icon": "Y.wb21",
        "text": "微博"
      },
      {
        "icon": "Y.wb22",
        "text": "微博"
      },
      {
        "icon": "Y.wb23",
        "text": "微博"
      },
      {
        "icon": "Y.wb24",
        "text": "微博"
      },
      {
        "icon": "Y.wb25",
        "text": "微博"
      },
      {
        "icon": "Y.wb26",
        "text": "微博"
      },
      {
        "icon": "Y.wb27",
        "text": "微博"
      },
      {
        "icon": "Y.wb28",
        "text": "微博"
      },
      {
        "icon": "Y.wb29",
        "text": "微博"
      },
      {
        "icon": "Y.wb30",
        "text": "微博"
      },
      {
        "icon": "Y.wb31",
        "text": "微博"
      },
      {
        "icon": "Y.wb32",
        "text": "微博"
      },
      {
        "icon": "Y.wb33",
        "text": "微博"
      },
      {
        "icon": "Y.wb34",
        "text": "微博"
      },
      {
        "icon": "Y.wb35",
        "text": "微博"
      },
      {
        "icon": "Y.wb36",
        "text": "微博"
      },
      {
        "icon": "Y.wb37",
        "text": "微博"
      },
      {
        "icon": "Y.wb38",
        "text": "微博"
      },
      {
        "icon": "Y.wb39",
        "text": "微博"
      },
      {
        "icon": "Y.wb40",
        "text": "微博"
      },
      {
        "icon": "Y.wb41",
        "text": "微博"
      },
      {
        "icon": "Y.wb42",
        "text": "微博"
      },
      {
        "icon": "Y.wb43",
        "text": "微博"
      },
      {
        "icon": "Y.wb44",
        "text": "微博"
      },
      {
        "icon": "Y.wb45",
        "text": "微博"
      },
      {
        "icon": "Y.wb46",
        "text": "微博"
      },
      {
        "icon": "Y.wb47",
        "text": "微博"
      },
      {
        "icon": "Y.wb48",
        "text": "微博"
      },
      {
        "icon": "Y.wb49",
        "text": "微博"
      },
      {
        "icon": "Y.wb50",
        "text": "微博"
      },
      {
        "icon": "Y.wb51",
        "text": "微博"
      },
      {
        "icon": "Y.wb52",
        "text": "微博"
      },
      {
        "icon": "Y.wb53",
        "text": "微博"
      },
      {
        "icon": "Y.wb54",
        "text": "微博"
      },
      {
        "icon": "Y.wb55",
        "text": "微博"
      },
      {
        "icon": "Y.wb56",
        "text": "微博"
      },
      {
        "icon": "Y.wb57",
        "text": "微博"
      },
      {
        "icon": "Y.wb58",
        "text": "微博"
      },
      {
        "icon": "Y.wb59",
        "text": "微博"
      },
      {
        "icon": "Y.wb60",
        "text": "微博"
      },
      {
        "icon": "Y.wb61",
        "text": "微博"
      },
      {
        "icon": "Y.wb62",
        "text": "微博"
      },
      {
        "icon": "Y.wb63",
        "text": "微博"
      },
      {
        "icon": "Y.wb64",
        "text": "微博"
      },
      {
        "icon": "Y.wb65",
        "text": "微博"
      },
      {
        "icon": "Y.wb66",
        "text": "微博"
      },
      {
        "icon": "Y.wb67",
        "text": "微博"
      },
      {
        "icon": "Y.wb68",
        "text": "微博"
      },
      {
        "icon": "Y.wb69",
        "text": "微博"
      },
      {
        "icon": "Y.wb70",
        "text": "微博"
      },
      {
        "icon": "Y.wb71",
        "text": "微博"
      },
      {
        "icon": "Y.wb72",
        "text": "微博"
      },
      {
        "icon": "Y.wb73",
        "text": "微博"
      },
      {
        "icon": "Y.wb74",
        "text": "微博"
      },
      {
        "icon": "Y.wb75",
        "text": "微博"
      },
      {
        "icon": "Y.wb76",
        "text": "微博"
      },
      {
        "icon": "Y.wb77",
        "text": "微博"
      },
      {
        "icon": "Y.wb78",
        "text": "微博"
      },
      {
        "icon": "Y.wb79",
        "text": "微博"
      },
      {
        "icon": "Y.wb80",
        "text": "微博"
      },
      {
        "icon": "Y.wb81",
        "text": "微博"
      },
      {
        "icon": "Y.wb82",
        "text": "微博"
      },
      {
        "icon": "Y.wb83",
        "text": "微博"
      },
      {
        "icon": "Y.wb84",
        "text": "微博"
      },
      {
        "icon": "Y.wb85",
        "text": "微博"
      },
      {
        "icon": "Y.wb86",
        "text": "微博"
      },
      {
        "icon": "Y.wb87",
        "text": "微博"
      },
      {
        "icon": "Y.wb88",
        "text": "微博"
      },
      {
        "icon": "Y.wb89",
        "text": "微博"
      },
      {
        "icon": "Y.wb90",
        "text": "微博"
      },
      {
        "icon": "Y.wb91",
        "text": "微博"
      },
      {
        "icon": "Y.wb92",
        "text": "微博"
      },
      {
        "icon": "Y.wb93",
        "text": "微博"
      },
      {
        "icon": "Y.wb94",
        "text": "微博"
      },
      {
        "icon": "Y.wb95",
        "text": "微博"
      },
      {
        "icon": "Y.wb96",
        "text": "微博"
      },
      {
        "icon": "Y.wb97",
        "text": "微博"
      },
      {
        "icon": "Y.wb98",
        "text": "微博"
      },
      {
        "icon": "Y.wb99",
        "text": "微博"
            },
      {
        "icon": "Y.wb100",
        "text": "微博"
      },
      {
        "icon": "Y.wb101",
        "text": "微博"
      },
      {
        "icon": "Y.wb102",
        "text": "微博"
      },
      {
        "icon": "Y.wb103",
        "text": "微博"
      },
      {
        "icon": "Y.wb104",
        "text": "微博"
      },
      {
        "icon": "Y.wb105",
        "text": "微博"
      },
      {
        "icon": "Y.wb106",
        "text": "微博"
      },
      {
        "icon": "Y.wb107",
        "text": "微博"
      },
      {
        "icon": "Y.wb108",
        "text": "微博"
      },
      {
        "icon": "Y.wb109",
        "text": "微博"
      },
      {
        "icon": "Y.wb110",
        "text": "微博"
      },
      {
        "icon": "Y.wb111",
        "text": "微博"
      },
      {
        "icon": "Y.wb112",
        "text": "微博"
      }
    ]
  },

bilibili

"哔哩哔哩":{
    "type": "image",
    "name": "bilibili",
    "container":[
      {
        "icon": "baiyan",
        "text": "白眼"
      },
      {
        "icon": "bishi",
        "text": "鄙视"
      },
      {
        "icon": "bizui",
        "text": "闭嘴"
      },
      {
        "icon": "chan",
        "text": "馋"
      },
      {
        "icon": "daku",
        "text": "大哭"
      },
      {
        "icon": "dalao",
        "text": "大佬"
      },
      {
        "icon": "dalian",
        "text": "打脸"
      },{
        "icon": "dianzan",
        "text": "点赞"
      },{
        "icon": "doge",
        "text": "doge"
      },
      {
        "icon": "facai",
        "text": "发财"
      },{
        "icon": "fadai",
        "text": "发呆"
      },{
        "icon": "fanu",
        "text": "发怒"
      },{
        "icon": "ganga",
        "text": "尴尬"
      },{
        "icon": "guzhang",
        "text": "鼓掌"
      },{
        "icon": "haixiu",
        "text": "害羞"
      },{
        "icon": "heirenwenhao",
        "text": "黑人问号"
      },{
        "icon": "huaixiao",
        "text": "坏笑"
      },{
        "icon": "jingxia",
        "text": "惊吓"
      },{
        "icon": "keai",
        "text": "可爱"
      },{
        "icon": "koubi",
        "text": "抠鼻"
      },{
        "icon": "kun",
        "text": "困"
      },{
        "icon": "liubixie",
        "text": "流鼻血"
      },{
        "icon": "liuhan",
        "text": "流汗"
      },
      {
        "icon": "miantian",
        "text": "腼腆"
      },{
        "icon": "nanguo",
        "text": "难过"
      },{
        "icon": "outu",
        "text": "呕吐"
      },{
        "icon": "qinqin",
        "text": "亲亲"
      },{
        "icon": "se",
        "text": "色"
      },{
        "icon": "shengbing",
        "text": "生病"
      },{
        "icon": "shengqi",
        "text": "生气"
      },{
        "icon": "shuizhao",
        "text": "睡着"
      },{
        "icon": "sikao",
        "text": "思考"
      },{
        "icon": "tiaopi",
        "text": "调皮"
      },{
        "icon": "touxiao",
        "text": "偷笑"
      },{
        "icon": "tuxie",
        "text": "吐血"
      },{
        "icon": "weiqu",
        "text": "委屈"
      },{
        "icon": "weixiao",
        "text": "微笑"
      },{
        "icon": "wunai",
        "text": "无奈"
      },{
        "icon": "xiaoku",
        "text": "笑哭"
      },{
        "icon": "xieyanxiao",
        "text": "斜眼笑"
      },{
        "icon": "yiwen",
        "text": "疑问"
      },{
        "icon": "yun",
        "text": "晕"
      },{
        "icon": "zaijian",
        "text": "再见"
      },{
        "icon": "zhuakuang",
        "text": "抓狂"
      }
    ]
  },

表情包显示过大解决方法

在自定义CSS处添加如下代码即可，注意emotion-后面即为表情名字，即OwO.json文件里的name。
每个表情包都要写一个css添加进去才可以。以本博客为例：

/* Emoji大小调整 */
.emotion-QQ {width:35px;}
.emotion-bilibili {width:35px;}
.emotion-weibo {width:35px;}

插件

评论邮箱推送

CommentToMail

美化邮件模板样式

owner

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;">
    <div style="background-image: url(https://www.hellocode.top/mail.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
    <div style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:10px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">
        <h2 style="font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #ff7272;font-weight: bold;"></span>您的<a style="text-decoration:none;color: #ff7272;" href="{permalink}" target="_blank">《{title}》</a>有了新的回复：</h2>
        <div style="padding:0 12px 0 12px;margin-top:18px">
            <p><strong>{author}</strong> 给您的评论：</p>
            <style type="text/css">
                .comment>img{margin: 0px 6px 5px 6px;width: 25px;}
            </style>
            <p class="comment" style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">{text}</p>
            <p>详细信息：</p>
            <p style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">IP：{ip}<br />邮箱：<a style="text-decoration:none;color: #ff7272;" href="mailto:{comment_author_mail}">{mail}</a><br />状态：{status} [<a style="text-decoration:none;color: #ff7272;" href='{manage}' target='_blank'>管理评论</a>]</p>
        </div>
    </div>
    <a style="text-decoration: none;color: rgb(255, 255, 255);width: 40%;text-align: center;background-color: rgb(255, 114, 114);height: 40px;line-height: 40px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);display: block;margin: auto;" href="{permalink}" target="_blank">查看回复的完整內容</a>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center; padding-bottom: 1px;">
        <p>©2022-2023 Copyright {siteTitle}</p>
    </div>
</div>

guest

<div style="width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;padding-bottom: 5px;">
    <div style="background-image: url(https://www.hellocode.top/mail.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;"></div>
    <div style="width: 200px;height: 40px;background-color: rgb(255, 114, 114);margin-top: -20px;margin-left: 20px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);color: rgb(255, 255, 255);text-align: center;line-height: 40px;">Dear: {author_p}</div>
    <div style="background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:30px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;">  
        <h2 style="font-size:14px;font-weight:normal;padding:13px 0 10px 8px;"><span style="color: #12ADDB;font-weight: bold;"></span>您在<a style="text-decoration:none;color: #ff7272;" href="{permalink}" target="_blank">《{title}》</a>的评论有了新的回复：</h2>  
        <div style="padding:0 12px 0 12px;margin-top:18px">
            <style type="text/css">
                .comment>img{margin: 0px 6px 5px 6px;width: 25px;}
            </style>
            <p>您的评论：</p>  
            <p class="comment" style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">{text_p}</p>  
            <p><strong>{author}</strong> 给您的回复：</p>  
            <p class="comment" style="background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0">{text}</p>  
        </div>  
    </div>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;word-wrap:break-word;margin-top: -30px;">
        <p style="padding:20px;">萤火虫消失之后，那光的轨迹仍久久地印在我的脑际。那微弱浅淡的光点，仿佛迷失方向的魂灵，在漆黑厚重的夜幕中彷徨。——《挪威的森林》村上春树</p>
    </div>
    <a style="text-decoration:none; color:#FFF;width: 40%;text-align: center;background-color:#ff7272;height: 40px;line-height: 35px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.30);margin: -10px auto;display: block;" href="{permalink}" target="_blank">查看回复的完整內容</a>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;margin-top: 30px;">
        <p>本邮件为系统自动发送，请勿直接回复~</p>
    </div>
    <div style="color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;padding-bottom: 1px;">
        <p>©2022-2023 Copyright {siteTitle}</p>
    </div>
</div>

异常友链检测插件

检测原理是检查 URL状态码是否是 200，以此来判断链接状态。

插件检测不一定准确，可能会误判为失效链接。建议点开链接确认一下再做处理。

限于前端检测的缘故，服务端禁止跨域也会返回错误
友链是HTTPS链接就不要填写HTTP链接（避免301）
避免友链通过第三方页面跳转（避免检测跳转页）
浏览器当前网络下站点响应时间过长会有失效报告

开源地址：https://github.com/ethanzhao2001/AbnormalLinks-For-Typecho

自动生成Sitemap插件

生成sitemap包含首页、独立页面、分类、标签、文章

推送百度搜索资源平台，目前仅支持普通收录推送

不支持发布文章自动更新sitemap及自动推送，可能会影响文章发布速度

开源地址：https://github.com/ethanzhao2001/Sitemap-For-Typecho

速度优化

CDN

外部库公共CDN加速

首先是主题的CDN加速。在Handsome主题下,可以选择公共库，我选择字节跳动的CDN，貌似相对比较快。

当然这个库是主题的使用了jquery、bootstrap、vditor、mdui、mathjax外部库（体积较大>60kb）

静态资源CDN

主题本地静态资源自定义cdn加速，如果自己有CDN服务器的话，可以自己搭建。在使用说明里面都有细说方法。

如果没有的话，可以找这两个Handsome 静态资源CDN加速（已更新）、Handsome主题静态资源CDN加速服务【更新至8.4.1】借用一下。而且支持自定义，非常感谢两个大佬，在此谢过。

END

本文作者： HelloCode 文章标题：【handsome】美化备忘录
本文地址：https://www.hellocode.top/archives/15/
版权说明：若无注明，本文皆HelloCode原创，转载请保留文章出处。

最后修改：2022 年 05 月 23 日

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

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

12 条评论

张
May 24th, 2022 at 11:03 am

很漂亮呀

回复
1. HelloCode
  May 24th, 2022 at 11:10 am
  
  @张
  
  回复
泡芙
May 16th, 2022 at 05:14 pm

这个表情包我安进去了为啥没有用呜呜呜呜

回复
1. HelloCode
  May 16th, 2022 at 05:15 pm
  
  @泡芙
  
  可能是缓存？或者是你没装好，清除浏览器缓存以后看看
  
  回复
  1. 泡芙
    May 16th, 2022 at 05:18 pm
    
    @HelloCode
    
    啊！好了！清除一下缓存就好了呢！
    
    回复
    
    HelloCode
    May 16th, 2022 at 05:19 pm
    
    @泡芙
    
    好了就好
    
    回复
泡芙
May 16th, 2022 at 04:56 pm

哎呀！好厉害！让我看看！

回复
1. HelloCode
  May 16th, 2022 at 04:57 pm
  
  @泡芙
  
  哈哈，一起学习！！
  
  回复
Najest Yang
April 17th, 2022 at 08:00 pm

哔哩哔哩表情包地址好像不对

回复
1. HelloCode
  April 17th, 2022 at 08:03 pm
  
  @Najest Yang
  
  确实，当时弄错了，已修改
  
  回复
静离
April 16th, 2022 at 09:41 pm

来看看

回复
1. HelloCode.
  April 16th, 2022 at 09:46 pm
  
  @静离
  
  欢迎欢迎
  
  回复

潜心学习的道士
最后的优化就是%映射，看作一个循环线性表吧。
小有名气的匿名人士
你好，这里的资源要去哪里下载呀
zz
hao lihai
海拥资源库
已添加贵站名称：海拥资源库简介：神级源码资源网，堪称程序员的充...
单调
就是前端页面axios的post请求报404的错误是怎么回事

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

【handsome】美化备忘录

HelloCode • 2022 年 04 月 13 日

<h2>自定义CSS</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-8086e4130dfb3f24080eb99dddf6ec8489" aria-expanded="true"><div class="accordion-toggle"><span>主题标题居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8086e4130dfb3f24080eb99dddf6ec8489" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/*主题标题居中*/
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-84ea9c803540968991c24ed2a9974d2b9" aria-expanded="true"><div class="accordion-toggle"><span>等距标签云</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-84ea9c803540968991c24ed2a9974d2b9" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/*词云等距美化*/
#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-10eaa2b77157f61c2157a63d916780929" aria-expanded="true"><div class="accordion-toggle"><span>左侧边栏羽毛</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-10eaa2b77157f61c2157a63d916780929" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/*羽毛_css*/
.dropdown.wrapper {
background:url(https://cdn.jsdelivr.net/gh/zimo6918/ZIMO6918-CDN/img/202202021631893.webp) right bottom no-repeat;
}</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-1ea9e4f1acb7e1578b1e2a438d0037e614" aria-expanded="true"><div class="accordion-toggle"><span>logo扫光</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-1ea9e4f1acb7e1578b1e2a438d0037e614" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/* 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-14980dbd058180c58739892b6ceba8e075" aria-expanded="true"><div class="accordion-toggle"><span>首页文章列表悬停上浮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-14980dbd058180c58739892b6ceba8e075" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}</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-e0f7c4b6527fdf01a3230ff29f67ba3419" aria-expanded="true"><div class="accordion-toggle"><span>赞赏按钮跳动</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e0f7c4b6527fdf01a3230ff29f67ba3419" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/*赞赏按钮跳动*/
.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-3802b3a4871d1c1004a999969092316e35" aria-expanded="true"><div class="accordion-toggle"><span>头像鼠标悬停旋转放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3802b3a4871d1c1004a999969092316e35" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/*头像鼠标悬停旋转放大*/
.img-full {
border-radius: 50%;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}</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-174e68ff9ce511e5d514dfa35c6925cc33" aria-expanded="true"><div class="accordion-toggle"><span>评论边框</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-174e68ff9ce511e5d514dfa35c6925cc33" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/*评论边框*/
.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-b5791e535c1267e3e4c45f7321c22e903" aria-expanded="true"><div class="accordion-toggle"><span>粗斜体上色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-b5791e535c1267e3e4c45f7321c22e903" class="collapse collapse-content"><p></p></p><pre><code class="lang-css">/* 粗斜体上色 */
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-a605ff373fa9e64890caf2e28bbd425492" aria-expanded="true"><div class="accordion-toggle"><span>气泡背景</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a605ff373fa9e64890caf2e28bbd425492" class="collapse collapse-content"><p></p></p><p>参数设置</p><pre><code>id: '',                           //容器ID
    num: 100,                        // 个数
    start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
    radius_min: 1,                   // 初始半径最小值
    radius_max: 2,                   // 初始半径最大值
    radius_add_min: .3,               // 半径增加最小值
    radius_add_max: .5,               // 半径增加最大值
    opacity_min: 0.3,                 // 初始透明度最小值
    opacity_max: 0.5,                // 初始透明度最大值
    opacity_prev_min: .003,            // 透明度递减值最小值
    opacity_prev_max: .005,            // 透明度递减值最大值
    light_min: 40,                 // 颜色亮度最小值
    light_max: 70,                 // 颜色亮度最大值
    is_same_color: false,          //泡泡颜色是否相同
    background:&quot;#f1f3f4&quot;           //背景颜色</code></pre><p>在 开发者设置 自定义输出body 尾部的HTML代码中添加下面代码，需要修改可参考上方参数</p><pre><code class="lang-html">&lt;div id=&quot;bubble&quot;&gt;&lt;/div&gt;&lt;script&gt;class BGBubble{constructor(i){this.defaultOpts={id:&quot;&quot;,num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:&quot;#f1f3f4&quot;},&quot;[object Object]&quot;==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&amp;&amp;this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity&lt;=0&amp;&amp;this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement(&quot;canvas&quot;),this.ctx=this.canvas.getContext(&quot;2d&quot;),this.canvas.style.display=&quot;block&quot;,this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position=&quot;fixed&quot;,this.canvas.style.top=&quot;0&quot;,this.canvas.style.left=&quot;0&quot;,this.canvas.style.zIndex=&quot;-1&quot;,document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=&gt;{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length&lt;this.userOpts.num&amp;&amp;Math.random()&lt;this.userOpts.start_probability&amp;&amp;this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=&gt;i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=&gt;this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble(&quot;bubble&quot;);bubbleDemo.createCanvas(),bubbleDemo.start();&lt;/script&gt;</code></pre><p><p></p></div></div></div></p><hr><h2>自定义JavaScript</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-04b41b31902b08a67bae8041521d9c7311" aria-expanded="true"><div class="accordion-toggle"><span>复制版权提示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-04b41b31902b08a67bae8041521d9c7311" class="collapse collapse-content"><p></p></p><pre><code class="lang-javascript">/* 复制成功提示代码开始 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$(&quot;body&quot;).bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: &quot;尊重原创，转载请注明出处！&lt;br&gt; 本文作者：HelloCode.&lt;br&gt;原文链接：&quot;+sitesurl,
title: &quot;复制成功&quot;,
type: &quot;warning&quot;,
autoHide: !1,
time: &quot;3000&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-6cb9d0ac6ac3bfede4236b655b64328d35" aria-expanded="true"><div class="accordion-toggle"><span>彩色标签云彩色标签云及右栏数字</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6cb9d0ac6ac3bfede4236b655b64328d35" class="collapse collapse-content"><p></p></p><p>打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可<br>如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中。</p><pre><code class="lang-javascript">/*彩色标签云代码开始*/
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;
});
/*彩色标签云代码结束*/</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-8013a4627cf4dde66eca58aec67d1a1575" aria-expanded="true"><div class="accordion-toggle"><span>禁止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-8013a4627cf4dde66eca58aec67d1a1575" class="collapse collapse-content"><p></p></p><p>在 开发者设置 自定义JavaScript中添加下面代码</p><pre><code class="lang-html">// 禁止调试
$(document).ready(function() {
    document.oncontextmenu = function() {
        return false;
    }
    document.onkeydown = function() {
        //f12
        if (window.event &amp;&amp; window.event.keyCode == 123) {
            event.keyCode = 0;
            event.returnValue = false;
            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;
        }
    };
});</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-139c0db95d143ee557b5ef5b7bc8404e9" aria-expanded="true"><div class="accordion-toggle"><span>自定义右键</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-139c0db95d143ee557b5ef5b7bc8404e9" class="collapse collapse-content"><p></p></p><p>自定义输出body 尾部的HTML代码加入下面代码</p><pre><code class="lang-html">&lt;!-- 自定义右键 --&gt;

&lt;script src=&quot;https://www.hellocode.top/sweetalert2@8&quot;&gt;&lt;/script&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;https://www.hellocode.top/&quot;&gt;&lt;i class=&quot;fa fa-home fa-fw&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 fa-fw&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 fa-fw&quot;&gt;&lt;/i&gt;&lt;span&gt;刷新&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;https://www.hellocode.top/links.html&quot;&gt;&lt;i class=&quot;fa fa-meh-o fa-fw&quot;&gt;&lt;/i&gt;&lt;span&gt;友链申请&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;  
           &lt;li&gt;&lt;a href=&quot;https://www.hellocode.top/lyb.html&quot;&gt;&lt;i class=&quot;fa fa-pencil-square-o fa-fw&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);

&lt;!--响应耗时代码开始--&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;
&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-9eb5f24c0d7f59952e8452c6061fb44796" aria-expanded="true"><div class="accordion-toggle"><span>百度收录检测</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9eb5f24c0d7f59952e8452c6061fb44796" class="collapse collapse-content"><p></p></p><p>1.在模板<code>post.php</code>加入</p><pre><code class="lang-html">&lt;!--百度收录代码开始--&gt;
&lt;li class=&quot;meta-baidu&quot;&gt;&lt;span class=&quot;post-icons&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-refresh&quot; id=&quot;baidu_icon&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class=&quot;meta-value&quot; id=&quot;baidu_result&quot;&gt;加载中&lt;/span&gt;&lt;/li&gt;
&lt;!--百度收录代码结束--&gt;</code></pre><p>2.在<code>post.php</code>内加入（必须引入jquery）</p><pre><code class="lang-javascript">&lt;--百度收录代码开始--&gt;
&lt;script&gt;
 function baidu_check(){
    $.getJSON(&quot;https://xiaochamao.com/api/baidu.php?domain=&quot;+window.location.href,function(result){ 
        if (result.code == 200) {
           $('#baidu_icon').removeClass('glyphicon-refresh');
           $('#baidu_icon').addClass('glyphicon-ok-circle');
           $('#baidu_result').text('百度已收录');
        }else if(result.code == 403){
           $('#baidu_icon').removeClass('glyphicon-refresh');
           $('#baidu_icon').addClass('glyphicon-info-sign');
           $('#baidu_result').text('百度未收录');
           baidu_push();
        }else{
            $('#baidu_icon').removeClass('glyphicon-refresh');
           $('#baidu_icon').addClass('glyphicon-remove-circle');
           $('#baidu_result').text('查询收录失败');
        }
    });
 }
 function baidu_push(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';  
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName(&quot;script&quot;)[0];
    s.parentNode.insertBefore(bp, s);
 }
 baidu_check();
&lt;/script&gt;
&lt;--百度收录代码结束--&gt;</code></pre><p>3.pjax回调函数</p><pre><code class="lang-javascript">/*百度收录代码开始*/
if((typeof baidu_check) !== &quot;undefined&quot;){
baidu_check();
}
/*百度收录代码结束*/</code></pre><p><p></p></div></div></div></p><h3>文末end</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-9b409b4a150fb00b2c282fd5c7a4a97b93" aria-expanded="true"><div class="accordion-toggle"><span>文末end</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9b409b4a150fb00b2c282fd5c7a4a97b93" class="collapse collapse-content"><p></p></p><p>在主题文件<code>post.php</code>内，文章内容下方加上下面的代码</p><pre><code class="lang-html">&lt;div class=&quot;entry-content l-h-2x&quot;&gt;
 &lt;div style=&quot;border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;&quot;&gt;
 &lt;span style=&quot;background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;&quot;&gt;END&lt;/span&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-71c84729d03edfcc374dd91a0ec3e6a058" aria-expanded="true"><div class="accordion-toggle"><span>版权提示</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-71c84729d03edfcc374dd91a0ec3e6a058" class="collapse collapse-content"><p></p></p><p>在主题文件<code>post.php</code>内，文章内容下方加上下面的代码</p><pre><code class="lang-html">&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;span&gt;本文作者：&lt;a href=&quot;&lt;?php $this-&gt;author-&gt;permalink(); ?&gt;&quot; rel=&quot;author&quot;&gt; &lt;?php $this-&gt;author(); ?&gt;&lt;/a&gt;&lt;/span&gt;  
&lt;span&gt;文章标题：&lt;a href=&quot;&lt;?php $this-&gt;permalink() ?&gt;&quot;&gt;&lt;?php $this-&gt;title() ?&gt;&lt;/a&gt;&lt;br&gt;&lt;/span&gt;
&lt;span&gt;本文地址：&lt;a href=&quot;&lt;?php $this-&gt;permalink() ?&gt;&quot;&gt;&lt;?php $this-&gt;permalink() ?&gt;&lt;/a&gt;&lt;br&gt;&lt;/span&gt;
&lt;span&gt;版权说明：若无注明，本文皆&lt;a href=&quot;&lt;?php $this-&gt;options-&gt;rootUrl(); ?&gt;&quot; target=&quot;_blank&quot; data-original-title=&quot;&lt;?php $this-&gt;options-&gt;title() ?&gt;&quot;&gt;&lt;?php $this-&gt;options-&gt;title() ?&gt;&lt;/a&gt;原创，转载请保留文章出处。&lt;/span&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-8e46cf419e8aee9f0c729ef4ac7ce79f93" aria-expanded="true"><div class="accordion-toggle"><span>时间流逝</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8e46cf419e8aee9f0c729ef4ac7ce79f93" class="collapse collapse-content"><p></p></p><p>将以下代码加到<code>/usr/themes/handsome/component/sidebar.php</code>，在122行左右，放在<code>&lt;?php endif; ?&gt;</code>之后</p><pre><code class="lang-html">&lt;!-- 时间倒计时代码开始 --&gt;
    &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>添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css</p><pre><code class="lang-css">/* 时间流逝 */
.sidebar-count .content {
    padding: 15px
}
 
.sidebar-count .content .item {
    margin-bottom: 15px
}
 
.sidebar-count .content .item:last-child {
    margin-bottom: 0
}
 
.sidebar-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.sidebar-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-percentage {
    color: var(--info)
}</code></pre><p>第三步-添加完成后,在到/usr/themes/handsome/assets/js里面创建名为timeinfo.js后把下面代码复制进去保存.</p><pre><code class="lang-javascript">function init_life_time() {
            function getAsideLifeTime() {
                /* 当前时间戳 */
                let nowDate = +new Date();
                /* 今天开始时间戳 */
                let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
                /* 今天已经过去的时间 */
                let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
                /* 今天已经过去的时间比 */
                let todayPassHoursPercent = (todayPassHours / 24) * 100;
                $('#dayProgress .title span').html(parseInt(todayPassHours));
                $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
                $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
                /* 当前周几 */
                let weeks = {
                    0: 7,
                    1: 1,
                    2: 2,
                    3: 3,
                    4: 4,
                    5: 5,
                    6: 6
                };
                let weekDay = weeks[new Date().getDay()];
                let weekDayPassPercent = (weekDay / 7) * 100;
                $('#weekProgress .title span').html(weekDay);
                $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
                $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
                let year = new Date().getFullYear();
                let date = new Date().getDate();
                let month = new Date().getMonth() + 1;
                let monthAll = new Date(year, month, 0).getDate();
                let monthPassPercent = (date / monthAll) * 100;
                $('#monthProgress .title span').html(date);
                $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
                $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
                let yearPass = (month / 12) * 100;
                $('#yearProgress .title span').html(month);
                $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
                $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
            }
            getAsideLifeTime();
            setInterval(() =&gt; {
                getAsideLifeTime();
            }, 1000);
        }
        init_life_time()</code></pre><p>添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部</p><pre><code class="lang-html">&lt;!-- 时间流逝 --&gt;  
&lt;script src=&quot;https://你的域名/usr/themes/handsome/assets/js/timeinfo.js&quot;&gt;&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-5f4441569cd3aff63162ee5889b640c087" aria-expanded="true"><div class="accordion-toggle"><span>加载动画</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5f4441569cd3aff63162ee5889b640c087" class="collapse collapse-content"><p></p></p><p>以下代码放置 主题文件header.php内</p><pre><code class="lang-html">&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;bodyid=&quot;body&quot;class=&quot;fix-padding skt-loading&quot;&gt;
    &lt;bodyid=&quot;body&quot;class=&quot;fix-padding&quot;style=&quot;overflow:hidden&quot;&gt;
        &lt;divid=&quot;PageLoading&quot;style=&quot;z-index:99999999;&quot;&gt;
            &lt;divid=&quot;PageLoading-center&quot;&gt;
                &lt;divid=&quot;PageLoading-center-absolute&quot;&gt;
                    &lt;divclass=&quot;object2&quot;id=&quot;object_four&quot;&gt;&lt;/div&gt;
                    &lt;divclass=&quot;object2&quot;id=&quot;object_three&quot;&gt;&lt;/div&gt;
                    &lt;divclass=&quot;object2&quot;id=&quot;object_two&quot;&gt;&lt;/div&gt;
                    &lt;divclass=&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>以下代码放置 后台-开发者设置-自定义javascript 内</p><pre><code class="lang-javascript">$(function(){
$(&quot;#PageLoading&quot;).fadeOut(400);
$(&quot;#body&quot;).css('overflow','');
});</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-359fc387787073bfa5a721b7d375293199" aria-expanded="true"><div class="accordion-toggle"><span>底部版权美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-359fc387787073bfa5a721b7d375293199" class="collapse collapse-content"><p></p></p><p>左侧底部放在 后台-开发者设置-博客底部左侧信息</p><pre><code class="lang-html">&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.hellocode.top&quot;target=&quot;_blank&quot;&gt;
    &lt;spanclass=&quot;badge-value bg-blue&quot;&gt;©2022 HelloCode.&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt; | 
&lt;divclass=&quot;github-badge&quot;&gt;
  &lt;spanclass=&quot;badge-subject&quot;&gt;豫ICP备&lt;/span&gt;
  &lt;ahref=&quot;http://beian.miit.gov.cn/&quot;target=&quot;_blank&quot;&gt;
    &lt;spanclass=&quot;badge-value bg-green&quot;&gt;2020030958号&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;divclass=&quot;github-badge&quot;&gt;
&lt;imgsrc=&quot;https://cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/bei.png&quot;style=&quot;float:left;&quot;/&gt;
  &lt;spanclass=&quot;badge-subject&quot;&gt;豫公网安备&lt;/span&gt;
  &lt;ahref=&quot;http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41032602000132&quot;target=&quot;_blank&quot;&gt;
    &lt;spanclass=&quot;badge-value bg-green&quot;&gt;41032602000132号&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre><p>右侧底部放在 后台-开发者设置-博客底部右侧信息</p><pre><code class="lang-html">&lt;!--右侧底部--&gt;
&lt;div class=&quot;github-badge&quot;&gt;
  &lt;spanclass=&quot;badge-subject&quot;&gt;本站由&lt;/span&gt;
  &lt;ahref=&quot;https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral&quot;target=&quot;_blank&quot;&gt;
    &lt;spanclass=&quot;badge-value bg-blue&quot;&gt;又拍云提供CDN加速服务&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt; | 
&lt;divclass=&quot;github-badge&quot;&gt;
  &lt;spanclass=&quot;badge-subject&quot;&gt;Theme by&lt;/span&gt;
  &lt;ahref=&quot;https://www.ihewro.com/&quot;target=&quot;_blank&quot;&gt;
    &lt;spanclass=&quot;badge-value bg-orange&quot;&gt;Handsome&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre><p>css放在 主题设置-自定义css内</p><pre><code class="lang-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
}</code></pre><p>把下面代码放在主题目录usr/themes/handsome/component/footer.php内大概在177行，覆盖原来的即可<br>[<img src="https://cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/20211105133747.png" alt="" title=""style=""></p><p>](<span class="external-link"><a class="no-external-link" href="https://cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/20211105133747.png" target="_blank"><i data-feather="external-link"></i>https://cdn-qh.oss-cn-guangzhou.aliyuncs.com/bkimg/20211105133747.png</a></span>)</p><pre><code class="lang-html">&lt;footerid=&quot;footer&quot;class=&quot;app-footer&quot;role=&quot;footer&quot;&gt;
    &lt;divclass=&quot;wrapper bg-light&quot;&gt;
      &lt;spanclass=&quot;pull-right hidden-xs text-ellipsis&quot;&gt;
      &lt;?php$this-&gt;options-&gt;BottomInfo();
      // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
      ?&gt;
      &lt;/span&gt;
        &lt;spanclass=&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-5f4cd51317f692aac49cb717bfa13a9084" aria-expanded="true"><div class="accordion-toggle"><span>隐藏左侧页面栏目</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5f4cd51317f692aac49cb717bfa13a9084" class="collapse collapse-content"><p></p></p><p>在<code>handsome/component/aside.php</code>删除下面代码</p><pre><code class="lang-html">&lt;!--独立页面pages--&gt;
              &lt;li&gt;
                &lt;a class=&quot;auto&quot;&gt;
                  &lt;span class=&quot;pull-right text-muted&quot;&gt;
                    &lt;i class=&quot;fontello icon-fw fontello-angle-right text&quot;&gt;&lt;/i&gt;
                    &lt;i class=&quot;fontello icon-fw fontello-angle-down text-active&quot;&gt;&lt;/i&gt;
                  &lt;/span&gt;
                    &lt;span class=&quot;nav-icon&quot;&gt;&lt;i data-feather=&quot;file&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;span&gt;&lt;?php _me(&quot;页面&quot;) ?&gt;&lt;/span&gt;
                &lt;/a&gt;
                &lt;ul class=&quot;nav nav-sub dk&quot;&gt;
                  &lt;li class=&quot;nav-sub-header&quot;&gt;
                    &lt;a data-no-instant&gt;
                      &lt;span&gt;&lt;?php _me(&quot;页面&quot;) ?&gt;&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/li&gt;&lt;!--这个字段不会被显示出来--&gt;
                  &lt;!--循环输出独立页面--&gt;
                  &lt;?php $this-&gt;widget('Widget_Contents_Page_List')-&gt;to($pages); ?&gt;
                   &lt;?php while($pages-&gt;next()): ?&gt;
                       &lt;?php if ($pages-&gt;fields-&gt;navbar == &quot;hide&quot;) continue; ?&gt;
                       &lt;li&gt;&lt;a href=&quot;&lt;?php $pages-&gt;permalink(); ?&gt;&quot;&gt;&lt;span&gt;&lt;?php $pages-&gt;title(); ?&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                   &lt;?php endwhile; ?&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
                &lt;?php endif; ?&gt;
                &lt;?php if (@!in_array('links', Utils::checkArray($this-&gt;options-&gt;asideSetting))): ?&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-772998194a6cb0f0d5be18459354dc4f7" aria-expanded="true"><div class="accordion-toggle"><span>更改一言接口</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-772998194a6cb0f0d5be18459354dc4f7" class="collapse collapse-content"><p></p><br>假如你是个古诗词爱好者，你可能希望将handsome自带的一言换为换成古诗词版的，刚好已经有人开发出这样的api了，我们直接调用即可。</p><p><span class="external-link"><a class="no-external-link" href="https://www.jinrishici.com/" target="_blank"><i data-feather="external-link"></i>今日诗词官网地址</a></span></p><blockquote>我比较喜欢的一点是，它会自动获取访客ip，然后根据ip所在地、访问时间等信息来推荐相关的古诗词（比如如果你在上海的晚上打开网站，它就会推送有关江南、夜雨的古诗词），很妙。具体的推荐方式<span class="external-link"><a class="no-external-link" href="https://www.jinrishici.com/doc/#how" target="_blank"><i data-feather="external-link"></i>点我查看</a></span>。</blockquote><p>主题根目录下打开<code>index.php</code>，找到以下代码：</p><pre><code class="lang-php">&lt;small class=&quot;text-muted letterspacing indexWords&quot;&gt;&lt;?php
              if (@!in_array('hitokoto',$this-&gt;options-&gt;featuresetup)) {
                  $this-&gt;options-&gt;Indexwords();
              }else{
                  echo '加载中……';
                  echo '&lt;script&gt;
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
&lt;/script&gt;';
              }
              ?&gt;&lt;/small&gt;</code></pre><p>更改为以下代码：</p><pre><code class="lang-php">&lt;small class=&quot;text-muted letterspacing indexWords&quot;&gt;&lt;span id=&quot;jinrishici-sentence&quot;&gt;正在加载今日诗词....&lt;/span&gt;
&lt;script src=&quot;https://sdk.jinrishici.com/v2/browser/jinrishici.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;&lt;/small&gt;</code></pre><p>当然，别忘了在主题后台启用<code>主题增强功能-&gt;增强功能开关-&gt;启用一言接口</code></p><p><p></p></div></div></div></p><h2>评论表情包添加</h2><p><div class="tip inlineBlock success">

以下提到的<code>JSON</code>内容添加到<code>/usr/themes/handsome/usr/OwO.json</code>文件里面，压缩包内的文件夹放到<code>/usr/themes/handsome/assets/img/emotion</code>目录内
</div></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-d9ebb8bff3480c68c18b6dfb9209901032" aria-expanded="true"><div class="accordion-toggle"><span>QQ</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d9ebb8bff3480c68c18b6dfb9209901032" class="collapse collapse-content"><p></p></p><pre><code class="lang-json">&quot;QQ&quot;:{
    &quot;type&quot;: &quot;image&quot;,
    &quot;name&quot;: &quot;QQ&quot;,
    &quot;container&quot;:[
      {
        &quot;icon&quot;: &quot;Y.qq1&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq2&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq3&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq4&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq5&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq6&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq7&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq8&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq9&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq10&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq11&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq12&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq13&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq14&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq15&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq17&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq18&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq19&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq20&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq23&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq24&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq25&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq26&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq27&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq28&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq29&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq30&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq31&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq32&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq33&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq34&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq35&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq36&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq37&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq38&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq39&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq40&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq41&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq42&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq43&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq44&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq45&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq46&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq47&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq48&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq49&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq50&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq51&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq52&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq53&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq54&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq55&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq56&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq57&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq58&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq59&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq60&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq61&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq62&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq63&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq64&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq65&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq66&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq67&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq68&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq69&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq70&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq71&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq72&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq73&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq74&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq75&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq76&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq77&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq78&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq79&quot;,
        &quot;text&quot;: &quot;QQ&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.qq80&quot;,
        &quot;text&quot;: &quot;QQ&quot;  
      }
    ]
  },</code></pre><p><button class="btn m-b-xs btn-info  " onclick='window.open("https://www.hellocode.top/usr/themes/handsome/assets/img/emotion/QQ.zip","_blank")'>QQ表情包下载</button></p><p><p></p></div></div></div></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-d864f3193912f0bbfb7fe727dd1dc11529" aria-expanded="true"><div class="accordion-toggle"><span>微博</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d864f3193912f0bbfb7fe727dd1dc11529" class="collapse collapse-content"><p></p></p><pre><code class="lang-json">&quot;微博&quot;:{
    &quot;type&quot;: &quot;image&quot;,
    &quot;name&quot;: &quot;weibo&quot;,
    &quot;container&quot;:[
      {
        &quot;icon&quot;: &quot;Y.wb1&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb2&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb3&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb4&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb5&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb6&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb7&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb8&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb9&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb10&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb11&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb12&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb13&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb14&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb15&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb16&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb17&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb18&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb19&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb20&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb21&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb22&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb23&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb24&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb25&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb26&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb27&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb28&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb29&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb30&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb31&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb32&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb33&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb34&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb35&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb36&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb37&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb38&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb39&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb40&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb41&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb42&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb43&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb44&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb45&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb46&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb47&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb48&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb49&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb50&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb51&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb52&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb53&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb54&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb55&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb56&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb57&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb58&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb59&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb60&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb61&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb62&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb63&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb64&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb65&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb66&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb67&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb68&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb69&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb70&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb71&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb72&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb73&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb74&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb75&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb76&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb77&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb78&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb79&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb80&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb81&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb82&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb83&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb84&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb85&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb86&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb87&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb88&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb89&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb90&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb91&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb92&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb93&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb94&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb95&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb96&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb97&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb98&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb99&quot;,
        &quot;text&quot;: &quot;微博&quot;
            },
      {
        &quot;icon&quot;: &quot;Y.wb100&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb101&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb102&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb103&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb104&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb105&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb106&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb107&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb108&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb109&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb110&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb111&quot;,
        &quot;text&quot;: &quot;微博&quot;
      },
      {
        &quot;icon&quot;: &quot;Y.wb112&quot;,
        &quot;text&quot;: &quot;微博&quot;
      }
    ]
  },</code></pre><p><button class="btn m-b-xs btn-info  " onclick='window.open("https://www.hellocode.top/usr/themes/handsome/assets/img/emotion/weibo.zip","_blank")'>微博表情包下载</button></p><p><p></p></div></div></div></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-ed2d9a5cd1e02e640cd523f29038027b63" aria-expanded="true"><div class="accordion-toggle"><span>bilibili</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ed2d9a5cd1e02e640cd523f29038027b63" class="collapse collapse-content"><p></p></p><pre><code class="lang-json">&quot;哔哩哔哩&quot;:{
    &quot;type&quot;: &quot;image&quot;,
    &quot;name&quot;: &quot;bilibili&quot;,
    &quot;container&quot;:[
      {
        &quot;icon&quot;: &quot;baiyan&quot;,
        &quot;text&quot;: &quot;白眼&quot;
      },
      {
        &quot;icon&quot;: &quot;bishi&quot;,
        &quot;text&quot;: &quot;鄙视&quot;
      },
      {
        &quot;icon&quot;: &quot;bizui&quot;,
        &quot;text&quot;: &quot;闭嘴&quot;
      },
      {
        &quot;icon&quot;: &quot;chan&quot;,
        &quot;text&quot;: &quot;馋&quot;
      },
      {
        &quot;icon&quot;: &quot;daku&quot;,
        &quot;text&quot;: &quot;大哭&quot;
      },
      {
        &quot;icon&quot;: &quot;dalao&quot;,
        &quot;text&quot;: &quot;大佬&quot;
      },
      {
        &quot;icon&quot;: &quot;dalian&quot;,
        &quot;text&quot;: &quot;打脸&quot;
      },{
        &quot;icon&quot;: &quot;dianzan&quot;,
        &quot;text&quot;: &quot;点赞&quot;
      },{
        &quot;icon&quot;: &quot;doge&quot;,
        &quot;text&quot;: &quot;doge&quot;
      },
      {
        &quot;icon&quot;: &quot;facai&quot;,
        &quot;text&quot;: &quot;发财&quot;
      },{
        &quot;icon&quot;: &quot;fadai&quot;,
        &quot;text&quot;: &quot;发呆&quot;
      },{
        &quot;icon&quot;: &quot;fanu&quot;,
        &quot;text&quot;: &quot;发怒&quot;
      },{
        &quot;icon&quot;: &quot;ganga&quot;,
        &quot;text&quot;: &quot;尴尬&quot;
      },{
        &quot;icon&quot;: &quot;guzhang&quot;,
        &quot;text&quot;: &quot;鼓掌&quot;
      },{
        &quot;icon&quot;: &quot;haixiu&quot;,
        &quot;text&quot;: &quot;害羞&quot;
      },{
        &quot;icon&quot;: &quot;heirenwenhao&quot;,
        &quot;text&quot;: &quot;黑人问号&quot;
      },{
        &quot;icon&quot;: &quot;huaixiao&quot;,
        &quot;text&quot;: &quot;坏笑&quot;
      },{
        &quot;icon&quot;: &quot;jingxia&quot;,
        &quot;text&quot;: &quot;惊吓&quot;
      },{
        &quot;icon&quot;: &quot;keai&quot;,
        &quot;text&quot;: &quot;可爱&quot;
      },{
        &quot;icon&quot;: &quot;koubi&quot;,
        &quot;text&quot;: &quot;抠鼻&quot;
      },{
        &quot;icon&quot;: &quot;kun&quot;,
        &quot;text&quot;: &quot;困&quot;
      },{
        &quot;icon&quot;: &quot;liubixie&quot;,
        &quot;text&quot;: &quot;流鼻血&quot;
      },{
        &quot;icon&quot;: &quot;liuhan&quot;,
        &quot;text&quot;: &quot;流汗&quot;
      },
      {
        &quot;icon&quot;: &quot;miantian&quot;,
        &quot;text&quot;: &quot;腼腆&quot;
      },{
        &quot;icon&quot;: &quot;nanguo&quot;,
        &quot;text&quot;: &quot;难过&quot;
      },{
        &quot;icon&quot;: &quot;outu&quot;,
        &quot;text&quot;: &quot;呕吐&quot;
      },{
        &quot;icon&quot;: &quot;qinqin&quot;,
        &quot;text&quot;: &quot;亲亲&quot;
      },{
        &quot;icon&quot;: &quot;se&quot;,
        &quot;text&quot;: &quot;色&quot;
      },{
        &quot;icon&quot;: &quot;shengbing&quot;,
        &quot;text&quot;: &quot;生病&quot;
      },{
        &quot;icon&quot;: &quot;shengqi&quot;,
        &quot;text&quot;: &quot;生气&quot;
      },{
        &quot;icon&quot;: &quot;shuizhao&quot;,
        &quot;text&quot;: &quot;睡着&quot;
      },{
        &quot;icon&quot;: &quot;sikao&quot;,
        &quot;text&quot;: &quot;思考&quot;
      },{
        &quot;icon&quot;: &quot;tiaopi&quot;,
        &quot;text&quot;: &quot;调皮&quot;
      },{
        &quot;icon&quot;: &quot;touxiao&quot;,
        &quot;text&quot;: &quot;偷笑&quot;
      },{
        &quot;icon&quot;: &quot;tuxie&quot;,
        &quot;text&quot;: &quot;吐血&quot;
      },{
        &quot;icon&quot;: &quot;weiqu&quot;,
        &quot;text&quot;: &quot;委屈&quot;
      },{
        &quot;icon&quot;: &quot;weixiao&quot;,
        &quot;text&quot;: &quot;微笑&quot;
      },{
        &quot;icon&quot;: &quot;wunai&quot;,
        &quot;text&quot;: &quot;无奈&quot;
      },{
        &quot;icon&quot;: &quot;xiaoku&quot;,
        &quot;text&quot;: &quot;笑哭&quot;
      },{
        &quot;icon&quot;: &quot;xieyanxiao&quot;,
        &quot;text&quot;: &quot;斜眼笑&quot;
      },{
        &quot;icon&quot;: &quot;yiwen&quot;,
        &quot;text&quot;: &quot;疑问&quot;
      },{
        &quot;icon&quot;: &quot;yun&quot;,
        &quot;text&quot;: &quot;晕&quot;
      },{
        &quot;icon&quot;: &quot;zaijian&quot;,
        &quot;text&quot;: &quot;再见&quot;
      },{
        &quot;icon&quot;: &quot;zhuakuang&quot;,
        &quot;text&quot;: &quot;抓狂&quot;
      }
    ]
  },</code></pre><p><button class="btn m-b-xs btn-info  " onclick='window.open("https://www.hellocode.top/usr/themes/handsome/assets/img/emotion/bilibili.zip","_blank")'>bilibili表情包下载</button></p><p><p></p></div></div></div></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-d2d1e0eedcc081596a31dd25a578a6b032" aria-expanded="true"><div class="accordion-toggle"><span>表情包显示过大解决方法</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d2d1e0eedcc081596a31dd25a578a6b032" class="collapse collapse-content"><p></p></p><p>在<code>自定义CSS</code>处添加如下代码即可，注意<code>emotion-</code>后面即为表情名字，即<code>OwO.json</code>文件里的<code>name</code>。<br>每个表情包都要写一个css添加进去才可以。以本博客为例：</p><pre><code class="lang-css">/* Emoji大小调整 */
.emotion-QQ {width:35px;}
.emotion-bilibili {width:35px;}
.emotion-weibo {width:35px;}</code></pre><p><p></p></div></div></div></p><hr><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-249cba339e5fcdc49899c02639d1660349" aria-expanded="true"><div class="accordion-toggle"><span>评论邮箱推送</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-249cba339e5fcdc49899c02639d1660349" class="collapse collapse-content"><p></p></p><p><span class="external-link"><a class="no-external-link" href="https://github.com/visamz/CommentToMail" target="_blank"><i data-feather="external-link"></i>CommentToMail</a></span></p><p>美化邮件模板样式</p><p>owner</p><pre><code class="lang-html">&lt;div style=&quot;width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;&quot;&gt;
    &lt;div style=&quot;background-image: url(https://www.hellocode.top/mail.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:10px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;&quot;&gt;
        &lt;h2 style=&quot;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;&quot;&gt;&lt;span style=&quot;color: #ff7272;font-weight: bold;&quot;&gt;&lt;/span&gt;您的&lt;a style=&quot;text-decoration:none;color: #ff7272;&quot; href=&quot;{permalink}&quot; target=&quot;_blank&quot;&gt;《{title}》&lt;/a&gt;有了新的回复：&lt;/h2&gt;
        &lt;div style=&quot;padding:0 12px 0 12px;margin-top:18px&quot;&gt;
            &lt;p&gt;&lt;strong&gt;{author}&lt;/strong&gt; 给您的评论：&lt;/p&gt;
            &lt;style type=&quot;text/css&quot;&gt;
                .comment&gt;img{margin: 0px 6px 5px 6px;width: 25px;}
            &lt;/style&gt;
            &lt;p class=&quot;comment&quot; style=&quot;background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0&quot;&gt;{text}&lt;/p&gt;
            &lt;p&gt;详细信息：&lt;/p&gt;
            &lt;p style=&quot;background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0&quot;&gt;IP：{ip}&lt;br /&gt;邮箱：&lt;a style=&quot;text-decoration:none;color: #ff7272;&quot; href=&quot;mailto:{comment_author_mail}&quot;&gt;{mail}&lt;/a&gt;&lt;br /&gt;状态：{status} [&lt;a style=&quot;text-decoration:none;color: #ff7272;&quot; href='{manage}' target='_blank'&gt;管理评论&lt;/a&gt;]&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;a style=&quot;text-decoration: none;color: rgb(255, 255, 255);width: 40%;text-align: center;background-color: rgb(255, 114, 114);height: 40px;line-height: 40px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);display: block;margin: auto;&quot; href=&quot;{permalink}&quot; target=&quot;_blank&quot;&gt;查看回复的完整內容&lt;/a&gt;
    &lt;div style=&quot;color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center; padding-bottom: 1px;&quot;&gt;
        &lt;p&gt;©2022-2023 Copyright {siteTitle}&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre><p>guest</p><pre><code class="lang-html">&lt;div style=&quot;width: 550px;height: auto;border-radius: 5px;margin:0 auto;box-shadow: 0px 0px 20px #888888;position: relative;padding-bottom: 5px;&quot;&gt;
    &lt;div style=&quot;background-image: url(https://www.hellocode.top/mail.png);width:550px;height: 250px;background-size: cover;background-repeat: no-repeat;border-radius: 5px 5px 0px 0px;&quot;&gt;&lt;/div&gt;
    &lt;div style=&quot;width: 200px;height: 40px;background-color: rgb(255, 114, 114);margin-top: -20px;margin-left: 20px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);color: rgb(255, 255, 255);text-align: center;line-height: 40px;&quot;&gt;Dear: {author_p}&lt;/div&gt;
    &lt;div style=&quot;background-color:white;line-height:180%;padding:0 15px 12px;width:520px;margin:30px auto;color:#555555;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size:12px;margin-bottom: 0px;&quot;&gt;  
        &lt;h2 style=&quot;font-size:14px;font-weight:normal;padding:13px 0 10px 8px;&quot;&gt;&lt;span style=&quot;color: #12ADDB;font-weight: bold;&quot;&gt;&lt;/span&gt;您在&lt;a style=&quot;text-decoration:none;color: #ff7272;&quot; href=&quot;{permalink}&quot; target=&quot;_blank&quot;&gt;《{title}》&lt;/a&gt;的评论有了新的回复：&lt;/h2&gt;  
        &lt;div style=&quot;padding:0 12px 0 12px;margin-top:18px&quot;&gt;
            &lt;style type=&quot;text/css&quot;&gt;
                .comment&gt;img{margin: 0px 6px 5px 6px;width: 25px;}
            &lt;/style&gt;
            &lt;p&gt;您的评论：&lt;/p&gt;  
            &lt;p class=&quot;comment&quot; style=&quot;background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0&quot;&gt;{text_p}&lt;/p&gt;  
            &lt;p&gt;&lt;strong&gt;{author}&lt;/strong&gt; 给您的回复：&lt;/p&gt;  
            &lt;p class=&quot;comment&quot; style=&quot;background-color: #f5f5f5;border: 0px solid #DDD;border-radius: 5px;padding: 10px 15px;margin:18px 0&quot;&gt;{text}&lt;/p&gt;  
        &lt;/div&gt;  
    &lt;/div&gt;
    &lt;div style=&quot;color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;word-wrap:break-word;margin-top: -30px;&quot;&gt;
        &lt;p style=&quot;padding:20px;&quot;&gt;萤火虫消失之后，那光的轨迹仍久久地印在我的脑际。那微弱浅淡的光点，仿佛迷失方向的魂灵，在漆黑厚重的夜幕中彷徨。——《挪威的森林》村上春树&lt;/p&gt;
    &lt;/div&gt;
    &lt;a style=&quot;text-decoration:none; color:#FFF;width: 40%;text-align: center;background-color:#ff7272;height: 40px;line-height: 35px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.30);margin: -10px auto;display: block;&quot; href=&quot;{permalink}&quot; target=&quot;_blank&quot;&gt;查看回复的完整內容&lt;/a&gt;
    &lt;div style=&quot;color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;margin-top: 30px;&quot;&gt;
        &lt;p&gt;本邮件为系统自动发送，请勿直接回复~&lt;/p&gt;
    &lt;/div&gt;
    &lt;div style=&quot;color:#8c8c8c;;font-family: 'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;font-size: 10px;width: 100%;text-align: center;padding-bottom: 1px;&quot;&gt;
        &lt;p&gt;©2022-2023 Copyright {siteTitle}&lt;/p&gt;
    &lt;/div&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-bb34fc74db39a1abb704e858ae110c0732" aria-expanded="true"><div class="accordion-toggle"><span>异常友链检测插件</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-bb34fc74db39a1abb704e858ae110c0732" class="collapse collapse-content"><p></p></p><p>检测原理是检查 <code>URL状态码</code>是否是 <code>200</code>，以此来判断链接状态。</p><p>插件检测不一定准确，可能会误判为失效链接。建议点开链接确认一下再做处理。</p><ul><li>限于前端检测的缘故，服务端禁止跨域也会返回错误</li><li>友链是<code>HTTPS</code>链接就不要填写<code>HTTP</code>链接（避免301）</li><li>避免友链通过<code>第三方页面跳转</code>（避免检测跳转页）</li><li>浏览器当前网络下站点<code>响应时间过长</code>会有失效报告</li></ul><p>开源地址：<span class="external-link"><a class="no-external-link" href="https://github.com/ethanzhao2001/AbnormalLinks-For-Typecho" target="_blank"><i data-feather="external-link"></i>https://github.com/ethanzhao2001/AbnormalLinks-For-Typecho</a></span></p><p><p></p></div></div></div></p><h3>自动生成Sitemap插件</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-43e48469960a238cec7cce16fc3a4ca419" aria-expanded="true"><div class="accordion-toggle"><span>自动生成Sitemap插件</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-43e48469960a238cec7cce16fc3a4ca419" class="collapse collapse-content"><p></p></p><p>生成<code>sitemap</code>包含<strong>首页、独立页面、分类、标签、文章</strong></p><p>推送百度搜索资源平台，目前仅支持普通收录推送</p><p>不支持发布文章自动更新<code>sitemap</code>及自动推送，可能会影响文章发布速度</p><p>开源地址：<span class="external-link"><a class="no-external-link" href="https://github.com/ethanzhao2001/Sitemap-For-Typecho" target="_blank"><i data-feather="external-link"></i>https://github.com/ethanzhao2001/Sitemap-For-Typecho</a></span></p><p><p></p></div></div></div></p><h2>速度优化</h2><h3>CDN</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-3023fcea0f94132e98cea1d4442935e36" aria-expanded="true"><div class="accordion-toggle"><span>外部库公共CDN加速</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3023fcea0f94132e98cea1d4442935e36" class="collapse collapse-content"><p></p></p><p>首先是主题的CDN加速。在Handsome主题下,可以选择公共库，我选择字节跳动的CDN，貌似相对比较快。</p><p><img src="https://www.hellocode.top/usr/uploads/2022/05/30082042.png" alt="请输入图片描述" title="请输入图片描述"style=""></p><p>当然这个库是主题的<code>使用了jquery、bootstrap、vditor、mdui、mathjax外部库（体积较大&gt;60kb）</code></p><p><p></p></div></div></div></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-3d9260d8496ad0fa4c496ca08b4b508e55" aria-expanded="true"><div class="accordion-toggle"><span>静态资源CDN</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3d9260d8496ad0fa4c496ca08b4b508e55" class="collapse collapse-content"><p></p></p><p>主题本地静态资源自定义cdn加速，如果自己有CDN服务器的话，可以自己搭建。在使用说明里面都有细说方法。</p><p>如果没有的话，可以找这两个<span class="external-link"><a class="no-external-link" href="https://www.coldyun.cn/archives/62.html" target="_blank"><i data-feather="external-link"></i>Handsome 静态资源CDN加速（已更新）</a></span>、<span class="external-link"><a class="no-external-link" href="https://blog.9az.ren/archives/88.html" target="_blank"><i data-feather="external-link"></i>Handsome主题静态资源CDN加速服务【更新至8.4.1】</a></span>借用一下。而且支持自定义，非常感谢两个大佬，在此谢过。</p><p><p></p></div></div></div></p>

自定义CSS

主题标题居中

等距标签云

左侧边栏羽毛

logo扫光

首页文章列表悬停上浮

赞赏按钮跳动

头像鼠标悬停旋转放大

评论边框

粗斜体上色

气泡背景

自定义JavaScript

复制版权提示

彩色标签云及右栏数字

禁F12

自定义右键

左侧栏小图标颜色

鼠标点击特效

修改文件

响应时间和访客总数

百度收录检测

文末end

版权提示

时间流逝

加载动画

底部版权美化

隐藏左侧页面栏目

更改一言接口

评论表情包添加

插件

评论邮箱推送

异常友链检测插件

自动生成Sitemap插件

速度优化

CDN

发表评论 取消回复

12 条评论

【handsome】美化备忘录

发表评论取消回复