基于Handsome主题美化

博主： admin123
发布时间：2019 年 10 月 26 日
7500 次浏览
2 条评论
加载中
8973字数
分类：技术杂谈

#基于Handsome主题美化

## 无需修改源文件

###1、首页文章图片获取焦点放大
将以下代码添加至后台主题设置`自定义CSS`，放大的时间和大小自行修改数值

```css
/*首页文章图片获取焦点放大1*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}
```

###2、鼠标经过头像转动并放大
将以下代码添加至后台主题设置`自定义CSS`，转动快慢和头像大小自行修改数值

```css
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}
```

###3、Mac风格代码高亮
CodePrettify插件下载:[点击下载](https://github.com/HyanCat/Typecho-CodePrettify "点击下载")
Handsome 5.3.1 版本：[点击下载](https://www.lanzous.com/i68unfc "点击下载")
如果你的网站有开启Pjax（Handsome主题默认开启），把以下代码添加到回调函数的地方，以Handsome为例，打开后台设置`PJAX回调函数`

```javascript
if (typeof Prism !== 'undefined') {
var pres = document.getElementsByTagName('pre');
                for (var i = 0; i < pres.length; i++){
                    if (pres[i].getElementsByTagName('code').length > 0)
                        pres[i].className  = 'line-numbers';}
Prism.highlightAll(true,null);}
```

###4、魔性动态标题
复制下方代码添加至后台主题设置`自定义输出head 头部的HTML代码`即可

```HTML

<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つ·ェ·⊂)404 not find';}else{document.title=normal_title;}});</script>
```

###5、文本框打字机特效
复制下方代码添加至后台主题设置`自定义输出body 尾部的HTML代码`即可

```HTML

<script type="text/javascript" src="http://sh.bailaing.me:85/usr/themes/handsome/assets/js/commentTyping.js"></script>
```

###6、复制弹框版权提醒
首先将下方代码复制添加至后台主题设置`自定义输出head 头部的HTML代码`

```HTML

<script src="http://sh.bailaing.me:85/usr/themes/handsome/assets/js/layer.js"></script>
```

最后复制下方代码添加至后台主题设置`自定义 JavaScript`即可

```JavaScript

document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
```

###7、文章底部赞赏图标跳动
将以下代码添加至后台主题设置`自定义CSS`

```css
/*赞赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

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

###8、彩色标签云Tag
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至`自定义JavaScript`即可

```JavaScript

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

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

###9、右侧列表导航栏图标颜色
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至`自定义CSS`即可

```css
/*右侧列表导航栏图标颜色*/
.glyphicon-fire {
    color: #ff0000;
}

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

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

### 10、文章首页广告位显示倒计时

2020新年倒计时

```css
<style> 
.gn_box {
	border: none;
	border-radius: 15px;
}

.gn_box {
	padding: 10px 14px;
	margin: 10px;
	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;
}
</style> 
< 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" > 天 < /span>             <span id="t_h"> 时</span > <span id = "t_m" > 分 < /span>             <span id="t_s"> 秒</span > </div>     </center > 
</div > 
<script type = "text/javascript" >

function getRTime() {
    var EndTime = new Date('2020/06/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 >
```

### 11、本站添加AliceStyle美化插件

网址：[AliceStyle美化插件](https://racns.com/374.html)
![](/usr/uploads/2020/02/2621047081.png)

## 需要修改源文件

###1、底部页脚标签样式
将以下代码添加至后台主题设置自定义CSS

```css
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
```

将以下代码添加至后台主题设置`博客底部左侧信息`，信息修改成自己的

```HTML
<div class="github-badge">
<a href="./" title="©2019&nbsp;白亮吖雅黑丫">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;白亮吖雅黑丫</span>
</a>
</div>
```

将以下代码添加至后台主题设置`博客底部右侧信息`

```HTML
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
```

添加完成后，记得去`handsome\component\footer.php`删除原有声明代码哦！
</div>

### 2、添加心知天气

使用方法：
1：知心天气官网www.seniverse.com注册申请免费API 密钥
2：将以下代码放入/usr/themes/handsome/component/headnav.php第55行之后并更换你的公钥秘钥即可

```html

    <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": "WSB117TP0EC6",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "公钥",
    "hash": "密钥"
});
tpwidget("show");</script>

```

### 3、添加访客总数统计和网站响应耗时

~~在主题的`function.php`文件中加入以下代码(添加在文件尾即可)~~
由于handsome6.0.0主题将`function.php`文件加密，所以将以下代码添加的位置改为~~`component/sidebar.php`~~
`lib/Content.php`文件中

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

/**
 * 网站响应时间
 * @return bool
*/
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;
}
```

然后打开`component/sidebar.php`文件,在约100行的位置添加如下代码

```HTML5
<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>
<li class="list-group-item"> <i class="glyphicon glyphicon-flash text-muted"></i> <span class="badge pull-right">
<?php echo timer_stop();?>
</span><?php _me("响应耗时") ?></li>
```

如图所示
![](/usr/uploads/2020/04/523169023.png)
![](/usr/uploads/2020/04/57570248.png)

### 4、为文章添加百度收录检测

[原文地址](https://wfblog.net/archives/baidu_check.html "原文地址")
1.在模板post.php加入

```HTML

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

2.还是在post.php内加入（必须引入jquery）

```JavaScript
<script>
        function baidu_check(){
            $.getJSON("https://www.m39.wang/baidu.php?domain="+window.location.href,function(result){ 
                if (result.code == 200) {
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-ok-circle');
                    $('#baidu_result').text('百度已收录');
                }else if(result.code == 403){
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-info-sign');
                    $('#baidu_result').text('百度未收录');
                }else{
                    $('#baidu_icon').removeClass('glyphicon-refresh');
                    $('#baidu_icon').addClass('glyphicon-remove-circle');
                    $('#baidu_result').text('查询收录失败');
                }
            });
        }
        baidu_check();
</script>
```

该API代码文件如下

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

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

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

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

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

最后修改：2021 年 03 月 06 日

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

2 条评论

ygwilxigsg
December 14th, 2024 at 10:16 pm

你的文章让我感受到了不一样的风景，谢谢分享。 https://www.yonboz.com/video/73942.html

回复
bwypobamml
November 28th, 2024 at 06:21 pm

你的文章让我感受到了不一样的风景，谢谢分享。 http://www.55baobei.com/3og8ZoS0nC.html

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

xvmyyxjugy
你的文章内容非常卖力，让人点赞。 https://www...
ygwilxigsg
你的文章让我感受到了不一样的风景，谢谢分享。 https...
hgojotyvpi
你的文章内容非常卖力，让人点赞。 http://www....
ajwvzyjvvi
你的文章让我感受到了不一样的风景，谢谢分享。 https...
dcpalkkvhs
你的文章内容非常卖力，让人点赞。 https://www...

基于Handsome主题美化

admin123 • 2019 年 10 月 26 日

#基于Handsome主题美化

## 无需修改源文件

###1、首页文章图片获取焦点放大
将以下代码添加至后台主题设置`自定义CSS`，放大的时间和大小自行修改数值

```css
/*首页文章图片获取焦点放大1*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}
```

###2、鼠标经过头像转动并放大
将以下代码添加至后台主题设置`自定义CSS`，转动快慢和头像大小自行修改数值

```css
/*首页头像自动旋转*/
.thumb-lg{
    width:130px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}
```

###4、魔性动态标题
复制下方代码添加至后台主题设置`自定义输出head 头部的HTML代码`即可

###5、文本框打字机特效
复制下方代码添加至后台主题设置`自定义输出body 尾部的HTML代码`即可

```HTML

<script type="text/javascript" src="http://sh.bailaing.me:85/usr/themes/handsome/assets/js/commentTyping.js"></script>
```

###6、复制弹框版权提醒
首先将下方代码复制添加至后台主题设置`自定义输出head 头部的HTML代码`

```HTML

<script src="http://sh.bailaing.me:85/usr/themes/handsome/assets/js/layer.js"></script>
```

最后复制下方代码添加至后台主题设置`自定义 JavaScript`即可

```JavaScript

document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
```

###7、文章底部赞赏图标跳动
将以下代码添加至后台主题设置`自定义CSS`

```css
/*赞赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

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

###8、彩色标签云Tag
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至`自定义JavaScript`即可

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

###9、右侧列表导航栏图标颜色
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至`自定义CSS`即可

```css
/*右侧列表导航栏图标颜色*/
.glyphicon-fire {
    color: #ff0000;
}

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

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

### 10、文章首页广告位显示倒计时

2020新年倒计时

```css
<style> 
.gn_box {
	border: none;
	border-radius: 15px;
}

.gn_box {
	padding: 10px 14px;
	margin: 10px;
	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;
}

setInterval(getRTime, 1000); 
</script >
```

### 11、本站添加AliceStyle美化插件

网址：[AliceStyle美化插件](https://racns.com/374.html)
![](/usr/uploads/2020/02/2621047081.png)

## 需要修改源文件

###1、底部页脚标签样式
将以下代码添加至后台主题设置自定义CSS

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
```

将以下代码添加至后台主题设置`博客底部左侧信息`，信息修改成自己的

将以下代码添加至后台主题设置`博客底部右侧信息`

添加完成后，记得去`handsome\component\footer.php`删除原有声明代码哦！
</div>

### 2、添加心知天气

### 3、添加访客总数统计和网站响应耗时

然后打开`component/sidebar.php`文件,在约100行的位置添加如下代码

如图所示
![](/usr/uploads/2020/04/523169023.png)
![](/usr/uploads/2020/04/57570248.png)

### 4、为文章添加百度收录检测

[原文地址](https://wfblog.net/archives/baidu_check.html "原文地址")
1.在模板post.php加入

2.还是在post.php内加入（必须引入jquery）

该API代码文件如下

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

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

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

基于Handsome主题美化

2 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

handsome模板添加服务器状态按钮

# 基于宝塔面板的sspanel魔改V3一键搭建带脚本

V2Ray 基于 Nginx 的 vmess+ws+tls 一键安装脚本

基于Handsome主题美化

黑群晖折腾记（一）安装群辉系统

快速掌握数据结构

数据结构之单链表

MySQL 数据库开发设计规范

手撕Promise.all()

畅购商城---第4章.商品管理

基于Handsome主题美化

2 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

基于Handsome主题美化

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款