文章内操作推荐按照我的方法来进行。

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

一、我使用的插件

插件名描述版本下载地址、教程
AMP-MIPAMP/MIP 插件 for Typecho0.7.6.4Github
Access获取访客信息,生成统计图表2.0.2下载链接及教程
BaiduSubmit百度结构化插件魔改版0.7下载链接及教程
CodePrettify基于 prismjs 的代码语法高亮插件2.1.5下载链接及教程
CommentPush评论通知推送多服务1.7.1Github
CopyrightCopyright for Typecho1.0.4Github
HandsomehandsomePro 唯一配套插件7.3.1ihewro
KirinShiKi基于handsome主题的神代綺凜式魔改主题3.0.1Github
ShortLinks把外部链接转换为指定内部链接1.1.0 b1Github
UserAgent显示评论人使用的操作系统和浏览器信息(Handsome主题专用)1.1.1教程及下载地址

二、自定义鼠标样式

/*鼠标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>

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

上次因为网页加载慢打开控制台看了一下,发现某首音乐的 300x300 专辑图片有350多Kb
而且网页根本不需要分辨率这么高的专辑图,就在主题代码里看了看。
以下是修改方法
找到主题里的 /handsome/libs/component/Meting.php 文件
在第740行,将 $size = 300改为 $size = 100
因为QQ音乐没有100*100大小的专辑图片,在第746行的 case 'tencent':后按回车后添加一句 $size = 180;

六、使用自己的一言接口

此方法转载自:https://sunpma.com/669.html
首先下载这个压缩包
下载完成后将压缩包中的 hitokoto目录上传到你网站的随便一个位置
要修改的文件路径位于主题目录下的 index.php的35行开始
原始代码如下:

echo '加载中……';
                    echo '<script>
                     $.ajax({
                        type: \'Get\',
                        url: \'https://v1.hitokoto.cn/\',
                        success: function(data) {
//data = JSON.parse(data);
                           var hitokoto = data.hitokoto;
                          $(\'.indexWords\').text(hitokoto);
                        }
                     });
</script>';

修改为

<header class="bg-light lter wrapper-md">
<h1 class="m-n font-thin text-black l-h"><?php $this->options->title(); ?></h1>
<small class="text-muted letterspacing indexWords"><?php
if (@!in_array('hitokoto',$this->options->featuresetup)) {
$this->options->Indexwords();
}else{
echo '加载中……';
echo '<script>
$.post("把刚才上传的hitokoto目录路径填到这", function(hitokoto) {
$(".indexWords").html(hitokoto);
});
</script>';
}
?></small>
</header>

七、博客上方的心知天气(最新版有bug,已停用)

首先打开心知天气的官网,注册账号,并开通免费版服务。
之后在 /handsome/component/headnav.php中搜索 <!-- / search form -->,在搜索到的地方的前一行添加如下代码,并把其中的公钥和私钥修改为你自己的即可。

<!-- 知心天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "你的公钥",
    "hash": "你的私钥"
});
tpwidget("show");</script>
<!-- 心知结束-->

八、删除左侧栏组成,并把分类友链挪到上边

实现的效果如本站左侧,首先打开主题目录下的 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>

十四、右侧博客信息处的加载时间以及总访客量

在7.x的版本中,自定义方法可以直接在主题目录 functions_mine.php文件中,首先把以下代码添加到functions_mine.php文件最末尾的最后一个大括号外,其中访客总量里的sql语句的表名需要改成和你的数据库里的表名一样,比如我安装时候设置的数据库前缀为t_ ,代码中就填t_contents 。

function timer_start() {
        global $timestart;
        $mtime     = explode( ' ', microtime() );
        $timestart = $mtime[1] + $mtime[0];
        return true;
    }
    timer_start();
    function timer_stop( $display = 0, $precision = 3 ) {
        global $timestart, $timeend;
        $mtime     = explode( ' ', microtime() );
        $timeend   = $mtime[1] + $mtime[0];
        $timetotal = number_format( $timeend - $timestart, $precision );
        $r         = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
        if ( $display ) {
            echo $r;
        }
        return $r;
    }


  /**
     * 访问总量
     */
     function theAllViews(){
             $db = Typecho_Db::get();
             $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `t_contents`');
                 echo number_format($row[0]['SUM(VIEWS)']);
     }

之后打开 Handsome/compents/下的 sidebar.php文件,找到如下代码处(105行附近)

<span class="badge
           pull-right"><?php echo Utils::getOpenDays(); ?></span><?php _me("运行天数") ?></li>
           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="activity"></i></span> <span
                       class="badge
           pull-right"><?php echo Utils::getLatestTime($this); ?></span><?php _me("最后活动") ?></li>
       </ul>
      </section>
      <?php endif; ?>
         <?php if ($this->options->adContentSidebar != ""): ?>
         <!--广告位置-->

将代码复制到中间

<li class="list-group-item text-second"> <i class="glyphicon glyphicon-user text-muted"></i> <span class="badge
            pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
           <li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
           pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>

十五、在文章页面添加检测是否被百度收录

首先在服务器适当位置创建一个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;
}

$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];
    }
}
?>

然后在 functions_mine.php文件的最末尾添加如下代码

/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

if(checkBaidu($url)==1)
{echo "百度已收录";
}
else
{echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录!\" target=\"_blank\" 
href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
}

之后再 handsome/post.php 里搜索如下代码

<?php $this->category(' '); ?></span></li>

在这段代码后边添加

<!--百度收录-->
<li class="meta-baidu"><span class="post-icons"><i class="glyphicon glyphicon-refresh" id="baidu_icon"></span><span class="meta-value" id="baidu_result">加载中</span></li>
<script>

    function baidu_check(){
                //下方网址改为第一步创建的文件链接
        $.getJSON("https://wanghongfeng.cn/usr/tool/api/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('查询收录失败');
            }
        });
    }
    baidu_check();
</script>

这三个步骤完成之后,刷新前台文章页面即可看到效果。

最后修改:2020 年 10 月 31 日 10 : 47 PM
如果觉得我的文章对你有用,请随意赞赏