Handsome美化（三十一—六十）

博主：彼岸花露
发布时间：2021 年 11 月 30 日
3736 次浏览
6 条评论
1358字数
分类：折腾

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

**主题设置 - 开发者设置 - 自定义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
					}

### 四十九：一言api古诗词版

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

[今日诗词官网地址](https://www.jinrishici.com/)

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

主题根目录下打开`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](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" />

<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/)

注册好之后可以通过这个地址：
[https://app.chatra.io/settings/general](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><span class="external-link"><a class="no-external-link" href="https://你的域名/" target="_blank"><i data-feather="external-link"></i><i class="fa fa-home fa-fw"></i><span>首页</span></a></span></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><span class="external-link"><a class="no-external-link" href="https://你的友链地址" target="_blank"><i data-feather="external-link"></i><i class="fa fa-meh-o fa-fw"></i><span>和我当邻居</span></a></span></li>  
           <li><span class="external-link"><a class="no-external-link" href="https://你的留言板地址l" target="_blank"><i data-feather="external-link"></i><i class="fa fa-pencil-square-o fa-fw"></i><span>给我留言吧</span></a></span></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;
    }
}
```

<div class="inner-content" >
<p class="inser-title">Handsome美化（一—三十）</p>
<div class="inster-summary text-muted">
说明关于handsome主题的一些美化和修改统一记录,方便以后开速查找；本文内容源于网络如有侵权还请告知，如有失效...
</div>
</div>
</a>

</div>

</div>

<div class="inner-content" >
<p class="inser-title">Handsome美化（六十一—八十五）</p>
<div class="inster-summary text-muted">
六十一：修复透明背景下文章目录bug方法：将以下代码添加至后台-开发者设置-自定义CSS。#toc {
    b...
</div>
</div>
</a>

</div>

</div>

End

本文作者：彼岸花露
文章标题：Handsome美化（三十一—六十）
本文地址：https://www.tianlei.work/archives/78/
版权说明：若无注明，本文皆悟思记原创，转载请保留文章出处。

最后修改：2021 年 12 月 01 日

如果觉得我的文章对你有用，请随意赞赏

6 条评论

tl0912
October 11th, 2022 at 04:57 pm

测速
1. tl0912
  October 11th, 2022 at 05:00 pm
  
  @tl0912
  
  测速
melo
January 30th, 2022 at 11:29 pm

你好，请问博客信息的彩色气泡颜色是哪里设置的的？谢谢你！
小张同学
December 10th, 2021 at 07:37 pm

那个情侣的页面可以发吗？？？
1. tl0912
  December 21st, 2021 at 03:36 pm
  
  @小张同学
  
  成功了嘛？OωO
@是小张呐
December 10th, 2021 at 07:36 pm

好想要那个情侣哔哔的页面

此处评论已关闭

彼岸
审核测试
Ryonnoski
感谢分享！
等日落热吻
踩踩！OωO
初阳
啥情侣页面，可以发给我吗
melo
看到了，不好意思Σ(っ °Д °;)っ

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

Handsome美化（三十一—六十）

彼岸花露 • 2021 年 11 月 30 日

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

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

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

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

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

### 三十二：访客总数统计

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

**在`/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**

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

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

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

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

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

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

### 三十七：修复搜索框按钮

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

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

### 三十八：左侧下拉框

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

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

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

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

### 四十：底栏高度设置

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

```

.wrapper {
    padding: 10px
}

```

### 四十一：背景云雾特效

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

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

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

**后台-设置外观-开发者设置-自定义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。
插入以下代码：

```

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

放在自定义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)
					}

### 四十九：一言api古诗词版

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

[今日诗词官网地址](https://www.jinrishici.com/)

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

更改为以下代码：

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

### 五十：时光轴

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

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

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

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

**代码**

### 五十一：修改后台路径

修改后台路径

### 五十二：Font-Awesome旋转图标

使用方法

* 先在自定义Head中引入字体：

```
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```

```
{"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标签支持

使用方法

### 五十四：文章标题美化

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

**代码**

### 五十五：首页预览头图走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行左右`的下列字段：

替换为

添加二级菜单输出语句

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

如何使用？

---

怕麻烦可以跳过上面

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

```

<?php endif; ?>
<?php echo @$asideItemsOutput ?>
```

添加下列代码：

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

**功能**

获取代码

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

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

添加该代码

以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代码`；

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

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

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

Handsome美化（三十一—六十）

6 条评论

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

Handsome美化（一—三十）

Handsome美化（三十一—六十）

获取qq头像api接口

更换全局音乐播放器为无损本地音乐过程记录

获取qq头像api接口

勾指成誓

Pyhthon爬取图片接口的图片保存本地

数据结构-2.2.3做题记录

五、指针（C语言）

Handsome美化（三十一—六十）