Rintarou°

Typecho丨Handsome主题修改记录
不知不觉,我这破站已经建了快一个月了,虽然没几个人看,不过也就那样吧(T_T)
扫描右侧二维码阅读全文
04
2018/12

Typecho丨Handsome主题修改记录

不知不觉,我这破站已经建了快一个月了,虽然没几个人看,不过也就那样吧(T_T)

Ⅰ、前言

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

Snipaste_2018-12-04_22-03-45.png

Ⅱ、代码修改

1.自定义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);
    }
}

2.自定义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);

3.其他

天气插件


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

打开链接:https://www.seniverse.com/widget

Snipaste_2018-12-04_21-33-15.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>
                  <i class="glyphicon glyphicon-th-list"></i><!--图标-->
                  <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标签对应一个栏目-->

主页不展示指定的页面


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

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

背景透明


网站根目录/usr/themes/handsome/component/headnav.php下第二行的位置插入。

<div id="bg"></div>

Mac风格代码高亮


第 1 步:下载本插件,解压,放到usr/plugins/目录中;

第 2 步:文件夹名改为 CodePrettify

第 3 步:登录管理后台,激活插件
(请勿与其它同类插件同时启用,以免互相影响)

第 4 步:设置:选择主题风格,是否显示行号等。

第 5 步:修改(替换)/usr/themes/handsome/assets/css/下的handsome.min.css文件

  • 将handsome.min.css文件里的#post-content pre内容替换为
padding:0;
border-radius:0;
overflow:hidden;
  • 将handsome.min.css文件里的#post-content pre code内容替换为
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px 0.4px 1px;
padding: 0;
max-height:500px;
padding-left:2em;
  • 在handsome.min.css文件里末尾添加
#post-content .code-toolbar pre code {
position:relative;
display:block;
overflow-x:auto;
margin:4.4px 0.px 0.4px 1px;
padding: 0;
max-height:500px;
padding-left: 3.5em;
}
  • 在handsome.min.css文件里删除#post-content pre:before下所有内容

评论区打卡


首先在后台-->设置外观-->开发者设置-->自定义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里面的126行到141行:

<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"></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" 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
}

文章复制弹窗提醒


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

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

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

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

Last modification:September 22nd, 2019 at 05:33 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

2 comments

  1. 李多多

    这样一来 我黑苹果+chrome 打开你的页面 很卡。

  2. clouderl

    收了|´・ω・)ノ

召唤看板娘