以下内容推荐按照我的操作来修改。

我的习惯是在Handsome主题目录下新建一个diy文件夹,内部创建 diy.jsdiy.css两个文件,然后在 header.php 引入 diy.css , footer.php 中引入 diy.js ,修改的内容均在这两个文件内修改。

一、我使用的插件

插件名描述版本下载地址、教程
CommentPush评论通知推送多服务1.7.1Github
HandsomehandsomePro 唯一配套插件7.3.1ihewro
KirinShiKi基于handsome主题的神代綺凜式魔改主题3.0.1Github
ShortLinks把外部链接转换为指定内部链接1.1.0 b1Github
CommentFilter按照规则过滤评论1.1.0下载链接
WeTypecho微信小程序WeTypechoAPI接口插件0.1使用教程
BaiduSubmit百度结构化插件魔改版0.7下载链接及教程

二、自定义鼠标样式

/*鼠标cur文件自己替换*/
/*自定义鼠标*/
*{
cursor: url(https://wanghongfeng.cn/default.cur),pointer;
}
/*自定义超链接鼠标*/
a:hover{
cursor: url(https://wanghongfeng.cn/pointer.cur),pointer;
}

三、给文章里的图片四周加上一层阴影

.wrapper-lg img{
    box-shadow: darkgrey 0px 0px 5px 5px;
}

效果如图:
阴影效果

四、页脚美化

删除/usr/theme/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>

添加以下代码到CSS中:

/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

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

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

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}

/*这是优化底部栏的css,应该不会影响没开启炫酷透明功能时候的主题,如果有问题就删除下面这行即可*/
.wrapper {
  padding: 11px;
}

将下列代码修改后分别填写到 主题设置-开发者设置-博客底部左/右侧信息中即可。

<!-- 博客底部左侧信息 -->
<div class="github-badge">
<a href="./" title="©2020 王洪峰'blog">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">王洪峰'blog</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="http://www.beian.miit.gov.cn" target="_blank" title="豫ICP备17025918号-1">
<span class="badge-subject">豫ICP备</span><span class="badge-value bg-green">17025918号-1</span>
</a>
</div>
<!-- 博客底部右侧信息 -->
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>

五、修改主题音乐播放器的专辑图大小

编辑主题里的 /handsome/libs/component/Meting.php 文件
在第740行,将 $size = 300改为 $size = 100
由于QQ音乐没有100*100的专辑图片,所以需在第746行 case 'tencent':后添加一句 $size = 180;

六、分类及友链显示在导航内

效果看本站左侧
打开主题目录下的 componet/aside.php文件,找到如下三张图中的代码,将其剪切至第四幅图中红框位置,之后进入主题设置中 页面元素显示设置--左侧边栏元素控制中将组成关闭即可

分类

页面

友链

挪动到的位置

七、左侧插入自定义伸缩框

效果看本站左侧
在上一步插入代码的位置,添加如下代码。

<li>
    <a data-no-instant class="auto">
        <span class="pull-right  text-muted">
            <i class="fa icon-fw fa-angle-right text"></i>
            <i class="fa icon-fw fa-angle-down text-active"></i>
        </span>
        <i class="iconfont icon-c-classification"></i>
        <span><?php _me("伸缩框标题") ?></span>
    </a>


       <ul class="nav nav-sub dk">
        <li><a href="https://example.com"><span>需要几条这三行就复制多少遍</span></a></li>
       </ul>
       
       
</li>

八、屏蔽F12、复制弹窗

本站目前未开启屏蔽复制及F12,

//复制弹框
$("body").bind('copy',
        function(e) {
            copytips()
        })           
 function copytips() {
      var sitesurl=window.location.href;
        $.message({
            message: "尊重原创,转载请注明出处!<br> 本文作者:****<br>原文链接:" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "15000"
        })
    }
//禁用F12
document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        event.keyCode=0;
        event.returnValue=false;
    }

}

九、网页失去焦点标题自动变化

var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "网页已崩溃!";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来了! " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

十、鼠标点击特效

var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 100000000,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

十一、网页悬浮二维码图标(效果见网页右下角)

相关文件:点此下载
打开 Handsome/compents/sidebar.php文件, 找到 <? php if (IS_TOC): ?>(140行左右)字样,在此行前面添加如下代码

<div id="qrcode" class="tools-item" title="阅读转移">手机观看<br/><div id="qrcode-img"></div><i  class=" fa fa-mobile  fa-3x" aria-hidden="false"></i></div>

在sidebar.php的最后 <? php endif; ?> 前添加如下代码

<style>
    /* 工具栏 - start */
    .tools-item {
        position: fixed;
        bottom: 20px;
        right: 247px;
        width: 56px;
        height: 45px;
        text-align: center;
    }

    .tools-item > i {
        display: inline;
        line-height: 45px;
    }

    #qrcode-img {
        position: fixed;
        bottom: 70px;
        right: 280px;
        display: none;
        box-shadow: 0 0 20px #B6DFE9;
   
        padding:25px;
        background: #fff;
    }
</style>
<link rel="stylesheet" href="你的font-awesome.min.css路径" type="text/css"/> 
<script type="text/javascript" src="你的qrcode.min.js路径"></script>
<script type="text/javascript">
    $(function(){
        var system = { 
            win: false, 
            mac: false, 
            xll: false
        }; 
        //检测平台 
        var p = navigator.platform; 
        system.win = p.indexOf("Win") == 0; 
        system.mac = p.indexOf("Mac") == 0; 
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
        if (system.win || system.mac || system.xll) { 
 
        } else {
            $("#qrcode").attr("hidden","hidden");
        } 

        var url = encodeURI(location.href);
        var select = true;
        $('#qrcode').hover(function() {
            if(select) {
                $('#qrcode-img').empty();
                new QRCode(document.getElementById("qrcode-img"), {
                    text: url,
                    width: 180,
                    height: 180,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.L
                });
                $('#qrcode-img').show();
                select = false;
            } else {
                $('#qrcode-img').hide();
                select = true;
            }
        });
    });
</script>

将相关的CSS、js文件上传到合适位置后将以上代码中的链接修改即可

最后修改:2021 年 02 月 24 日 12 : 30 AM
如果觉得我的文章对你有用,请随意赞赏