前言

Handsome主题现已更新至7.1,本文章仅作存档之用。

原文:

使用Handsome主题一年了,主题从5.1升级到5.3.1了,最近刚好迁移了网站,也顺带着把整个博客做了一些改动,写这篇主要方便我升级主题的时候还能保留DIY的特性。

超链接特效

超链接特效
修改/usr/themes/handsome/assets/css/handsome.min.css,删掉下面的内容:

comment-content-true a:hover,.wrapper-lg .entry-content a:hover{
color:#222;border-bottom-color:#222
}
.comment-content-true a,.wrapper-lg .entry-content a{
color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all
}

自定义CSS:

/*超链接特效*/
.comment-content-true a:not(.light-link),
.wrapper-lg .entry-content a:not(.light-link) {
    position: relative;
    margin: auto 4px;
    color: #23b7e5;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: inherit;
    width: inherit;
}
.comment-content-true a:not(.light-link):hover,
.comment-content-true a:not(.light-link):focus,
.wrapper-lg .entry-content a:not(.light-link):hover,
.wrapper-lg .entry-content a:not(.light-link):focus {
    color: #fff;
}
.comment-content-true a:not(.light-link)::before,
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::after {
    position: absolute;
    top: 0;
    left: -4px;
    z-index: -1;
    box-sizing: content-box;
    padding: 0 4px;
    width: 100%;
    height: 100%;
    content: '';
}
.comment-content-true a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::before {
    background-color: #23b7e5;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.comment-content-true a:not(.light-link):hover::before,
.comment-content-true a:not(.light-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::after {
    border-bottom: 1px solid #23b7e5;
}
.content-copyright {
    overflow: hidden;
}

自定义光标

自定义光标
炫彩鼠标插件下载【链接
因为这个插件不支持PJAX,效果不好,所以我把光标资源提取出来手写了个CSS。
以下内容放进自定义CSS里,光标路径改对,nomral.cur是默认光标,link.cur是手掌光标。

/*自定义光标*/
*{
    cursor: url("/usr/customize/normal.cur"),auto !important;
}
a,a *,button,button *,.OwO-item,.OwO-logo,.OwO-logo *,.OwO-packages *{
    cursor: url("/usr/customize/link.cur"),auto !important;
}

时光机UA显示

引入字体
添加到自定义HTML里

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

修改/usr/themes/handsome/libs/UA.php

/* 第148行 */
    public function returnOS(){
        $ua = $this->ua;
        $title = "未知浏览器";
        $icon = "fa fa-question-circle";
        if (preg_match('/win/i', $ua)) {
            $icon ="fa fa-windows";
            if (preg_match('/Windows NT 6.1/i', $ua)) {
                $title = "Windows 7";
                //$icon = "iconfont icon-win";
            }elseif (preg_match('/Windows 98/i', $ua)) {
                $title = "Windows 98";
                //$icon = "iconfont icon-win2";
            }elseif (preg_match('/Windows NT 5.0/i', $ua)) {
                $title = "Windows 2000";
                //$icon = "iconfont icon-win2";
            }elseif (preg_match('/Windows NT 5.1/i', $ua)) {
                $title = "Windows XP";
                //$icon = "iconfont icon-win";
            }elseif (preg_match('/Windows NT 5.2/i', $ua)) {
                if (preg_match('/Win64/i', $ua)) {
                    $title = "Windows XP 64 bit";
                } else {
                    $title = "Windows Server 2003";
                }
                //$icon = 'iconfont icon-win';
            }elseif (preg_match('/Windows NT 6.0/i', $ua)) {
                $title = "Windows Vista";
                //$icon = "fa fa-windows";
            }elseif (preg_match('/Windows NT 6.2/i', $ua)) {
                $title = "Windows 8";
                //$icon = "iconfont icon-win8";
            }elseif (preg_match('/Windows NT 6.3/i', $ua)) {
                $title = "Windows 8.1";
                //$icon = "iconfont icon-win8";
            }elseif (preg_match('/Windows NT 10.0/i', $ua)) {
                $title = "Windows 10";
                //$icon = "iconfont icon-win3";
            }elseif (preg_match('/Windows Phone/i', $ua)) {
                $matches = explode(';',$ua);
                $title = $matches[2];
                //$icon = "iconfont icon-winphone";
                $icon = "fa fa-mobile";
            }
        } elseif (preg_match('#iPod.*.CPU.([a-zA-Z0-9.( _)]+)#i', $ua, $matches)) {
            $title = "iPod ";//.$matches[1]
            //$icon = "iconfont icon-ipod";
            $icon = "fa fa-apple";
        } elseif (preg_match('/iPhone OS ([_0-9]+)/i', $ua, $matches)) {
            $title = "Iphone ";//.$matches[1]
            //$icon = "iconfont icon-iphone";
            $icon = "fa fa-apple";
        } elseif (preg_match('/iPad; CPU OS ([_0-9]+)/i', $ua, $matches)) {
            $title = "iPad ";//.$matches[1]
            //$icon = "iconfont icon-ipad";
            $icon = "fa fa-apple";
        } elseif (preg_match('/Mac OS X ([0-9_]+)/i', $ua, $matches)) {
            if(count(explode(7,$matches[1]))>1) $matches[1] = 'Lion '.$matches[1];
            elseif(count(explode(8,$matches[1]))>1) $matches[1] = 'Mountain Lion '.$matches[1];
            $title = "Mac OSX";
            //$icon = "iconfont icon-macosdeicon";
            $icon = "fa fa-apple";
        } elseif (preg_match('/Macintosh/i', $ua)) {
            $title = "Mac OS";
            //$icon = "iconfont icon-iconmacos";
            $icon = "fa fa-apple";
        } elseif (preg_match('/CrOS/i', $ua)){
            $title = "Google Chrome OS";
            //$icon = "iconfont icon-iconchromeos";
            $icon = "fa fa-chrome";
        } elseif (preg_match('/Linux/i', $ua)) {
            $title = 'Linux';
            $icon = 'fa fa-linux';
            if (preg_match('/Ubuntu/i', $ua)) {
                $title = "Ubuntu Linux";
                //$icon = "iconfont icon-ubuntu";
            }elseif(preg_match('#Debian#i', $ua)) {
                $title = "Debian GNU/Linux";
                //$icon = "iconfont icon-debian";
            }elseif (preg_match('#Fedora#i', $ua)) {
                $title = "Fedora Linux";
                //$icon = "iconfont icon-fedora";
            }elseif (preg_match('/Android.([0-9. _]+)/i',$ua, $matches)) {
                $title= "Android";
                //$icon = "iconfont icon-android";
                $icon = "fa fa-android";
            }
        } elseif (preg_match('/Android.([0-9. _]+)/i',$ua, $matches)) {
            $title= "Android";
            //$icon = "iconfont icon-android";
            $icon = "fa fa-android";
        }
        return array("title"=>$title,
            "icon"=>$icon);
    }
    /**
     * 时光机页面ua,如果是手机设备,只显示设备类型,如果是电脑设备只显示电脑设备类型,如果是扩展发送,显示发送自「扩展」,如果是微信公众号,显示
     */
    public function returnTimeUa(){
        if ($this->ua == "weixin" || $this->ua == "weChat"){
            return array("title"=>_mt("微信公众号"),
                "icon"=>"fa fa-wechat");
        }elseif ($this->ua == "crx"){
            return array("title"=>_mt("Chrome扩展"),
                "icon"=>"fa fa-chrome");
        }elseif ($this->ua == "qq"){
            return array("title"=>_mt("QQ机器人"),
                "icon"=>"fa fa-qq");
        }else{
            return $this->returnOS();
        }
    }
}

修改/usr/themes/handsome/component/say.php

/* 第78行 */
<i class="glyphicon glyphicon-record m-l-sm"></i>&nbsp;

改成这样

<i class="<?php echo $ua->returnTimeUa()['icon'] ?> m-l-sm"></i>&nbsp;

头像动画

头像动画
添加到自定义CSS
第2行的width:90px是头像整体缩放
第20行scale(1.1),1.1是旋转后的缩放倍率,改成1就是不放大

/*头像动画*/
.thumb-lg{
    width:90px
}
.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.1);
    border-width:5px;
    animation:avatar .5s
}

