三十一：评论添加一键打卡

主题设置 - 开发者设置 - 自定义JavaScript 和 PJAX回调函数 均添加上以下代码

function a(a, b, c) {
        if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
        else if (a.selectionStart || "0" == a.selectionStart) {
            var l = a.selectionStart,
                m = a.selectionEnd,
                n = m;
            c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
            c ? n += b.length + c.length : n += b.length - m + l;
            l == m && c && (n -= c.length);
            a.focus();
            a.selectionStart = n;
            a.selectionEnd = n
        } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
        c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
    daka: function() {
        a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
    },
    zan: function() {
        a(c, " 写得好好哟,我要给你生猴子！::funny:04:: ")
    },
    cai: function() {
        a(c, "骚年,我怀疑你写了一篇假的文章！::funny:03:: ")
    }
};

主题目录的component/comments.php里面的130行左右参照下面代码进行修改

                <label for="comment"><?php _me("评论") ?>
                    <span class="required text-danger">*</span></label>
                <textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?></textarea>
                <div class="OwO" style="display: inline;"></div>
                                    <div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div></div>
      <div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
  <div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
                <div class="secret_comment" id="secret_comment" data-toggle="tooltip"
                data-original-title="<?php _me("开启该功能，您的评论仅作者和评论双方可见") ?>">

主题设置 - 开发者设置 - 自定义CSS 添加以下代码

.secret_comment {
    top: 5px;
}
.OwO.OwO-open .OwO-body {
    display:table
}

三十二：访客总数统计

在/usr/themes/handsome/functions.php文件中添加以下统计代码

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

在/usr/themes/handsome/component/sidebar.php文件中插入以下调用代码

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

其他主题单独调用代码

<?php echo theAllViews();?></span><?php _me("访客总数") ?>

三十三：404自动返回首页

在/usr/themes/handsome/404.php文件130行左右添加以下代码
添加在<h1 class="text-shadow text-white">404</h1>这行下面即可

<br>
<small class="text-muted letterspacing">
<b id="sp">10</b>秒后自动返回···<br>
<a class="text-muted letterspacing" href="#" onclick="javascript:history.go(-1);">立刻返回</a>

再在最后面标签前添加以下代码

<script type="text/javascript">
onload = function(){setInterval(go, 1000);};var x=10;
function go() {x--;if(x>0) {document.getElementById("sp").innerHTML = x;}else{history.go(-1);}}
</script>

三十四：一言打字特效

**第一步
先把这两个js放到：设置外观--开发者设置--自定义输出head头部的HTML代码**

<script src="https://i.gordsky.cn/assets/weiyu/jquery.min.js"></script>
<script src="https://i.gordsky.cn/assets/weiyu/typed.min.js"></script>

**第二步
把下面的js代码。复制到：设置外观--开发者设置--自定义JavaScript**

function typedword(){ $.ajax({ type:"get", url:"https://api.gordsky.cn/Love/", data:{type:'json10'}, async:true, success:function(word){ var list = []; for(var i = 0 ;i < word.length ; i++){ list.push(word[i]['word']); } $("#word").typed({ strings: list, typeSpeed: 20, loop: true, backDelay: 3000, }); } }); }

**第三步
把下面的html代码复制到：设置外观--初级设置--首页一行文字介绍**

<p><i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i><span id="word"><i class="glyphicon glyphicon-heart" aria-hidden="true"></i></span><i style="color:red;" class="glyphicon glyphicon-heart" aria-hidden="true"></i><script>$(function(){typedword();})</script></p>

三十五：导航栏设置QQ头像

https://blog.tianlei.work/qqtx.php?qq=123456

将地址中的123456修改为自己QQ然后将地址添加到初级设置 - 头像图片地址

三十六：开启全站灰色（黑白模式）

设置外观--开发者设置--自定义CSS 添加以下代码

<!--开启黑白模式-->
html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
<!--黑白模式结束-->

三十七：修复搜索框按钮

**Handsome主题的搜索框按钮一直有问题，按不下去不能正常使用，可以按以下方法修复
打开/usr/themes/handsome/component/headnav.php文件
搜索search_submit然后将整行替换成如下代码**

<span id="search_submit" class="transparent input-group-btn" onclick=jumpForSearch(search_input.value)>

然后在文件的最后面添加如下代码后保存即可

<!--/开始修复搜索按钮-->
<script type="text/javascript">
function jumpForSearch(search_ct){
  if(search_ct.length>0){
    $.pjax({ 
    url: "https://"+document.domain+'/search/'+search_ct, 
    container: '#content',
    fragment: '#content',
    timeout: 8000
    });
  }
}
</script>
<!--/修复搜索按钮结束-->

