handsome自用美化记录

前言说明

[scode type="lblue"]本文章内容部分来源自网络，仅作个人备份使用[/scode]

[scode type="lblue"]当前使用handsome主题版本为8.3.0[/scode]

美化代码

[collapse status="true" title="右侧滚动条美化"]

右侧滚动条美化

复制下面代码到 handsome主题 > 设置外观 > 开发者设置 > 自定义CSS

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}
/*定义滚动条轨道*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #5459BB;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

[/collapse]

[collapse status="true" title="左侧导航"]

左侧导航

复制下面代码到 handsome主题 > 设置外观 > 高级设置 > 左侧边栏导航

{"name": "个人整理","feather":"sidebar",
"sub": [{
"name": "typecho",
"feather": "toggle-right",
"target":"_self",
"link": "https://www.wgrid.cn/tag/typecho"
}, {
"name": "discuz",
"feather": "toggle-right",
"target":"_self",
"link": "https://www.wgrid.cn/tag/discuz"
}]},
{"name":"相册","feather":"image","link":"https://www.wgrid.cn/category/image.html","target":"_self"},
{"name":"日记","feather":"lock","link":"https://www.wgrid.cn/category/lock.html","target":"_self"},
{"name":"归档","feather":"archive","link":"https://www.wgrid.cn/Archives.html","target":"_self"},
{ "name": "About","feather":"at-sign","link":"https://www.wgrid.cn/About.html","target":"_self"}

官方教程入口：点击进入

[/collapse]

[collapse status="true" title="复制成功提醒"]

复制成功提示

复制下面代码到 handsome主题 > 设置外观 > 开发者设置 > 自定义JavaScript

/* 复制成功提示代码开始 */ 
    kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创，转载请注明出处！<br> 本文作者：X.TiAn<br>原文链接："+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "5000"
    })
}}
/* 复制成功提示代码结束 */

[/collapse]

[collapse status="true" title="给博客添加UserAgent"]

添加UserAgent

下载本插件，解压放到usr/plugins/目录中
文件夹名改为UserAgent
修改Handsome主题，component目录下的 comments.php代码文件，大概第60~80行左右

<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

添加代码 <?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?><span> </span>，修改后代码如下：

<span class="comment-author vcard">
<b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>

登录管理后台，激活插件

插件链接：[button color="info" icon="" url="http://wwr.lanzoui.com/iR2jGqn9mch" type=""]点击下载[/button]

[/collapse]

[collapse status="true" title="底部页脚标签美化"]

底部页脚标签

添加自定义css
添加代码至 后台 > 自定义 CSS

/*页脚标签样式*/ 
.github-badge {
    display: inline-block;
    border-radius: 2px;

    text-shadow: none;
    font-size: 10px;
    color: #fff;
    line-height: 13px;

    background-color: #ABBAC3;

    margin-bottom: 3px;
}

.github-badge .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 2px 2px 2px 3px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.github-badge .badge-value {
    display: inline-block;
    padding: 2px 3px 2px 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.github-badge .bg-brightgreen {
    background-color: #4c1 !important;
}
.github-badge .bg-green {
    background-color: #97CA00 !important;
}
.github-badge .bg-yellow {
    background-color: #dfb317 !important;
}
.github-badge .bg-zise {
    background-color:#F08080 !important;
}
.github-badge .bg-orange {
    background-color: #fe7d37 !important;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-blue {
    background-color: #007ec6 !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
    background-color: #555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
    background-color: #9f9f9f !important;
}

选择显示位置
打开 Handsome主题设置 > 博客底部左侧信息添加以下代码

<a class="github-badge">
     <span class="badge-subject">Copyright</span>
     <span class="badge-value bg-brightgreen">我的生活随笔</span>
</a>
|
<a class="github-badge" target="_blank" href="https://beian.miit.gov.cn">
     <span class="badge-subject">皖 ICP备</span>
     <span class="badge-value bg-red">20002787号-1 </span>
</a>

打开 Handsome主题设置 > 博客底部右侧信息添加以下代码

<a class="github-badge" target="_blank" href="https://www.ihewro.com/">
     <span class="badge-subject">Themes</span>
     <span class="badge-value bg-blue">Handsome</span>
</a>
|
<a class="github-badge" target="_blank" href="https://typecho.org">
     <span class="badge-subject">Powered</span>
     <span class="badge-value bg-orange">Typecho</span>
</a>

删除多余代码
位置在 125-140行之间
删除 usr/themes/handsome/component/footer.php中以下代码

Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank"
                                                                                                     href="https://www.ihewro.com/archives/489/">handsome</a>

© <?php echo date("Y"); ?> Copyright

[/collapse]

[collapse status="true" title="文章内视频自适应尺寸"]

自适应视频尺寸，不会像以前嵌入视频时尺寸大小出现错误

视频自适应尺寸

将以下代码添加至 Handsome主题外观>设置外观开发者设置>自定义CSS

/*视频挂载*/

.iframe_video {
position: relative;
width: 100%;
}

@media only screen and (max-width: 767px) {
.iframe_video {
height: 15em;
}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
.iframe_video {
height: 20em;
}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.iframe_video {
height: 30em;
}
}

@media only screen and (min-width: 1200px) {
.iframe_video {
height: 40em;
}
}

.iframe_cross {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%
}

.iframe_cross iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0
}

演示

打开你想挂载在网站的b站视频
复制视频源代码（打开b站视频链接 > 点击转发图标 > 复制嵌入代码）
在复制的嵌入链接的iframe与src之间添加class="iframe_video"
完成，刷新网站感受效果吧
示例：<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=502703774&bvid=BV1LK411c7jc&cid=326183219&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

[/collapse]

[collapse status="true" title="文末赞赏按钮跳动"]

文末赞赏按钮跳动

复制下列代码至 后台 > 外观 > 设置外观 > 开发者设置 > 自定义CSS

/* 赞赏按钮跳动 */

@keyframes drop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}

div.support-author>button.btn-pay {
    animation: drop 1s infinite;
}

button.btn-pay {
    color: #fff!important;
    background-color: #b29d6d;
    border-color: #b29d6d;
}

[/collapse]

[collapse status="true" title="自定义右键菜单"]

此方法可以使网站的右击菜单自定义

自定义右键菜单美化

将以下代码添加至后台 > 开发者设置 > 自定义输出body尾部的HTML代码

<!-- 引用layer.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
<!-- 自定义右键菜单美化 -->
  <style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://xxx.com/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
        <li><a href="https://www.wgrid.cn/Archives.html"><i class="fa fa-meh-o fa-fw"></i><span>归档</span></a></li>  
           <li><a href="https://www.wgrid.cn/About.html"><i class="fa fa-pencil-square-o fa-fw"></i><span>关于我</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
   
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

[/collapse]

[collapse status="true" title="添加文章版权信息"]

添加文章版权信息

将以下代码添加至Typecho > usr > themes > handsome > post.php 打赏模块之前

<!--添加分割线-->
<hr class="content-copyright" style="margin-top:10px">
<!--版权声明开始-->
<div class="entry-content l-h-2x">
               <div style="margin: 1.6em 0; padding: 13px 45px!important; border-left: 3px solid #dde6e9!important; background-color: #f3f5f7;text-align: left;">
                 <span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
                 <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
                 <span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
                 <span>作品采用：<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a></span>
               </div>
             </div>
<!--版权声明结束-->

[/collapse]

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »