handsome主题美化

博主： Shark’s
发布时间：2021 年 11 月 24 日
1285 次浏览
8 条评论
21238字数
分类：技术文档

## **说明**

**关于handsome主题的一些美化和修改统一记录,方便以后开速查找；**

### **一：浏览器动态标题**

**主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码**

```

<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヽ(●-`Д´-)ノ我藏好了哦！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヾ(Ő∀Ő3)ノ被你发现啦~！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>

```

### **二：复制弹窗提示**

**在模板目录的header.php文件中引入layer资源文件代码**

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

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

```
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};
```

### **三：复制代码自带版权说明**

**将以下JS代码放在post.php的文章内页php**

```

<script>
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)');
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
            + '作者：<?php $this->author() ?><br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：<?php $this->options->siteUrl(); ?><br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：<?php $this->author() ?>\n'
            + '链接：' + window.location.href + '\n'
            + '来源：<?php $this->options->siteUrl(); ?>\n\n'
            + window.getSelection().toString();
 
        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
</script>

```

### **四：头像呼吸光环和鼠标悬停旋转放大**

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

```
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
    box-shadow: 0 0 16px #0f0;
    }

50% {
    box-shadow: 0 0 4px #00f;
    }

75% {
    box-shadow: 0 0 16px #0f0;
    }

100% {
    box-shadow: 0 0 4px #f00;
    }
}
```

**如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：**

```
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

to {
        box-shadow: 0 0 16px #f00;
    }
}
```

### **五：左侧文章图标和评论头像鼠标悬停旋转**

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

```
.img-circle {
    transition: all 0.3s;
}

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

### **六：文章内打赏图标跳动**

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

```
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

to {
        transform: scale(1.1);
    }
}
```

### **七：首页文章列表悬停上浮**

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

```
.blog-post .panel:not(article) {
transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
```

### **八：首页头图悬停放大并超出范围**

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

```
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

### **九：文章内头图和图片悬停放大并超出范围**

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

```
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}
```

### **十：右侧导航栏图标颜色**

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

```
.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
```

### **十一：文章标题居中**

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

```
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
```

### **十二：春节倒计时代码**

**主题设置 - 开发者设置 - 首页列表最前方广告位添加以下代码**

```

<div class="gn_box">
<h1><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>0</font><font
color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
</h1>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d">157 天</span>
<span id="t_h">9 时</span>
<span id="t_m">7 分</span>
<span id="t_s">42 秒</span>
</div>
</center>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2020/01/25 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>

```

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

```
/* 倒计时开始 */
.gn_box {
padding: 10px 14px;
margin-bottom: 20px;
text-align: center;
background-color: #fff;
}
#t_d{
color: #982585;
font-size: 18px;
}
#t_h{
color: #8f79c1;
font-size: 18px;
}
#t_m{
color: #65b4b5;
font-size: 18px;
}
#t_s{
color: #83caa3;
font-size: 18px;
}
```

### **十三：右侧栏加入每日pixiv热榜图片**

**Github：[https://github.com/mokeyjay/Pixiv-daily-top50-widget](https://github.com/mokeyjay/Pixiv-daily-top50-widget)**
**主题设置 - 开发者设置 - 全局右侧广告位添加以下代码**

```
< iframe  src = “ https://cloud.mokeyjay.com/pixiv ”  frameborder = “ 0 ”   style = “ 宽度：240 像素；高度：380 像素；” > </ iframe >
```

**然后修改`handsome/component/sidebar.php`**
**找到<h3 class="widget-title m-t-none text-md"><?php _me("广告") ?></h3>，将"广告"修改为P站每日热门**

### **十四：超链接特效**

**修改`/usr/themes/handsome/assets/css/handsome.min.css`删掉下面的内容：**

```
comment-content-true a:hover,.wrapper-lg .entry-content a:hover{
color:#222;border-bottom-color:#222
}
.comment-content-true a,.wrapper-lg .entry-content a{
color:#58666e;border-bottom-color:#222;border-bottom:1px solid #999;word-wrap:break-word;word-break:break-all
}
```

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

```
/*超链接特效*/
.comment-content-true a:not(.light-link),
.wrapper-lg .entry-content a:not(.light-link) {
    position: relative;
    margin: auto 4px;
    color: #23b7e5;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    word-wrap: break-word;
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: inherit;
    width: inherit;
}
.comment-content-true a:not(.light-link):hover,
.comment-content-true a:not(.light-link):focus,
.wrapper-lg .entry-content a:not(.light-link):hover,
.wrapper-lg .entry-content a:not(.light-link):focus {
    color: #fff;
}
.comment-content-true a:not(.light-link)::before,
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::after {
    position: absolute;
    top: 0;
    left: -4px;
    z-index: -1;
    box-sizing: content-box;
    padding: 0 4px;
    width: 100%;
    height: 100%;
    content: '';
}
.comment-content-true a:not(.light-link)::before,
.wrapper-lg .entry-content a:not(.light-link)::before {
    background-color: #23b7e5;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.comment-content-true a:not(.light-link):hover::before,
.comment-content-true a:not(.light-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):focus::before {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link)::after,
.wrapper-lg .entry-content a:not(.light-link)::after {
    border-bottom: 1px solid #23b7e5;
}
.content-copyright {
    overflow: hidden;
}
```

### **十五：标签云颜色**

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

```

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
```

**如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中；**

### **十六：鼠标点击特效**

**在主题的footer.php文件中的</body>之前添加以下代码**

```
<script type="text/javascript"> 
/* 鼠标特效 */
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": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "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(); 
        }); 
    }); 
}); 
</script>
```

### **十七：网站加载耗时**

**在主题的`functions.php`文件中添加以下代码**

```
//加载耗时
    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;
    }
```

**然后在`/usr/themes/handsome/component/sidebar.php`中添加以下代码**

```
<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>
```

**实际效果**

![实际效果](/usr/uploads/2021/11/2928480427.png)

### **十八：心知天气**

**心知天气API申请：[https://www.seniverse.com/widgetv3](https://www.seniverse.com/widgetv3)**
**在`/usr/themes/handsome/component/headnav.php`中添加以下代码**

```

                <ul id="search_tips_drop" class="dropdown-menu hide" style="display: block;top: 30px; left: 0px;">
                </ul>
              <span id="search_submit" class="transparent input-group-btn">
                  <button  type="submit" class="transparent btn btn-sm"><i class="fontello fontello-search" id="icon-search"></i><i class="animate-spin  fontello fontello-spinner hide" id="spin-search"></i></button>
              </span>
            </div>
          </div>
        </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>
        
          <a href="" style="display: none" id="searchUrl"></a>
        
```

### **十九：心情文字居中**

**修改`/usr/themes/handsome/index.php`文件，位于公告位置下方**

```
<header class="bg-light lter b-b wrapper-md">
替换成
<header class="bg-light lter b-b wrapper-md" style="text-align:center">
```

### **二十：去除顶部博客名称**

**修改`/usr/themes/handsome/index.php`文件，位于公告位置下方**
**删除以下代码**

```
<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>
```

### **二十一：去除文章底部修改日期及版权说明**

**修改`/usr/themes/handsome/libs/Content.php`文件，大概`570`行左右**
**删除以下内容**

```
return '
             <div class="show-foot">
                 <div class="notebook">
                     <i class="fontello fontello-clock-o"></i>
                     <span>'._mt("最后修改").'：'.date(_mt("Y 年 m 月 d 日 h : i  A") , $time + $obj).'</span>
                 </div>
                 <div class="copyright" data-toggle="tooltip" data-html="true" data-original-title="'.$interpretation.'"><span>© '.$content.'</span>
                 </div>
             </div>
        ';