三十八：左侧下拉框

**修改/usr/themes/handsome/component/aside.php文件
在125行<li <?php echo $class; ?>>上面添加以下代码
示例一：默认打开下拉框并在本页面打开链接**

    <!--左侧下拉框-->
      <a class="auto">
      <li class="active">
      <span class="pull-right text-muted">
      <i class="fontello icon-fw fontello-angle-right text"></i>
      <i class="fontello icon-fw fontello-angle-down text-active"></i>
      </span>
      <i class="glyphicon glyphicon-link"></i>
      <span>工具</span></a>
      <ul class="nav nav-sub dk">
      <li class="nav-sub-header">
      <a data-no-instant="">
      <span>工具</span></a>
      </li>
     <!--网站-->
      <li>
      <a href="https://sunpma.com/other/douyin" class="auto" target="_blank">
      <i class="glyphicon glyphicon-link"></i>
      <span>抖音解析下载</span></a>
      </li>
      <li>
      <a href="https://sunpma.com/other/musicss" class="auto" target="_blank">
      <i class="glyphicon glyphicon-link"></i>
      <span>音乐解析下载</span></a>
      </li>
      </ul>
      </li>
    <!--下拉框结束-->

示例二：默认关闭下拉框并在新页面打开链接

   <!--左侧下拉框-->
      <li>
      <a class="auto">
      <span class="pull-right text-muted">
      <i class="fontello icon-fw fontello-angle-right text"></i>
      <i class="fontello icon-fw fontello-angle-down text-active"></i>
      </span>
      <i class="glyphicon glyphicon-link"></i>
      <span>工具</span></a>
      <ul class="nav nav-sub dk">
      <li class="nav-sub-header">
      <a data-no-instant="">
      <span>工具</span></a>
      </li>
     <!--网站-->
      <li>
      <a href="https://sunpma.com/other/douyin" class="auto" target="_blank">
      <i class="glyphicon glyphicon-link"></i>
      <span>抖音解析下载</span></a>
      </li>
      <li>
      <a href="https://sunpma.com/other/musicss" class="auto" target="_blank">
      <i class="glyphicon glyphicon-link"></i>
      <span>音乐解析下载</span></a>
      </li>
      </ul>
      </li>
    <!--下拉框结束-->

三十九：文章页面显示标签云

**编辑/usr/themes/handsome/component/sidebar.php文件
在<?php if (IS_TOC): ?>上面添加以下代码**

<!--文章显示标签云-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
    <h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>
    <div class="tags l-h-2x">
        <?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
        <?php if($tags->have()): ?>
             <?php while ($tags->next()): ?>
                <a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a>
            <?php endwhile; ?>
        <?php endif; ?>
    </div>
</section>
<!--显示标签云结束-->

四十：底栏高度设置

后台-设置外观-开发者设置-自定义CSS 添加以下代码

<!--底栏高度开始-->
.wrapper {
    padding: 10px
}
<!--底栏高度结束-->

四十一：背景云雾特效

后台-设置外观-开发者设置-自定义CSS 添加以下代码

