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

2019-12-07T15:52:00

前言

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

!!!修改前记得备份!!!

博客图标修改

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

顶部图标:

文件路径:/usr/themes/handsome/component/headnav.php
图标(从左往右):musicmessage-squarelog-in

右栏图标:

文件路径:/usr/themes/handsome/component/sidebar.php
我使用的图标:
图标1(从左往右):thumbs-upmessage-squarecoffee
图标2(从上往下):archivemessage-squarecalendaractivity

右侧悬浮按钮:

文件路径:/usr/themes/handsome/component/sidebar.php/usr/themes/handsome/component/footer.php
图标(从上往下):listarrow-up

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

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

文章框架添加阴影

添加到自定义CSS里:


## 超链接特效 (与5.3.1相同)
![超链接特效](https://blog.chrxw.com/usr/uploads/2019/11/53854789.gif)
修改`/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相同)
![自定义光标](https://blog.chrxw.com/usr/uploads/2019/11/1300317515.png)
炫彩鼠标插件下载【[链接](https://www.hoehub.com/PHP/typecho-HoerMouse.html)】
因为这个插件不支持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相同)
![表情栏效果](https://blog.chrxw.com/usr/uploads/2019/11/2688306042.png)
打开`/usr/themes/handsome/assets/js/features/OwO.min.js`
删除这句:

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

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

√> 下载链接:[改版滑稽表情包.zip](https://file.chrxw.com/Web%E8%B5%84%E6%BA%90/huaji.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页面按钮修改
![修改后的404页](https://blog.chrxw.com/usr/uploads/2020/03/1929028440.png)
打开`/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 ([email protected]_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相同)

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

略微修改了黑色主题的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}

复制后提示 (与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);
}
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »