不知不觉，我这破站已经建了快一个月了，虽然没几个人看，不过也就那样吧，自己开心就行~

前言

Handsome主题.png
今天就来记一下自己博客有关Handsome主题的修改，就当是给自己备个份，以免以后更新的时候忘了。当然，要是能帮上有需要的小伙伴们的忙那就更好了。

代码修改

自定义css

将以下代码添加至后台主题设置 自定义CSS。

首页头像自动旋转

/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

响应式布局

参考了SimpleZero博主的css代码。

/*响应式布局*/
@media screen and (min-width: 100px) and (max-width: 7680px){
    .wrapper-md>#comments{padding: 10px 30px 20px 30px;}
    .wrapper-md article, .wrapper-md>#comments{border-radius: 15px;overflow: hidden;}
    .lter,.wrapper-md .panel, .wrapper-md .panel-small, .wrapper-md>#comments{background-color: rgba(255,255,255,.8);}
    .wrapper-md>#comments, .wrapper-md>.blog-post, .wrapper-md>.breadcrumb, .m-t-lg.m-b-lg, .wrapper-md>.no_search_result{max-width: 800px;margin-left: auto;margin-right: auto;}
}

@media screen and (min-width: 1300px) and (max-width: 7680px){
    .item-thumb{
        min-height:400px;
    }

    .blog-post>.panel{
        position: relative;
        overflow: hidden;
    }

    .blog-post>.panel>.post-meta.wrapper-lg{
        position: absolute;
        top: 315px;
        left: 0px;
        background-color: rgba(0,0,0,0.4);
        border-radius: 12px;
        cursor: pointer;  
        transition: all 0.4s;  
        width: 100%;
        height:100%;
    }

    .blog-post>.panel:hover .post-meta.wrapper-lg{
        top: 195px;
        left: 0px;
        cursor: pointer;  
        transition: all 0.4s;  
    }

    .blog-post>.panel h2{
        padding-bottom: 30px;
        color: #FFF;
        max-width: 800px;
        overflow: hidden;
    }

    .blog-post>.panel>.post-meta.wrapper-lg>.summary{
        color: #FFF;
        max-height: 50px;
        text-overflow:ellipsis;
        overflow: hidden;
    }

    .blog-post>.panel>.post-meta.wrapper-lg>.post-item-foot-icon{
        color: #FFF;
    }

    .blog-post>.panel>.post-meta.wrapper-lg>.text-muted.post-item-foot-icon i{
        color:#FFF;
    }

    .list-group-item.clearfix{
        background-color: rgba(255,255,255,0.8);
        border: none;
        width: 230px;
        height: 200px;
        float: left;
        position: relative;
        text-align: center;
        cursor: pointer;  
        transition: all 0.4s; 
        margin-bottom: 35px!important;
        margin-left: 30px;
    }

    .list-group-item.clearfix>.avatar.thumb.pull-left.m-r{
        width: 60px;
        position: absolute;
        top: 160px;
        left: 30px;
        border: 3px solid #FFF;
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;.blog-post>.panel>.post-meta.wrapper-lg
        -moz-transition: -moz-transform 0.4s ease-out; 
    }

    .list-group-item.clearfix>.avatar.thumb.pull-left.m-r:hover{
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
    }

    .list-group-item.clearfix>.clear div>.text-md {
        font-size: 20px;
    }

    .list-group-item.clearfix>.clear>.text-ellipsis{
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        height: auto;
        width: auto;
    }

    .list-group-item.clearfix:hover{
       transform: scale(1.08);  

    }

}

.app-aside-fixed.app-header-fixed .app-aside {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1010;
}

首页文章a标签颜色渐变

/*首页文章a标签颜色渐变*/
.index-post-title a:hover{
     color:rgba(107, 209, 255, 1);
     transition:color 0.2s linear
}

广告圆角

/*广告*/
#a_d_sidebar img {
    border-radius: 8px;
    margin-bottom: 15px;
}

打赏图标跳动

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

底部页脚标签样式

/*底部页脚*/
.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-red {
  background-color: #f00
}

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

.github-badge .bg-purple {
  background-color: #ab34e9
}

将以下代码添加至 主题设置-开发者设置-博客底部右侧信息

<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered by</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme by</span><span class="badge-value bg-purple">Handsome</span>
</a>
</div>

添加完成后，需要去 handsome\component\footer.php删除原有声明代码（把它注释掉即可）

 <!--Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
                                                                                                     href="https://www.ihewro.com/archives/489/">handsome</a>-->

自定义鼠标

以下内容放进自定义CSS里，光标路径改对，nomral.cur是默认光标，link.cur是手掌光标。

/*自定义鼠标*/
*{
    cursor: url("/usr/themes/handsome/assets/css/dew/normal.cur"),auto !important;
}
a,a *,button,button *,.OwO-item,.OwO-logo,.OwO-logo *,.OwO-packages *{
    cursor: url("/usr/themes/handsome/assets/css/dew/link.cur"),auto !important;
}

自定义js

将以下代码添加至后台主题设置 自定义JavaScript。

网页标题焦点变化

// 标题焦点变化
document.addEventListener('visibilitychange', function() {
 var isHidden = document.hidden;
 if (isHidden) {
  document.title = '修改成你想要的';
 } else {
  document.title = '修改成你想要的';
 }
});

鼠标点击爱心效果

// 点击爱心
! function (e, t, a) {
  function n() {
    c(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
  }
  function r() {
    for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
    requestAnimationFrame(r)
  }
  function o() {
    var t = "function" == typeof e.onclick && e.onclick;
    e.onclick = function (e) {
      t && t(), i(e)
    }
  }
  function i(e) {
    var a = t.createElement("div");
    a.className = "heart", d.push({
      el: a,
      x: e.clientX - 5,
      y: e.clientY - 5,
      scale: 1,
      alpha: 1,
      color: s()
    }), t.body.appendChild(a)
  }
  function c(e) {
    var a = t.createElement("style");
    a.type = "text/css";
    try {
      a.appendChild(t.createTextNode(e))
    } catch (t) {
      a.styleSheet.cssText = e
    }
    t.getElementsByTagName("head")[0].appendChild(a)
  }
  function s() {
    return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
  }
  var d = [];
  e.requestAnimationFrame = function () {
    return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
      setTimeout(e, 1e3 / 60)
    }
  }(), n()
}(window, document);

评论特效

(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);

鼠标烟花爆炸特效

将以下代码放置主题文件下 footer.php文件的 </body>之前

<script type="text/javascript" src="你的文件地址/meme.js"></script>
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="你的文件地址/anime.min.js"></script>
<script type="text/javascript" src="你的文件地址/fireworks.js"></script>

文件下载地址：

其他

天气插件

心知天气 - 网页天气插件.png

心知天气配置插件.png

注册账号并登录，根据自身情况自定义插件，然后复制底部安装代码到网站根目录 /usr/themes/handsome/component/headnav.php下约 60行左右的位置。

需要将<div id="tp-weather-widget">
改成<div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift">
<!--搜索提示-->
                <!--<ul class="dropdown-menu" style="display: block; top: 30px; left: 0px;">
                    <li tabindex="0" style="">
                        <a>友人C</a>
                    </li>
                </ul>-->
              <span id="search_submit" class="transparent input-group-btn">
                  <button  type="submit" class="transparent btn btn-sm"><i class="fontello fontello-search"></i></button>
              </span>
            </div>
          </div>
        </form>

                              在此处插入代码

          <a href="" style="display: none" id="searchUrl"></a>
        <!-- / search form -->

修改前最好先备份代码，以免出现意外情况。
若选择浮动气泡样式则可直接把代码复制到后台开发者设置下的自定义输出body选项下。

左侧导航栏二级菜单

到网站根目录 /usr/themes/handsome/component/aside.php下约 135行左右的位置。

<!-- /主页 -->
              <?php endif; ?>
              <?php echo @$asideItemsOutput ?>
                <?php if (@!in_array('component',$this->options->asideSetting)): ?>

                 在这段代码后插入
 <!--左侧导航栏添加折叠菜单样式-->
                   <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="xxx"></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>
                  <!--循环输出分类-->
                 <li>
                  <a href="输入链接" target="_blank" class="auto">
                    <!--链接地址-->
                  <i class="更换图标"></i><!--图标-->
                  <span><?php _me("输入名字") ?></span><!--名字-->
                </a>
                <li>
                  <a href="输入链接" target="_blank" class="auto">
                    <!--链接地址-->
                  <i class="更换图标"></i><!--图标-->
                  <span><?php _me("输入名字") ?></span><!--名字-->
                </a>
<!--只是一个示例，自行仿照,理论可无限加，一个a标签对应一个栏目-->

插入图标举例：

<!--iconfont图标-->
<i class="iconfont icon-xxx"></i>

<!--Glyphicons图标-->
<i class="glyphicon glyphicon-eur"></i>

<!--fontello图标-->
<i class="fontello fontello-xxx"></i>

<!--feather图标-->
<i data-feather="xxx"></i>

修改前最好先备份代码，以免出现意外情况。
图标支持使用feather的所有图标

主页不展示指定的页面

如果不想在主页页面下展示特定的页面，可以在该独立页面下添加字段

选择字符 navbar，后面写上 hide即可。

Mac风格代码高亮

Github：https://github.com/Xcnte/Code-Prettify-for-typecho
第 1 步：下载本插件，解压，放到 usr/plugins/目录中；
第 2 步：文件夹名改为 CodePrettify；
第 3 步：登录管理后台，激活插件
（请勿与其它同类插件同时启用，以免互相影响）
第 4 步：设置：选择主题风格，是否显示行号等。
第 5 步：修改（替换）/usr/themes/handsome/assets/css/下的handsome.min.css文件

  • 将 handsome.min.css文件里的 #post-content pre code内容替换为
