请注意，本文编写于 1923 天前，最后修改于 1638 天前，其中某些信息可能已经过时。
前言
Handsome主题现已更新至7.1，本文章仅作存档之用。
-
handsome 7.X 修改记录请前往：
-
handsome 6.0 修改记录请前往：
原文：
使用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> 改成这样
<i class="<?php echo $ua->returnTimeUa()['icon'] ?> m-l-sm"></i> 头像动画
添加到自定义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>我个人给每个表情加上了注释，略微修改了顺序。
√> 下载链接：改版滑稽表情包.zip
食用方方法：
-
解压
-
把
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> <?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}复制后提示
- 下载layer【链接】
- 解压后把
layer文件夹丢进/usr/themes/handsome/assets/js/下 - 在主题外观设置里添加自定义javascript
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');}; - 在自定义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)
}本文链接：https://blog.chrxw.com/archives/2019/10/14/338.html
转载请保留本文链接，谢谢
8 条评论
为啥我按照您的方法下载了layer把文件丢进正确目录，也设置了自定义JavaScript，保存之后也没效果呢（清除缓存多没用）
@Rudy在html头部或者html尾部加上这个 《!--复制弹窗--》
《script src="/usr/customize/layer/layer.js"》《/script》 我不小心忘记写了
@Chr
还是不行
上面的评论改了，记得把《》改成 @Rudy
滑稽表情包还需要修改一下主题下的css文件，不然表情显得太大了
@知稚 加上这句就行了 `img[class^="emotion-"]{max-width: 3em !important}`
@Chr我是直接将css中的paopao替换成huaji了