前言

记录一下本博客针对Handsome 6.0主题的修改

handsome 7.X 的修改记录参见：

!> 修改前务必备份

博客图标修改

feathericon图标修改方法：搜索data-feather，把后面的值改掉即可

顶部图标：

文件路径：/usr/themes/handsome/component/headnav.php
图标(从左往右)：music，message-square，log-in

右栏图标：

文件路径：/usr/themes/handsome/component/sidebar.php
我使用的图标：
图标1(从左往右)：thumbs-up，message-square，coffee
图标2(从上往下)：archive，message-square，calendar，activity

右侧悬浮按钮：

文件路径：/usr/themes/handsome/component/sidebar.php，/usr/themes/handsome/component/footer.php
图标(从上往下)：list，arrow-up

原图标改成feathericon以后会有轻微的位移，所以在自定义CSS里修正：

/*右侧悬浮按钮*/
.pos-abt svg {
    margin-top: 2px;
}

超链接特效 (与5.3.1相同)

修改/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 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):not(.post_inser_a):hover,
.comment-content-true a:not(.light-link):not(.post_inser_a):focus,
.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover,
.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus {
    color: #fff;
}
.comment-content-true a:not(.light-link):not(.post_inser_a)::before,
.comment-content-true a:not(.light-link):not(.post_inser_a)::after,
.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::before,
.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a)::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):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 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):not(.post_inser_a):hover::before,
.comment-content-true a:not(.light-link):not(.post_inser_a):focus::before,
.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):hover::before,
.wrapper-lg .entry-content a:not(.light-link):not(.post_inser_a):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.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;
}

自定义光标 (与5.3.1相同)

炫彩鼠标插件下载【链接】
因为这个插件不支持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;
}

修改版滑稽表情，微调表情栏 (与5.3.1相同)

打开/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
在第132行左右，把<div class="list-group bg-info auto m-b-sm m-b-lg">到</div>之间改成下面这样：

  <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>&nbsp;<?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>&nbsp;<?php _me("首页") ?>
    </a>
    <!--下面是注册和登陆按钮，不想显示的话可以删掉-->
      <?php if (!@in_array('hideLogin',$this->options->featuresetup)): ?>
      <a href="<?php $this->options->rootUrl(); ?>/admin/login.php" class="list-group-item">
      <i class="fontello fontello-chevron-right text-muted"></i>
      <i class="fontello fontello-fw fontello-sign-in m-r-xs"></i>&nbsp;<?php _me("登录") ?>
    </a>
    <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>
      <?php endif; ?>
  <!--上面是修改的部分-->
  </div>

## Mac风格代码框 (与5.3.1相同)
插件下载&食用方法：【[链接](https://www.xcnte.com/archives/523/)】

略微修改了黑色主题的css，减少了代码框的外阴影，微移了复制按钮的位置
文件路径：`/usr/plugins/CodePrettify/static/styles/BlackMac.css`
```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}

复制后提示 (与5.3.1相同)

1. 下载layer【链接】
2. 解压后把layer文件夹丢进/usr/themes/handsome/assets/js/下
3. 在主题外观设置里添加自定义javascript

   document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};

赞赏图标动画 (与5.3.1相同)

放进自定义CSS里：

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

微调底栏

添加到自定义CSS里：

/*底栏*/
.wrapper {
    padding: 10px
}

其他微调

/* 时光机 */
.img-square {
    border-radius: 50%;
}
.list-group-item .thumb-sm .img-square {
    border-radius: 5px;
}
/* TAB部件 */
.post_tab li.active>a {
    background-color: #ebf9fd !important;
}
/* 其他文章部件 */
div.preview {
    transition: all 0.3s;
}
div.preview:hover {
    box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.2);
}

本文链接：https://blog.chrxw.com/archives/2019/12/07/814.html

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