#post-content pre code {
    position: relative;
    display: block;
    overflow-x: auto;
    margin: 4.4px 0.px .4px 1px;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}
  • 在handsome.min.css文件里末尾添加
.page pre code {
    position: relative;
    display: block;
    overflow-x: auto;
    margin: 4.4px 0.px .4px 1px;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}

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

.page pre {
    padding: 0;
    border-radius: 0;
    overflow: hidden
}
  • 在handsome.min.css文件里删除
#post-content button
#post-content pre:before
code::-webkit-scrollbar-track-piece
code::-webkit-scrollbar
  • 添加Pjax回调函数

如果你的网站有开启Pjax（handsome主题默认开启）
请把以下代码添加到回调函数的地方，在你使用的主题设置里看看

if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}

若插件里设置不显示行号，PJAX函数要改为

if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}

评论区打卡

首先在 后台-->设置外观-->开发者设置-->自定义JavaScript加入以下代码:

function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

打开主题目录的 component/comments.php里面的 130行到 145行：

<div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO padder-v-sm"></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

替换为以下代码:

     <div class="comment-form-comment form-group">
                        <label for="comment"><?php _me("评论") ?> <span class="required text-danger">（请使用真实邮箱地址，方便接收评论回复）</span>
                            <span class="required text-danger">*</span></label>
                        <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                        <div class="OwO padder-v-sm" style="display: inline;"></div><div class="OwO" style="display: inline;"><a href="javascript:addNumber('滴！访客卡！请上车的乘客系好安全带，现在是：')" class="OwO-logo"><i class="fontello fontello-user face"></i><span class="OwOlogotext">打卡</span></a></div>
                        <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                        data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">
                            <label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
                            <div class="secret_comment_check">
                                <label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
                                    <input type="checkbox" id="secret_comment_checkbox">
                                    <i></i>
                                </label>
                            </div>
                        </div>
                    </div>

在 后台-->设置外观-->开发者设置-->自定义CSS加入以下代码:

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

UserAgent插件

地址：https://doge.uk/coding/useragent-modify.html
修改Handsome主题，component目录下的comments.php代码文件，大概第60~80行左右，

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

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

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

文章复制弹窗提醒

复制后弹窗提示需用到 layer的web弹层组件。
首先前往layer官网下载 绿色版layer。

将 layer-v3.1.1.zip上传并解压到handsome主题的 /assets/js文件夹中
将 layer-v3.1.1中的layer文件夹移动到主题的js文件夹中，并删除 layer.v3.1.1.zip和 layer-v3.1.1文件夹。

  • 打开主题目录 component/header.php文件，插入下面的代码
<script src="<?php echo STATIC_PATH; ?>js/layer/layer.js"></script>
  • 在 主题设置-开发者设置-自定义JavaScript中插入以下代码
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留原文链接！', function(){
   });};

404页面自动返回

打开 /usr/themes/handsome/404.php
在第130行左右，在 <h1 class="text-shadow text-white">404</h1>后面添加：

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

然后把下面这段放到最后的 </body>前

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

把下面的删掉就能隐藏注册按钮(个人博客不需要)

<a href="<?php $this->options->rootUrl(); ?>/admin/register.php"  class="list-group-item">
  <i class="fontello fontello-chevron-right text-muted"></i>
  <i class="fontello fontello-fw fontello-unlock-alt m-r-xs"></i> <?php _me("注册") ?>
</a>

右侧边栏添加全站字数统计

由于6.0版本之后，作者对 functions.php进行了加密，所以无法对其进行修改，但在 component/sidebar.php的开头加入以下的代码也可达到相同的效果

<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>

然后在 component/sidebar.php中博客信息处选择合适的位置加入即可。

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i></span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>

其他主题用户请根据自身情况，使用 <?php echo allOfCharacters(); ?>在合适的位置输出即可。

右侧边栏添加加载耗时

同上在 component/sidebar.php的开头加入以下的代码

<?php
/**
* 加载时间
* @return bool
*/
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;
}
?>

然后在 component/sidebar.php中博客信息处选择合适的位置加入即可。

<li class="list-group-item"> <i class="glyphicon glyphicon-flash text-muted"></i> <span class="badge pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

其他主题用户请根据自身情况，使用 <?php echo timer_stop();?>在合适的位置输出即可。

暂时就这些吧，以后记起来了再补上...

Typecho丨博客实用插件推荐

不知不觉间博客已经建立了一年有多了，下面就来给大家分享安利一下在这一年多里自己觉得比较实用的插件吧。功能型Auto...

Typecho丨Handsome主题侧边导航栏添加二级菜单

记录一次Handsome主题关于侧边导航栏添加二级菜单的修改过程。添加判断字段在'网站根目录/usr/themes...

Typecho丨Handsome主题添加百度收录检测

今天偶尔逛了逛handsome社区，看到了Weifeng博主写的百度收录检测文章，转载分享一下。这里过程就不一一复...

版权属于：Rintarou°

本文链接：https://www.rin404.com/archives/handsome.html

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

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