<!--背景云雾特效-->
{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}figure{margin:0}.absolute-bg{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;overflow:hidden}.fog{position:relative;height:100vh;width:100%;position:fixed;top:0;z-index:-1}.fog__container{position:absolute;height:100%;width:100%;overflow:hidden}.fog__img{position:absolute;height:100vh;width:300vw}.fog__img--first{background:url("https://ae01.alicdn.com/kf/Ud713fee99c5d4f2bac69dd0469a95b13e.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 60s linear infinite;animation:marquee 60s linear infinite}.fog__img--second{background:url("https://ae01.alicdn.com/kf/Ub5631e112d7742cbb3cab47a304b80f4T.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 40s linear infinite;animation:marquee 40s linear infinite}@media screen and (max-width:767px){.fog__img--first{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}.fog__img--second{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}}@-webkit-keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}@keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}
<!--云雾特效结束-->

**编辑/usr/themes/handsome/component/footer.php文件
在<?php $this->footer(); ?>上面添加以下代码**

<!--背景云雾特效-->
    <section class="fog">
        <div class="fog__container">
            <div class="fog__img fog__img--first"></div>
            <div class="fog__img fog__img--second"></div>
        </div>
    </section>
<!--云雾特效结束-->

四十二：自定义音乐播放器音量

后台-设置外观-开发者设置-自定义JS 添加以下代码

setTimeout(function (){    document.querySelector(".skPlayer-source").volume=0.3;}, 3000);

其中volume=0.3为播放器音量控制，默认为0.3支持修改范围为0.0 - 1可自行设置

四十三：左侧文章图标和评论头像圆角化鼠标悬停旋转

.img-square {
    transition: all 0.3s;
    border-radius: 50%;
}

.img-square:hover {
    transform: rotate(360deg);
}

四十四：自定义鼠标样式

外观——主题设置——开发设置——自定义css。
插入以下代码：

body {
    cursor:url('http://like.gmkh.top/css/光标/S1.cur'), auto;
}
select, input, textarea, a, button {
    cursor:url('http://like.gmkh.top/css/光标/S2.cur'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
    cursor:url('http://like.gmkh.top/css/光标/S1.cur'), auto;
}

四十五：全屏彩带飘动背景动画特效

放在自定义js内容中

<script size="90" alpha="0.5" zIndex="0" src="存放js域名地址/ribbon.js" type="text/javascript" charset="utf-8"></script>

js代码下载

链接：https://pan.baidu.com/s/1O5Fx8S2W2l66CP4B98xwjw
提取码：k2jt

四十六：首页文章版式圆角化

使用方法：

本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS。

/*首页文章版式圆角化*/
        .panel{
            border: none;
            border-radius: 15px;
        }

        .panel-small{
            border: none;
            border-radius: 15px;
        }

        .item-thumb{
            border-radius: 15px;  
        }

四十七：生成当前文章标签

在当前文章内容尾部添加该文章的标签，在主题目录下的post.php文件中的适当地方加入以下代码。

    <!--生成当前文章标签-->
        标签：<?php $this->tags('，', true, 'no tag'); ?>

四十八：博主介绍闪字效果

使用方法

将以下代码加入后台设置->博主介绍中，当然，介绍文字要改成你自己的。

代码

<span class="text-muted text-xs block">
            <div id="chakhsu"></div>
            <script>
                var chakhsu = function(r) {
                    function t() {
                        return b[Math.floor(Math.random() * b.length)]
                    }

                    function e() {
                        return String.fromCharCode(94 * Math.random() + 33)
                    }

                    function n(r) {
                        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                            var l = document.createElement("span");
                            l.textContent = e(), l.style.color = t(), n.appendChild(l)
                        }
                        return n
                    }

                    function i() {
                        var t = o[c.skillI];
                        c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) :
                            "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- :
                            (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI =
                                (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ?
                            Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
                    }
                    /*以下内容自定义修改*/
                    var l = "",
                        o = ["客至汲泉烹茶，抚琴听者知音"].map(function(r) {
                            return r + ""
                        }),
                        a = 2,
                        g = 1,
                        s = 5,
                        d = 75,
                        b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)",
                            "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)",
                            "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)",
                            "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"
                        ],
                        c = {
                            text: "",
                            prefixP: -s,
                            skillI: 0,
                            skillP: 0,
                            direction: "forward",
                            delay: a,
                            step: g
                        };
                    i()
                };
                chakhsu(document.getElementById('chakhsu'));
            </script>
        </span>
        </span>

四十九：一言api古诗词版

假如你是个古诗词爱好者，你可能希望将handsome自带的一言换为换成古诗词版的，刚好已经有人开发出这样的api了，我们直接调用即可。

今日诗词官网地址

我比较喜欢的一点是，它会自动获取访客ip，然后根据ip所在地、访问时间等信息来推荐相关的古诗词（比如如果你在上海的晚上打开网站，它就会推送有关江南、夜雨的古诗词），很妙。具体的推荐方式点我查看。

主题根目录下打开index.php，找到以下代码：

<small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();
              }else{
                  echo '加载中……';
                  echo '<script>
                         $.ajax({
                            type: \'Get\',
                            url: \'https://v1.hitokoto.cn/\',
                            success: function(data) {
                               var hitokoto = data.hitokoto;
                              $(\'.indexWords\').text(hitokoto);
                            }
                         });
</script>';
              }
              ?></small>

更改为以下代码：

<small class="text-muted letterspacing indexWords"><span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></small>

当然，别忘了在主题后台启用主题增强功能->增强功能开关->启用一言接口

五十：时光轴

时光轴是一段随时可调用的html代码，但是我觉得它挺好看的，用在文章或者中或许不错。

首先下载timeline.css并放到你自己的服务器中

timeline.css下载地址：
https://github.com/SuYxh/static_page/tree/master/CSS/timeline

然后你可以在任何文章或页面内调用以下代码（自行修改css引用地址）

代码

!!!
<meta charset="utf-8" />
<title>
    时光轴
</title>
<link rel="stylesheet" href="http://你的域名/timeline.css" type="text/css" />
<!--
<style type="text/css">
</style>
-->
<ul class="cbp_tmtimeline">
    <li>
        <time class="cbp_tmtime"> <span>2019-11-07</span></time> 
        <div class="cbp_tmlabel">
            <p>
                秋月扬明晖，冬岭秀寒松
            </p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime"> <span>2019-10-12</span></time> 
        <div class="cbp_tmlabel">
            <p>
                域名更换为cesi.huat.xyz，决定认真做站！
            </p>
        </div>
    </li>
    <li>
        <time class="cbp_tmtime"> <span>2019-10-01</span></time> 
        <div class="cbp_tmlabel">
            <p>
                深林人不知，明月来相照
            </p>
        </div>
    </li>
</ul>
!!!

五十一：修改后台路径

修改后台路径

  • 将admin文件夹改名，改成你需要的例如abc，然后找到Typecho根目录下的config.inc.php文件，将define('__TYPECHO_ADMIN_DIR__', '/admin/');中的的/admin/改成/abc/即可，以后要登录后台访问xxx.com/abc/即可
  • 若使用handsome主题，还需要在外观设置-外观设置开关，勾选不显示左侧边栏底部菜单

五十二：Font-Awesome旋转图标

使用方法

  • 先在自定义Head中引入字体：
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  • fa-spin可以使任何图标执行旋转动画，fa-pulse可以使图标以 8 步为周期进行旋转
  • 可以完美执行旋转动画的图标有：加载fa-spinner，刷新fa-refresh、 齿轮fa-cog等图标，举个栗子：
{"name":"Spin","class":"fa fa-spinner fa-spin","link":"#","target":"_self"},
{"name":"Pulse","class":"fa fa-cog fa-pulse","link":"#","target":"_self"}

css文件备用

链接：https://pan.baidu.com/s/1djkYKrRJr-BBlKHenUEzkA
提取码：nojh

五十三：为 Typecho编辑器增加 HTML标签支持

使用方法

Typecho 默认文章只支持kbd|b|i|strong|em|sup|sub|br|code|del|a|hr|small这几个标签。
修改/var/HyperDown.php文件第17行，在现有标签中直接增加新标签即可。
标签之间使用|分隔。

五十四：文章标题美化

打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

代码

/*
 * 文章一二三四级标题美化
 */
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}

