自定义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扫光

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

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

"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包含首页、独立页面、分类、标签、文章

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

不支持发布文章自动更新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】借用一下。而且支持自定义,非常感谢两个大佬,在此谢过。

最后修改:2022 年 05 月 23 日
如果觉得我的文章对你有用,请随意赞赏