修改版滑稽表情,微调表情栏

表情栏效果
打开/usr/themes/handsome/assets/js/features/OwO.min.js
删除这句:

<div class="OwO-title"><span>OwO</span></div>

我个人给每个表情加上了注释,略微修改了顺序。

食用方方法:

  • 解压

  • huaji文件夹丢进/usr/themes/handsome/usr/img/emotion/

  • OwO.json替换掉/usr/themes/handsome/usr/OwO.json

  • 如果嫌表情太大,可以在自定义CSS里加上

    img[class^="emotion-"] {
      max-height: 3em !important
    }

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>&nbsp;<?php _me("注册") ?>
</a>

在侧栏添加响应耗时

打开Web根目录/usr/themes/handsome/functions.php
把下面的函数添加到合适的位置

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

然后打开
打开Web根目录/usr/themes/handsome/component/sidebar.php
把这句话插到91行左右,最后活动的后面

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

Mac风格代码框

插件下载&食用方法:【链接

略微修改了黑色主题的css,减少了代码框的外阴影,微移了复制按钮的位置
文件路径:/usr/plugins/CodePrettify/static/styles/BlackMac.css

code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:#313238;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:2;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"]{padding:.5em;margin:.5em 0;overflow:auto;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#21252a}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999;}.token.punctuation{color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a;}.token.function-name{color:#6196cc;}.token.boolean,.token.number,.token.function{color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699;}.token.operator,.token.entity,.token.url{color:#67cdcc;}.token.important,.token.bold{font-weight:bold;}.token.italic{font-style:italic;}.token.entity{cursor:help;}.token.inserted{color:green;}pre.line-numbers{padding-bottom:.8em;padding-left:3.3em;counter-reset:linenumber}pre.line-numbers>code{white-space:inherit font-size:15px}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-.1em;width:3em;letter-spacing:-1px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.9em;text-align:right;background:#272c33}div.code-toolbar{font-size:100%;border-radius:4px;position:relative;box-shadow:0 0 10px 1px rgba(0,0,0,.4);padding-top:30px;background-color:#161616;margin:20px 4 20px 4}.code-toolbar:before{content:" ";position:absolute;-webkit-border-radius:50%;border-radius:50%;background:#fc625d;width:11px;height:11px;left:10px;top:10px;-webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;z-index:2}div.code-toolbar>.toolbar{padding-right:.4em;position:absolute;top:.09em;right:0;width:100%;text-align:center;}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar>.toolbar .toolbar-item{padding:0 1px 1px 3px;display:inline-block}div.code-toolbar>.toolbar button{cursor:pointer;transition:all .3s;position:absolute;background-color:transparent;right:4px;top:4px;font-size:12px;line-height:12px;padding:3px 5px;border:1px solid;border-radius:6px;opacity:0;color:#FFF;}div.code-toolbar:hover button{opacity:1;}div.code-toolbar>.toolbar:hover{text-decoration:none!important}div.code-toolbar>.div.code-toolbar>.toolbar button,div.code-toolbar>.toolbar span{font-family:'Ubuntu',sans-serif;font-weight:bold;font-size:.9em;opacity:0;color:#FFF;}div.code-toolbar:hover .toolbar span{opacity:1;}#post-content .code-block-fullscreen{padding-top:32px;position:fixed;width:80vw;height:80vh;min-height:80vh;top:0;left:0;right:0;bottom:0;margin:auto;z-index:9999999;box-shadow:0 0 20px 0 rgba(255,255,255,.4);animation:elastic 1s;overflow:hidden;background:#21252a;}.code-block-fullscreen code{--widthA:100%;--widthB:calc(var(--widthA) - 30px);height:var(--widthB);min-height:99%;overflow-y:scroll;height:100%;}.code-block-fullscreen-html-scroll{overflow:hidden;}.shelter{width:6.5px;height:6.5px;z-index:100;background:#313238;position:absolute;bottom:0;right:0;}.max-img::-webkit-scrollbar-track-piece{background:#eee}.max-img::-webkit-scrollbar{width:8px;height:6px}.max-img::-webkit-scrollbar-thumb{border-radius:6px;background-color:#777}.max-img::-webkit-scrollbar-thumb:hover{background-color:#bbb}pre::-webkit-scrollbar-track-piece{}pre::-webkit-scrollbar{width:8px;height:6px}pre::-webkit-scrollbar-thumb{border-radius:4px;background-color:#cbcbcb}pre::-webkit-scrollbar-thumb:hover{background-color:#bbb}code::-webkit-scrollbar-track-piece{}code::-webkit-scrollbar{width:6px;height:6px}code::-webkit-scrollbar-thumb{border-radius:6px;background-color:#777}code::-webkit-scrollbar-thumb:hover{background-color:#bbb}html::-webkit-scrollbar-track-piece{background:#eee}html::-webkit-scrollbar{width:8px;height:6px}html::-webkit-scrollbar-thumb{border-radius:4px;background-color:#cbcbcb}html::-webkit-scrollbar-thumb:hover{background-color:#bbb}