五十五：首页预览头图走cos

使用方法

1./libs/Content.php第715行左右

$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined

2.修改为（xxx填写自己的cos地址）：

$random = 'https://xxx/' . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶，这里可能会导致index not undefined

五十六：导航栏输出二级菜单

添加二级菜单字段

/usr/themes/handsome/component/aside.php第87行左右$asideItemsOutput = "";后面添加如下内容：

$asideSecondItemsOutput = "";

修改二级菜单字段判断语句

将101-106行左右的下列字段：

if (@$itemTarget){
                          $linkStatus = 'target="'.$itemTarget.'"';
                      }else{
                          $linkStatus = 'target="_blank"';
                      }
                      if (trim($itemFeather)!==""){

替换为

                  if (strtoupper($itemStatus) === 'SEC'){
                      if (trim($itemFeather)!==""){
                            $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" 
class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                      }else if (trim($itemClass)!==""){
                          $asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>';
                          }
                      }
                  else if (trim($itemFeather)!==""){

添加二级菜单输出语句

在125行左右的<?php if (@!in_array('component',$this->options->asideSetting)): ?>语句上面添加下列代码：

            <?php if (@$asideSecondItemsOutput): ?>
              <li><a class="auto"><span class="pull-right text-muted">
              <i class="fontello icon-fw fontello-angle-right text"></i>
              <i class="fontello icon-fw fontello-angle-down text-active"></i>
              </span>
              <i class="glyphicon glyphicon-new-window"></i><span><?php _me("外站工具"); ?></span></a><!-- 默认图标与名称，可以随意修改 -->
              <ul class="nav nav-sub dk"><li class="nav-sub-header"><a data-no-instant><span><?php _me("外站工具"); ?></span></a></li>
              <?php echo @$asideSecondItemsOutput ?>
                </ul></li>
            <?php endif; ?>

如何使用？

{"name":"归档","class":"glyphicon glyphicon-tasks","link":"https://你的域名/","target":"_self"},
{"name":"网页版","class":"glyphicon glyphicon-cloud-download","link":"https://你的域名/","status":"sec"},
{"name":"百度盘提取码","class":"glyphicon glyphicon-link","link":"https://你的域名/","status":"sec"},
{"name":"磁链转换","class":"glyphicon glyphicon-magnet","link":"https://你的域名/","status":"sec"},
{"name":"局域网传文件","class":"glyphicon glyphicon-transfer","link":"https://你的域名/","status":"sec"},
{"name":"图床","class":"glyphicon glyphicon-picture","link":"https://你的域名/","status":"sec"},
{"name":"音乐解锁","feather":"music","link":"https://你的域名/","status":"sec"},
{"name":"网盘","feather":"hard-drive","link":"https://你的域名/","status":"sec"}

怕麻烦可以跳过上面

在124行下面，即下面代码下面：

<!-- /主页 -->
<?php endif; ?>
<?php echo @$asideItemsOutput ?>

添加下列代码：

<!--折叠菜单-->
<li>
  <a class="auto">
    <span class="pull-right text-muted">
      <i class="fontello icon-fw fontello-angle-right text"></i>
      <i class="fontello icon-fw fontello-angle-down text-active"></i>
    </span>
    <!--下方为菜单栏图标-->
    <i class="glyphicon glyphicon-phone"></i>
    <span>
      <?php _me( "小游戏"); ?></span>
  </a>
  <ul class="nav nav-sub dk">
    <li class="nav-sub-header">
      <a data-no-instant>
        <span>
          <?php _me( "小游戏"); ?></span>
      </a>
    </li>
    <li>
      <a href="https://www.cooyf.com/mikutap/" class="auto" target="_blank">
        <span class="nav-icon">
          <!--下方为小栏目图标-->
          <i data-feather="slack"></i>
        </span>
        <span>mikutap</span></a>
    </li>
  </ul>
</li>
<!--/折叠菜单---->

五十七：给网站添加 Chatra 在线客服插件

功能

  1. 支持在线和离线模式
  2. 可设置网页问候
  3. 实时访客列表
  4. 可设置时间表，在您的工作日开始和结束时通知您，并自动更改您的状态。
  5. 可设置团体，将访问者的聊天分配给某些座席。例如，您可以根据聊天开始的页面将聊天路由到“销售”或“支持”
  6. Chatra可以将聊天记录和离线或错过的消息转发到您的收件箱-您可以从那里答复客户，
  7. 可对离线访问者的进行回复，如果访问者返回您的网站，他们将看到新消息；如果留下电子邮件地址，则将收到您对收件箱的答复
    提示：应该不止这些，大家可以自行看官网文档

获取代码

首先我们要注册一个Chatra的账号，有一个邮箱就可以了。
注册地址：https://app.chatra.io/

注册好之后可以通过这个地址：
https://app.chatra.io/settings/general来得到JavaScript的代码

<script>
    (function(d, w, c) {
        w.ChatraID = '7y8***************';
        var s = d.createElement('script');
        w[c] = w[c] || function() {
            (w[c].q = w[c].q || []).push(arguments);
        };
        s.async = true;
        s.src = 'https://call.chatra.io/chatra.js';
        if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');
</script>

添加该代码

以Handsome主题为例

将出现的代码复制至后台主题-->外观-->开发者设置-->`自定义javascript`中

添加完成后，返回博客页面刷新右下角看到在线聊天的图标了。

五十八：屏蔽F12

1.事先引入layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码；

<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

2.将以下代码添加至后台-开发者设置-自定义JavaScript。

document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        layer.msg("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }
}

五十九：右键自定义

1.事先引入layer.js来提示信息，至后台-开发者设置-自定义输出body 尾部的HTML代码；

<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

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

<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://你的域名/"><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://你的友链地址"><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://你的留言板地址l"><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>

六十：手机适配中不显示热门及标签云

将以下代码添加至后台-开发者设置-自定义CSS。

@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

Handsome美化（一—三十）

说明关于handsome主题的一些美化和修改统一记录,方便以后开速查找；本文内容源于网络如有侵权还请告知，如有失效...

Handsome美化（六十一—八十五）

六十一：修复透明背景下文章目录bug方法：将以下代码添加至后台-开发者设置-自定义CSS。#toc { b...

End

本文标题：Handsome美化（三十一—六十）

本文作者：tl0912

本文链接：https://blog.tianlei.work/archives/78/

版权声明：转载或者引用本文内容>请注明来源及原作者，本文著作权归作者 (tl0912) 所有。

除非另有说明，本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议。

最后修改：2021 年 12 月 01 日 11 : 33 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