```

### **二十二：去除文章页分享按钮**

**修改`/usr/themes/handsome/libs/Content.php`文件，大概`133`行左右**
**删除以下代码**

```
echo  '
              <div style="float:right;">
   '._mt("分享到").'：
   <style>
   .breadcrumb i.iconfont.icon-qzone:after {
    padding: 0 0 0 5px;
    color: #ccc;
    content: "/\00a0";
    }
    '.$screenshotStyle.'
   </style>
   <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='.$archive->permalink.'&title='.$archive->title.'&site='.$WebUrl.'" itemprop="breadcrumb" target="_blank" title="" data-toggle="tooltip" data-original-title="'._mt("分享到QQ空间").'" onclick="window.open(this.href, \'qzone-share\', \'width=550,height=335\');return false;"><i style ="font-size:15px;" class="iconfont icon-qzone" aria-hidden="true"></i></a>
   <a href="http://service.weibo.com/share/share.php?url='.$archive->permalink.'&title='.$archive->title.'" target="_blank" itemprop="breadcrumb" title="" data-toggle="tooltip" data-original-title="'._mt("分享到微博").'" onclick="window.open(this.href, \'weibo-share\', \'width=550,height=335\');return false;"><i style ="font-size:15px;" class="fontello fontello-weibo" aria-hidden="true"></i></a>'.$screenshot.'</div>';
```

### **二十三：首页文章版式阴影化**

**主题设置 - 开发者设置 - 自定义CSS添加以下代码**
#阴影颜色修改rgba后面的值

```
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

.panel-small{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

/*#如果也想使盒子四周也有阴影，加上以下代码*/
.app.container {
box-shadow: 0 0 30px rgba(135, 206, 235, 0.35);
}
```

### **二十四：博客介绍彩色特效**

**后台 - 设置外观 - 初级设置 - 博客介绍添加以下代码**

```
<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>
```

### **二十五：博客版权美化**

**主题设置 - 开发者设置 - 博客底部右侧信息**

```
<div class="github-badge">
<a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="渝ICP备XXXXXX号">
<span class="badge-subject">渝ICP备</span><span class="badge-value bg-black">XXXXXX号</span></a>
</div>
 |  <div class="github-badge">
<a rel="license" 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 rel="license" 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>
```

### **二十六：滑稽表情**

[![](https://wyun.org/usr/uploads/2021/11/3046403613.png)](https://sunpma.com/usr/uploads/2020/01/2080258132.png)
传送门：滑稽表情包下载
**解压后会得到一个OwO.json文件及funny文件夹；**
**然后将funny文件夹放置在/usr/themes/handsome/usr/img/emotion目录下即可；**
**然后用我们解压得到的OwO.json文件替换掉/usr/themes/handsome/usr目录下的OwO.json文件即可；**
[![](https://wyun.org/usr/uploads/2021/11/3240489822.png)](https://sunpma.com/usr/uploads/2020/01/2799122111.png)

### **二十七：顶部RSS图标**

**主图设置 - 高级设置 - 顶部导航按钮配置**

```
{"name":"RSS","class":"fontello fontello-rss icon-fw","link":"https://sunpma.com/feed/","target":"_blank"}
```

### **二十八：后台登陆界面美化**

**截图**
[![](https://wyun.org/usr/uploads/2021/11/375399925.jpg)](https://sunpma.com/usr/uploads/2020/01/3791396409.jpg)
**预览**
[https://wyun.org/admin](https://wyun.org/admin)
**下载**
传送门：<button class="btn m-b-xs btn-danger  " onclick='window.open("https://lanzoux.com/i8rzkch","_blank")'>源码下载</button>
**方法**
第一步：用压缩包内的`login.php`文件替换掉`/admin/login.php`文件
第二步：将压缩包内的`style`文件夹上传到`/admin/`文件夹下
第三步：修改`login.php`第35行，把“威云'Blog”替换成自己的信息

### **二十九：文章页添加百度收录查询**

**修改主题目录下`post.php`文件**

```

             <li class="meta-categories"><i class="fontello fontello-tags" aria-hidden="true"></i> <span class="sr-only"><?php _me("分类") ?>：</span> <span class="meta-value"><?php $this->category(' '); ?></span></li>
## 找到上面的代码，在其下方添加以下代码；
             
             <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>
```

**继续在最后``标签上面添加以下代码；**

```

    <script>
    function baidu_check(){
        $.getJSON("https://cn1.api.wfblog.net/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('百度未收录');
                baidu_push();
            }else{
                 $('#baidu_icon').removeClass('glyphicon-refresh');
                $('#baidu_icon').addClass('glyphicon-remove-circle');
                $('#baidu_result').text('查询收录失败');
            }
        });
    }
    function baidu_push(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';  
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    }
    baidu_check();
    </script>
    