复制后提示

  1. 下载layer【链接
  2. 解压后把layer文件夹丢进/usr/themes/handsome/assets/js/
  3. 在主题外观设置里添加自定义javascript
    document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接!');};
  4. 在自定义HTML头部或尾部里添加
    <script src="/usr/customize/layer/layer.js"></script>

赞赏图标动画

放进自定义CSS里:

/*赞赏按钮动画*/
.btn-pay {
    border-radius: 15px 5px;
    transition: border-radius .1s
}
.btn-pay:hover {
    border-radius: 5px 15px;
    transition: border-radius .2s
}

上一页下一页微调

丢进自定义CSS里:

/*上一页按钮*/
li.previous a {
    border-radius: 5px 15px;
    transition: border-radius .2s
}
li.previous a:hover {
    border-radius: 15px 5px;
    transition: border-radius .2s
}
/*下一页按钮*/
li.next a {
    border-radius: 15px 5px;
    transition: border-radius .2s
}
li.next a:hover {
    border-radius: 5px 15px;
    transition: border-radius .2s
}

评论按钮微调

丢进自定义CSS里:

/*评论按钮*/
.btn-success {
    border-radius: 5px 5px;
    transition: border-radius .2s
}
.btn-success:hover {
    border-radius: 15px 15px;
    transition: border-radius .2s
}

首页文章列表悬停上浮

放进自定义CSS里:

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 5px rgba(73, 90, 47, 0.47)
}
最后修改:2020 年 07 月 25 日
Null