以下内容推荐按照我的操作来修改。
我的习惯是在Handsome主题目录下创建 diy.jsdiy.css两个文件,之后在主题中引用这两个文件.创建完成后,编辑主题目录内的 /handsome/component/footer.php 文件,在最后<!--主题组件js加载结束--><!--用户自定义js--> 中添加以下代码,后文中css及js均在这两个文件中修改.

<script src="/usr/themes/handsome/diy.js" type="text/javascript"></script>
<link rel="stylesheet" href="/usr/themes/handsome/diy.css" type="text/css">

diy.js文件内容为:

//所有js代码网页加载完后500毫秒后执行
window.onload = function() {
        setTimeout(function() {
     //无特殊说明,js代码均添加到以下区域



     //无特殊说明,js代码均添加以上区域
        }, 5e2);
}
//js函数添加在此处后
 

本站的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下载链接及教程

二、自定义鼠标样式

diy.css文件中添加以下代码:

/*鼠标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>&nbsp;|&nbsp;Theme by <a target="_blank"
                                                                                                      href="https://www.ihewro.com/archives/489/">handsome</a>
      </span>
        <span class="text-ellipsis">&copy;&nbsp;<?php echo date("Y"); ?> Copyright&nbsp;

添加以下代码到diy.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 7.3.1及以下适用,8.0及以上不可用

编辑主题内 /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>


七、右侧栏显示网站总访问量

编辑主题目录内的 /handsome/component/sidebar.php 文件
找到<?php _me("最后活动") ?></li>(104行左右)
修改代码位置
</li></ul>前中添加以下代码

  <li class="list-group-item text-second"> <i class="glyphicon glyphicon-user text-muted"></i> <span id="sumview" class="badge
            pull-right">加载中</span><?php _me("总访客数") ?></li> 

diy.js末尾添加如下代码

    function sumview(){
        $.post("/api/sumview.php", function(sumview) {
    $("#sumview").html(sumview);
});
    }

主题设置-PJAX-PJAX回调函数中添加sumview();
在Typecho根目录创建api目录,目录内创建sumview.php,文件内容如下

<?php 
include('../config.inc.php');
function theAllViews(){
             $db = Typecho_Db::get();
             //t_contents中下划线前的t改为你安装typecho时的数据库前缀
             $row = $db->fetchAll('SELECT SUM(VIEWS) as sumview FROM `t_contents`');
                 echo $row[0]['sumview'];
     }
theAllViews();
?>


八、屏蔽F12、复制弹窗

将以下代码添加到diy.js

//复制弹框
$("body").bind('copy',
        function(e) {
            copytips()
        })
//禁用F12
document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        event.keyCode=0;
        event.returnValue=false;
    }

}           

将以下代码修改后添加到diy.js末尾

 function copytips() {
      var sitesurl=window.location.href;
        $.message({
            message: "尊重原创,转载请注明出处!<br> 本文作者:王洪峰<br>原文链接:" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "1500"
        })
    }

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

将以下代码添加到diy.js

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)
    }
});

十、鼠标点击特效

将以下代码添加到diy.js中

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  style="font-size:32px;bottom:20px" class="glyphicon glyphicon-phone"  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>
<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>

将qrcode.min.js文件上传到合适位置后将以上代码中的链接修改即可


十二、文章页面添加百度是否收录字样

效果见文章标题下
编辑主题目录内的 /handsome/post.php 文件, 找到 <?php $this->category(' '); ?></span></li>(70行左右)
在下一行的 </ul>前添加以下代码

 <li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></i></span><span class="meta-value" id="baidu_result">加载中</span></li>

在之前创建的api目录创建baidu.php,内容如下

<?php
/**
 * Baidu
 * @editer: Weifeng
 * @link: https://wfblog.net
 * @version: 1.0
 */

error_reporting(0);
header("Access-Control-Allow-Origin:*");
header('Content-type: application/json');

$domain = @$_GET['domain'];
if(!isset($domain) || empty($domain) || $domain==''){
    $data = array(
        "code" => false,
        "msg" => "未传入请求参数!"
    );
    echo json_encode($data,JSON_UNESCAPED_UNICODE);
    exit;
}
if(substr($domain, -1) == '/'){
    $domain = substr($domain,0,strlen($domain)-1);
}

$data = checkBaidu($domain);
echo json_encode($data,JSON_UNESCAPED_UNICODE);

function checkBaidu($url){
    $header = array(
        "Host:www.baidu.com",
        "Content-Type:application/x-www-form-urlencoded",//post请求
        "Connection: keep-alive",
        "Referer:https://www.baidu.com",
        "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"
    );
    $url = 'https://www.baidu.com/s?ie=UTF-8&wd='.urlencode($url).'&usm=3&rsv_idx=2&rsv_page=1';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt ($ch, CURLOPT_HTTPHEADER, $header);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($ch);
    curl_close($ch);
    if(strpos($output, '没有找到') || strpos($output, '很抱歉')){
        $data = array(
            "code" => 403,
            "msg" => "该域名暂时未被百度收录!"
        );
    }else{
        $number = GetBetween($output,'<span class="nums_text">百度为您找到相关结果约','个</span>');
        if(empty($number) || $number == 0){
            $number = GetBetween($output,'<b>找到相关结果数约','个</b></p>');
            if(empty($number) || $number == 0){
                $data = array(
                    "code" => false,
                    "msg" => "获取百度收录失败!"
                );
                return $data;
            }
        }
        $data = array(
            "code" => 200,
            "msg" => "该域名已被百度收录!",
            "number" => str_replace(',','',$number)
        );
    }
    return $data;
}

function GetBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
}
?>

主题设置-PJAX-PJAX回调函数中添加baidu_check();
diy.js中添加

if ( $('#baidu_result').length >0){
        baidu_check()
}
在diy.js最后添加以下代码
function baidu_check(){
                //下方网址改为第一步创建的文件链接
        $.getJSON("https://wanghongfeng.cn/api/baidu/baidu.php?domain="+window.location.href,function(result){ 
            if (result.code == 200) {
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-ok-circle');
                $('#baidu_result').text('百度已收录');
            }else if(result.code == 403){
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-info-sign');
                $('#baidu_result').text('百度未收录');
            }else{
                $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-remove-circle');
                $('#baidu_result').text('查询收录失败');
            }
        });
    }

最后修改:2021 年 03 月 21 日 10 : 47 PM
如果觉得我的文章对你有用,请随意赞赏
END
文章标题:我的Handsome主题魔改记录
本文链接:https://wanghongfeng.cn/handsome-diy.html
版权说明:若无注明,本文皆王洪峰's blog原创,转载请保留文章出处。