```

**收录查询的API源码，作者公布了源码，可以使用自己的**
**API创建好后替换掉代码中的`https://cn1.api.wfblog.net/baidu.php`即可；**
**API源码**

```
<?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 GetBetween($content,$start,$end){
    $r = explode($start, $content);
    if (isset($r[1])){
        $r = explode($end, $r[1]);
        return $r[0];
    }
}
?>
```

**原作者：[https://wfblog.net](https://wfblog.net/)**

### **三十：文章图片居中并显示注释**

**插入代码**

```
![我是注释](https://sunpma.com/usr/uploads/2020/01/3791396409.jpg)
```

**修改方法**
**typecho安装目录下的var/HyperDown.php搜索image第357行找到如下代码**

```
<img src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\">
# 替换为以下代码
<img class=\"img\" src=\"{$url}\" alt=\"{$escaped}\" title=\"{$escaped}\"><center><div class=\"image-caption\">{$escaped}</div></center>
```

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

```
/*设置图片插入居中*/
.img {clear:both;display:block;margin:auto;}
/* 设置注释样式*/
.image-caption{
min-width: 20%;
    max-width: 80%;
    min-height: 22px;
    display: inline-block;
    padding: 10px;
    margin: 0 auto;
    border-bottom: 1px solid #d9d9d9;
    font-size: 14px;
    color: #969696;
    line-height: 1.7;
}
```

**默认的字体颜色是配合非透明模式的，透明模式将上面`color: #969696`修改为`color:white`**

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

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

**实际效果**
[![](https://wyun.org/usr/uploads/2021/11/1304053774.png)](https://sunpma.com/usr/uploads/2020/02/753804448.png)
**其他主题单独调用代码**

```
<?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>
```

**再在最后面`</body>`标签前添加以下代码**

```
<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>
```

**实际效果**
[![](https://wyun.org/usr/uploads/2021/11/679352135.png)](https://sunpma.com/usr/uploads/2020/02/1839770893.png)

### **三十四：一言打字特效**

**第一步**
**先把这两个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://gordsky.cn/api/qq.php?qq=123456
```

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

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

方式一
**（适用于handsome主题，设置外观--开发者设置--自定义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);}

```

方式二

```

<style type="text/css">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);} </style>

```

方式三

```

<style>
    html {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter:progid：lolXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none;
    }
</style>

```

方式四

```

<style>html {-webkit-filter: grayscale(100%);}</style>

```

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

**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`可自行设置**

### **四十三：更换后台Gravatar国内镜像**

**目前可用`Gravatar`国内镜像**

* V2EX源：[https://cdn.v2ex.com/gravatar/](https://cdn.v2ex.com/gravatar/)
* Loli源：[https://gravatar.loli.net/avatar/](https://gravatar.loli.net/avatar/)
* 极客族：[https://sdn.geekzu.org/avatar/](https://sdn.geekzu.org/avatar/)

网站根目录`/var/Typecho`打开`Common.php`
找到名为`gravatarUrl`的`function`大概在`932`行左右
修改`https://secure.gravatar.com`为国内第三方镜像源地址
修改`/avatar/`为镜像源的路径文件夹，修改完成后保存即可；

* **示例：**
  [![](https://wyun.org/usr/uploads/2021/11/1714899941.png)](https://sunpma.com/usr/uploads/2021/04/2166400029.png)

### **四十四：更换Gravatar默认头像**

**基于`handsome`主题修改，其它的主题也许路径不同；**
打开网站根目录，编辑`/usr/themes/handsome/libs/Utils.php`文件；
找到名为`getGravator`的`Function`修改`$default`代码的变量值，大概在86行左右；
在`$default = '';`的`''`中填入可用的变量值即可；
**可用的变量值：**

* `mm` 神秘人
* `identicon` 抽象图形（自动生成）
* `wavatar Wavatar`（自动生成）
* `monsterid` 小怪物（自动生成）
* `retro` 复古（自动生成）

**示例：**
[![](https://wyun.org/usr/uploads/2021/11/551499073.png)](https://sunpma.com/usr/uploads/2021/04/1726798983.png)

### **四十五：时光机使用DPlayer播放器**

**后台-设置-评论-允许使用的HTML标签和属性添加以下代码后保存**

```
<div class="" data-config=''/>
```

**Dplayer使用方法**

```
<div class="dplayer" data-config='{"video":{"url":"视频地址","pic":"图片封面地址"}}'/>
```

**注意：请勿在评论设置中开启`Markdown`语法否则无法解析；**

### **四十六：文章中嵌入网页**

**在文章中添加代码即可，将`链接地址`修改为你需要展示的网站地址；**

```
<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>
```

### **四十七：回复可见提示内容修改**

**编辑`/usr/themes/handsome/libs/Content.php`文件**
在1700行左右，自行修改提示内容即可；

### **四十八：首页文章版式圆角化**

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

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

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

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

最后修改：2022 年 04 月 02 日

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

8 条评论

Shark’s
December 14th, 2021 at 01:37 pm

用了，十九：心情文字居中、二十条：去除顶部博客名称、三十二：访客总数统计、四十八：首页文章版式圆角化、二十三：首页文章版式阴影化（这个就你要的文章列表彩色）！

回复
老张博客
December 14th, 2021 at 01:29 pm

有四十八条美化，你用了哪些呀？主要看你的背景、文章列表彩色不错。。。

回复
1. Shark’s
  December 14th, 2021 at 01:43 pm
  
  @老张博客
  
  背景渐变色可以在主题设置直接设置的。
  
  回复
2. Shark’s
  December 14th, 2021 at 01:38 pm
  
  @老张博客
  
  用了，十九：心情文字居中、二十条：去除顶部博客名称、三十二：访客总数统计、四十八：首页文章版式圆角化、二十三：首页文章版式阴影化（这个就你要的文章列表彩色）！
  
  回复
  1. 老张博客
    December 14th, 2021 at 05:30 pm
    
    @Shark’s
    
    使用了二十三，是彩色了，但是必须要鼠标移到上面才可以，而你的就一直都有。
    
    回复
    
    Shark’s
    December 14th, 2021 at 06:04 pm
    
    @老张博客
    
    我就是用了23但是我看你用了首页文章浮动，着个两个不兼容的好像。
    
    回复
    
    老张博客
    December 14th, 2021 at 07:12 pm
    
    @Shark’s
    
    是的，现在我停了一个，感觉这样也很好了！换一换，有新感觉！
    
    回复
  2. 老张博客
    December 14th, 2021 at 05:21 pm
    
    @Shark’s
    
    收到，感谢感谢，我来折腾折腾下看。
    
    回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

wu先生
你这电脑比我现在用的台机强。
jindows
什么学校老师需要用到tg ？⌇●﹏●⌇
ZhangJet
特意强调未婚女同事
拾风
估计没多久你老婆又要说台式机卡了～哈哈
浮生若梦
handsome的插件似乎会和该主题产生冲突，即访问友情链接的...

handsome主题美化

Shark’s • 2021 年 11 月 24 日

## **说明**

**关于handsome主题的一些美化和修改统一记录,方便以后开速查找；**

### **一：浏览器动态标题**

**主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码**

### **二：复制弹窗提示**

**在模板目录的header.php文件中引入layer资源文件代码**

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

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

```
document.body.oncopy = function() {layer.msg('复制成功,转载请保留原文链接！');};
```

### **三：复制代码自带版权说明**

**将以下JS代码放在post.php的文章内页php**

### **四：头像呼吸光环和鼠标悬停旋转放大**

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

```
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

25% {
    box-shadow: 0 0 16px #0f0;
    }

50% {
    box-shadow: 0 0 4px #00f;
    }

75% {
    box-shadow: 0 0 16px #0f0;
    }

100% {
    box-shadow: 0 0 4px #f00;
    }
}
```

**如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：**

```
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

to {
        box-shadow: 0 0 16px #f00;
    }
}
```

### **五：左侧文章图标和评论头像鼠标悬停旋转**

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

```
.img-circle {
    transition: all 0.3s;
}

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

### **六：文章内打赏图标跳动**

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

```
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

to {
        transform: scale(1.1);
    }
}
```

### **七：首页文章列表悬停上浮**

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

```
.blog-post .panel:not(article) {
transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
```

### **八：首页头图悬停放大并超出范围**

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

```
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

### **九：文章内头图和图片悬停放大并超出范围**

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

```
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}
```

### **十：右侧导航栏图标颜色**

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

```
.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
```

### **十一：文章标题居中**

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

```
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
```

### **十二：春节倒计时代码**

**主题设置 - 开发者设置 - 首页列表最前方广告位添加以下代码**

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

### **十三：右侧栏加入每日pixiv热榜图片**

**Github：[https://github.com/mokeyjay/Pixiv-daily-top50-widget](https://github.com/mokeyjay/Pixiv-daily-top50-widget)**
**主题设置 - 开发者设置 - 全局右侧广告位添加以下代码**

```
< iframe  src = “ https://cloud.mokeyjay.com/pixiv ”  frameborder = “ 0 ”   style = “ 宽度：240 像素；高度：380 像素；” > </ iframe >
```

**然后修改`handsome/component/sidebar.php`**
**找到<h3 class="widget-title m-t-none text-md"><?php _me("广告") ?></h3>，将"广告"修改为P站每日热门**

### **十四：超链接特效**

**修改`/usr/themes/handsome/assets/css/handsome.min.css`删掉下面的内容：**

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

### **十五：标签云颜色**

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

**如果主题中启用了pjax，还需要将上面代码添加到pjax-pjax回调函数中；**

### **十六：鼠标点击特效**

**在主题的footer.php文件中的</body>之前添加以下代码**

### **十七：网站加载耗时**

**在主题的`functions.php`文件中添加以下代码**

**然后在`/usr/themes/handsome/component/sidebar.php`中添加以下代码**

```
<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>
```

**实际效果**

![实际效果](/usr/uploads/2021/11/2928480427.png)

### **十八：心知天气**

**心知天气API申请：[https://www.seniverse.com/widgetv3](https://www.seniverse.com/widgetv3)**
**在`/usr/themes/handsome/component/headnav.php`中添加以下代码**

### **十九：心情文字居中**

**修改`/usr/themes/handsome/index.php`文件，位于公告位置下方**

```
<header class="bg-light lter b-b wrapper-md">
替换成
<header class="bg-light lter b-b wrapper-md" style="text-align:center">
```

### **二十：去除顶部博客名称**

**修改`/usr/themes/handsome/index.php`文件，位于公告位置下方**
**删除以下代码**

```
<h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>
```

### **二十一：去除文章底部修改日期及版权说明**

**修改`/usr/themes/handsome/libs/Content.php`文件，大概`570`行左右**
**删除以下内容**

### **二十二：去除文章页分享按钮**

**修改`/usr/themes/handsome/libs/Content.php`文件，大概`133`行左右**
**删除以下代码**

### **二十三：首页文章版式阴影化**

**主题设置 - 开发者设置 - 自定义CSS添加以下代码**
#阴影颜色修改rgba后面的值

```
/*panel阴影*/
.panel{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

.panel:hover{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

.panel-small{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

.panel-small:hover{
box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(135, 206, 235, 0.35);
}

/*#如果也想使盒子四周也有阴影，加上以下代码*/
.app.container {
box-shadow: 0 0 30px rgba(135, 206, 235, 0.35);
}
```

### **二十四：博客介绍彩色特效**

**后台 - 设置外观 - 初级设置 - 博客介绍添加以下代码**

### **二十五：博客版权美化**

**主题设置 - 开发者设置 - 博客底部右侧信息**

### **二十六：滑稽表情**

### **二十七：顶部RSS图标**

**主图设置 - 高级设置 - 顶部导航按钮配置**

```
{"name":"RSS","class":"fontello fontello-rss icon-fw","link":"https://sunpma.com/feed/","target":"_blank"}
```

### **二十八：后台登陆界面美化**

### **二十九：文章页添加百度收录查询**

**修改主题目录下`post.php`文件**

**继续在最后``标签上面添加以下代码；**

**收录查询的API源码，作者公布了源码，可以使用自己的**
**API创建好后替换掉代码中的`https://cn1.api.wfblog.net/baidu.php`即可；**
**API源码**

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

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

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

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

**原作者：[https://wfblog.net](https://wfblog.net/)**

### **三十：文章图片居中并显示注释**

**插入代码**

```
![我是注释](https://sunpma.com/usr/uploads/2020/01/3791396409.jpg)
```

**修改方法**
**typecho安装目录下的var/HyperDown.php搜索image第357行找到如下代码**

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

**默认的字体颜色是配合非透明模式的，透明模式将上面`color: #969696`修改为`color:white`**

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

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

**实际效果**
[![](https://wyun.org/usr/uploads/2021/11/1304053774.png)](https://sunpma.com/usr/uploads/2020/02/753804448.png)
**其他主题单独调用代码**

```
<?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>
```

**再在最后面`</body>`标签前添加以下代码**

```
<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>
```

**实际效果**
[![](https://wyun.org/usr/uploads/2021/11/679352135.png)](https://sunpma.com/usr/uploads/2020/02/1839770893.png)

### **三十四：一言打字特效**

**第一步**
**先把这两个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://gordsky.cn/api/qq.php?qq=123456
```

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

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

方式一
**（适用于handsome主题，设置外观--开发者设置--自定义CSS 添加以下代码）**

方式二

方式三

方式四

```

<style>html {-webkit-filter: grayscale(100%);}</style>

```

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

```
<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`可自行设置**

### **四十三：更换后台Gravatar国内镜像**

**目前可用`Gravatar`国内镜像**

* **示例：**
  [![](https://wyun.org/usr/uploads/2021/11/1714899941.png)](https://sunpma.com/usr/uploads/2021/04/2166400029.png)

### **四十四：更换Gravatar默认头像**

* `mm` 神秘人
* `identicon` 抽象图形（自动生成）
* `wavatar Wavatar`（自动生成）
* `monsterid` 小怪物（自动生成）
* `retro` 复古（自动生成）

**示例：**
[![](https://wyun.org/usr/uploads/2021/11/551499073.png)](https://sunpma.com/usr/uploads/2021/04/1726798983.png)

### **四十五：时光机使用DPlayer播放器**

**后台-设置-评论-允许使用的HTML标签和属性添加以下代码后保存**

```
<div class="" data-config=''/>
```

**Dplayer使用方法**

```
<div class="dplayer" data-config='{"video":{"url":"视频地址","pic":"图片封面地址"}}'/>
```

**注意：请勿在评论设置中开启`Markdown`语法否则无法解析；**

### **四十六：文章中嵌入网页**

**在文章中添加代码即可，将`链接地址`修改为你需要展示的网站地址；**

```
<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>
```

### **四十七：回复可见提示内容修改**

**编辑`/usr/themes/handsome/libs/Content.php`文件**
在1700行左右，自行修改提示内容即可；

### **四十八：首页文章版式圆角化**

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

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

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

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

handsome主题美化

相关文章

8 条评论

发表评论取消回复

typecho后台主题Fresh美化版

忙碌的工作，2天跑了3个城市。

收拾一下家里的笔记本电脑

迟到的家具

handsome主题美化

宝塔7.8 降级 7.7

兰空图床2.0.2 自建nsfwjs鉴黄搭建教程！

LastActivityView(警用级别查看电脑使用记录软件)看小电影的小心咯

宝塔面板ServerStatus-Hotaru云探针的安装与配置

网络星期一“20％”折扣购入Unraid Pro专业版系统

handsome主题美化

相关文章

8 条评论

发表评论 取消回复

handsome主题美化

发表评论取消回复