前言

Handsome主题又更新了，改动挺大的，还好之前有记录，摸索着又加了个性化内容。

handsome 6.0 的修改记录参见：

Handsome主题修改记录 - 适用于6.0

前言记录一下本博客针对Handsome 6.0主题的修改handsome 7.X 的修改记录参见： 修改前务必备份...

!> 修改前务必先备份

超链接特效

超链接特效

修改/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):not(.post_inser_a),.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a){position:relative;margin:auto 4px;color:#23b7e5;-webkit-transition:color .3s;transition:color .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):not(.post_inser_a):focus,.comment-content-true a:not(.light-link):not(.post_inser_a):hover,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover{color:#fff}
.comment-content-true a:not(.light-link):not(.post_inser_a)::after,.comment-content-true a:not(.light-link):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{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):not(.post_inser_a)::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before{background-color:#23b7e5;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,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):not(.post_inser_a):focus::before,.comment-content-true a:not(.light-link):not(.post_inser_a):hover::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus::before,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover::before{-webkit-transform:rotateX(0);transform:rotateX(0)}
.comment-content-true a:not(.light-link):not(.post_inser_a)::after,.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::after{border-bottom:1px solid #23b7e5}

如果使用版权提示插件，链接有可能会超出提示框，添加以下css解决：

.content-copyright {overflow: hidden}

自定义左侧栏

左侧栏导航

!> 有一定风险，修改前一定要先备份

文件路径/usr/themes/handsome/component/aside.php，大概在85行~212行，替换<div class="line dk hidden-folded"></div>到<?php endif; ?>之间的内容：

<div class="line dk hidden-folded"></div>
<li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
    <span><?php _me("导航") ?></span>
</li>
<?php
$hideHomeItem = false;
if (!empty(Typecho_Widget::widget('Widget_Options')->asideItems)) {
    $json = '[' . Utils::remove_last_comma(Typecho_Widget::widget('Widget_Options')->asideItems) . ']';
    $asideItems = json_decode($json);
    $asideItemsOutput = "";
    foreach ($asideItems as $asideItem) {
        @$itemName = $asideItem->name;
        @$itemStatus = $asideItem->status;
        @$itemSub = $asideItem->sub;
        if ($itemName === 'home' && strtoupper($itemStatus) === 'HIDE') {
            $hideHomeItem = true;
            continue; //本次循环结束，不再执行下面内容
        }
        $haveSub = false;
        $subListHtml = "";
        //                      print_r($itemSub);
        if (is_array($itemSub)) {
            $haveSub = true;
            $subListHtml .= '<ul class="nav nav-sub dk">';
            foreach ($itemSub as $subItem) {
                $subListHtml .= Content::returnLeftItem($subItem, false, "");
            }
            $subListHtml .= '</ul>';
        }
        $asideItemsOutput .= Content::returnLeftItem($asideItem, $haveSub, $subListHtml);
    }
}
?>
<?php if (!$hideHomeItem) : ?>
    <!--主页-->
    <li>
        <a href="<?php $this->options->rootUrl(); ?>/" class="auto">
            <span class="nav-icon"><i data-feather="home"></i></span>
            <span><?php _me("博客首页") ?></span>
        </a>
    </li>
    <!-- /主页 -->
<?php endif; ?>
<?php echo @$asideItemsOutput ?>
<?php if (@!in_array('component', $this->options->asideSetting)) : ?>
    <!--分类category-->
    <li>
        <a href="https://chrxw.com" class="auto">
            <span class="nav-icon"><i data-feather="gift"></i></span>
            <span><?php _me("一级分类") ?></span>
        </a>
    </li>
    <li <?php echo $class; ?>>
        <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="grid"></i></span>
            <span><?php _me("更多分类") ?></span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a>
                    <span><?php _me("分类") ?></span>
                </a>
            </li>
            <!--二级分类-->
            <li>
                <a href="https://chrxw.com/" class="auto">
                    <span class="nav-icon"><i data-feather="gift"></i></span>
                    <span><?php _me("二级分类") ?></span>
                </a>
            </li>
        </ul>
    </li>
    <!--独立页面pages-->
    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
        <span><?php _me("页面") ?></span>
    </li>
    <li class="nav-sub-header">
        <a data-no-instant>
            <span><?php _me("页面") ?></span>
        </a>
    </li>
    <!--友情链接-->
    <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="link"></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>
            <!--使用links插件，输出全站友链-->
            <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><span>{name}</span></a></li>";
            Handsome_Plugin::output($mypattern1, 0, "ten"); ?>
        </ul>
    </li>
    <li>
        <a href="https://chrxw.com/" class="auto">
            <span class="nav-icon"><i data-feather="gift"></i></span>
            <span><?php _me("独立页面") ?></span>
        </a>
    </li>
<?php endif; ?>

导航模板：

<li>
    <a href="链接" class="auto">
        <span class="nav-icon"><i data-feather="图标"></i></span>
        <span><?php _me("名称") ?></span>
    </a>
</li>

自定义光标

自定义光标

√> 图标素材下载：链接

解压后上传服务器，nomral.cur是默认光标，link.cur是手掌光标。

以下内容放进自定义CSS里，路径自行修改。

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

增加滑稽表情，微调表情栏

表情栏效果

√> 下载链接：改版滑稽表情包.zip

食用方法：

  • 下载表情包以后先解压

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

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

  • 如果嫌表情太大，可以在自定义CSS里加上这些：

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


* 去除烦人的`OwO`标题：
打开`/usr/themes/handsome/assets/js/features/OwO.min.js`，删除这句：

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

404页面添加返回按钮

修改后的404页

打开/usr/themes/handsome/404.php
在第95行左右，把<div class="list-group bg-info auto m-b-sm m-b-lg">后面插入：

  <div class="list-group bg-info auto m-b-sm m-b-lg">
  <!--返回按钮-->
    <a href="#" onclick="javascript:history.go(-1);" class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-angle-double-left m-r-xs"></i> <?php _me("返回") ?>
    </a>
  <!--原来的按钮-->
    <a href="<?php $this->options->rootUrl(); ?>" class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-home m-r-xs"></i> <?php _me("首页") ?>
    </a>
  <!--后续省略-->
  </div>

Mac风格代码框

√> 插件下载&食用方法：链接

稍微改了下BlackMac的主题，去除了阴影，然后让复制按钮和代码类型一直显示。

文件路径：/usr/plugins/CodePrettify/static/styles/BlackMac.css

code[class*=language-],pre[class*=language-]{color:#f8f8f2;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;font-size:13px}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.cdata,.token.comment,.token.doctype,.token.prolog{color:#997f66}.token.punctuation{opacity:.7}.namespace{opacity:.7}.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag{color:#d1939e}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#bce051}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f4b73d}.token.atrule,.token.attr-value,.token.keyword{color:#d1939e}.token.important,.token.regex{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red}pre.line-numbers{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:0;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;padding-top:30px;background-color:#161616;margin:20px 0 20px 0}.code-toolbar:before{content:" ";position:absolute;-webkit-border-radius:50%;border-radius:50%;background:#fc625d;width:11px;height:11px;left:10px;top:10px;z-index:2}div.code-toolbar>.toolbar{padding-right:.4em;position:absolute;top:.09em;right:.2em;width:100%;text-align:center}div.code-toolbar>.toolbar .toolbar-item{padding:0 1px 1px 3px;display:inline-block}div.code-toolbar>.toolbar button{cursor:pointer;position:absolute;background-color:transparent;right:2px;top:4px;font-size:12px;line-height:12px;padding:3px 5px;border:none;color:#fff}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:700;font-size:.9em;color:#fff}#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;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{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{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}

复制后提示 (与5.3.1相同)

√> layer下载地址：链接

  1. 解压后把layer文件夹丢进/usr/customize/下
  2. 添加自定义javascript
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};
  1. 添加尾部HTML代码：
<script src="/usr/customize/layer/layer.js"></script>

其他微调

添加到自定义CSS里：

/* 右侧栏气泡颜色加深 */
div.post-tags>a,aside.asideBar .badge{background-color:#777}
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

本文链接：https://blog.chrxw.com/archives/2020/07/25/1315.html

转载请保留本文链接，谢谢

最后修改：2020 年 08 月 21 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