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

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

### 六十一：修复透明背景下文章目录bug

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

```
#toc {
    background-color:rgba(255, 255, 255, .15) !important;
}
```

### 六十二：修复透明背景下时光机右侧bug

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

```
.bg-light .lter, .bg-light.lter {
    text-align: justify;
}
```

### 六十三：更好看的友链样式

**1：首先更换`/usr/themes/handsome/links.php`中`51-100行`的数据：**

```
                    <div class="tab-pane fade in" id="tab_2">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "one");
                            ?>
                        </div>
                    </div>

<div class="tab-pane fade in" id="tab_3">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "good");
                            ?>
                        </div>
                    </div>

<div class="tab-pane fade in" id="tab_4">
                        <div class="link-box">
                            <?php
                            $mypattern = <<<eof
  <a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}"> 
    <div class="thumb">
        <img width="200" height="200" src={image} alt="{title}" /> 
    </div>
    <div class="content">
        <p class="title">{name}</p>
    </div>
</a>
eof;
                            Handsome_Plugin::output($mypattern, 0, "ten");
```

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

```
.link-box a .thumb {
    font-size: 0;
    overflow: hidden;
    background-color: #fff;
    margin: 0;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    width: 100%;
}

.link-box {
    overflow: hidden;
    padding: 4.375rem 2.1875rem 2.1875rem;
    margin: -3.125rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.link-box a{
    width: 16%;
    text-align: center;
    margin: 14px;
    border-radius: 1.3125rem;
}
.link-box a:hover{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
```

### 六十四：Handsame主题添加微信公众号入口

**1.打开handsame主题目录->component->sidebar.php**

![](https://photo.tianlei.work/other/64.png)

**2.在上面截图的代码位置：**

```
 <?php if ($this->options->adContentSidebar != ""): ?>
         
```

3.添加以下代码：

```
  
           <section id="a_d_sidebar" class="widget widget_categories wrapper-md clear">
              <h5 class="widget-title m-t-none text-md"><?php _me("欢迎关注微信公众号") ?></h5>
              <img src="https://你的公众号图片地址" alt="个人微信公众号" title="个人微信公众号" class="block" style="">
          </section>
```

### 六十五：微信通知新评论

1.下载后解压，将解压后的目录名改为 `Comment2Wechat`，然后上传到你的 Typecho 的`/usr/plugins`，并在 Typecho 后台开启插件

2.到 [Server酱](http://sc.ftqq.com/3.version)里申请你的专属 `SCKEY`，并根据提示绑定你的微信
3.将你申请到的 `SCKEY`填到插件设置里，保存即可。链接：https://pan.baidu.com/s/11o3YktIwhD5E8Mc_fLxqiA
提取码：aamu

### 六十六：自建公众号对接handsome主题时光机

环境需求

PHP >= 7.1
PHP cURL 扩展
PHP OpenSSL 扩展
PHP SimpleXML 扩展
PHP fileinfo 扩展
PHP PDO_MYSQL 扩展

食用方法

1、拷贝项目到你的服务器
2、打开 网址/install.php 安装
3、在公众号后台服务器配置填写服务器地址为 项目所在网址/server.php 并启用服务器配置
4、公众号发送绑定，点击链接填写相关信息进行绑定
5、 配置完成，尽情使用吧！使用方法同handsome官方时光机发送公众号

github地址

[https://github.com/iLay1678/wechat_for_handsome](https://github.com/iLay1678/wechat_for_handsome)

2021.20.30打包链接：https://pan.baidu.com/s/1jCwAwdwU9U0_3DIHlmg1JQ
提取码：78ei

### 六十七:给背景添加粒子效果

1.下载js文件
链接：https://pan.baidu.com/s/1cd5nAbPii5bTlNhf37eNEw
提取码：3j8d

> 2.在网站引入js文件

```
<script src="source/Pranule.js"></script>
```

> 3.无需设置直接运行

```
<script>Pranule();</script>
```

> 4.如需要自定义，按照以下格式设置

```
<script>Pranule(['bg_effect','100',"0.0.0","0,0,0",'0','6000','20000','0','2','2','','0']);</script>
```

说明![](https://photo.tianlei.work/other/67.png)

### 六十八：防止复制

放在全局的js中

代码：

```
<script language="Javascript">

document.oncontextmenu=new Function("event.returnValue=false");

document.onselectstart=new Function("event.returnValue=false");

</script>
```

### 六十九：文章end标识

在模板文件 post.php内添加以下代码，建议在83行广告输出结束后添加。

```

<div class="tt-fenge-end">
    <span>End</span>
</div>

```

在后台 自定义css中添加如下代码

```
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #eee;height: 0px;margin: 35px 0px;text-align: center;width: 100%;line-height: 1.6em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 2px 8px;position: relative;top: -14px;border-radius: 12px;font-size: 12px;}
        /*深色模式下文章正文下的结束End分割线颜色*/
        html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}
```

### 七十：加载动画

以下代码放置 主题文件header.php内

```

    <style>
    #PageLoading{background-color:#fff;height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}
    #PageLoading-center{width:100%;height:100%;position:relative;}
    #PageLoading-center-absolute{
        position:absolute;left:50%;top:50%;
        height:200px;width:200px;
        margin-top:-100px;
        margin-left:-100px;
    }
    .object2{
        -moz-border-radius:50% 50% 50% 50%;
        -webkit-border-radius:50% 50% 50% 50%;
        border-radius:50% 50% 50% 50%;
        position:absolute;
        border-left:5px solid #FFB6C1;
        border-right:5px solid #b6def7;
        border-top:5px solid transparent;
        border-bottom:5px solid transparent;
        -webkit-animation:animate 2s infinite;
        animation:animate 2s infinite;

}
    #object_one{left:75px;top:75px;width:50px;height:50px;}
    #object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
    #object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
    #object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}
    @-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    @keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}
    100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}
    </style>

<body id="body" class="fix-padding skt-loading">
    <body id="body" class="fix-padding" style="overflow:hidden">
        <div id="PageLoading" style="z-index:99999999;">
            <div id="PageLoading-center">
                <div id="PageLoading-center-absolute">
                    <div class="object2" id="object_four"></div>
                    <div class="object2" id="object_three"></div>
                    <div class="object2" id="object_two"></div>
                    <div class="object2" id="object_one"></div>
                </div>
            </div>
        </div>
    </body>
</body>
```

以下代码放置 后台-开发者设置-自定义javascript 内

```
$(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });
```

这里面还有三种样式的加载动画有需要可以看看

[为typecho博客添加加载动画 - 友人C (ihewro.com)](https://www.ihewro.com/archives/305/)

### 七十一：网站背景添加海浪背景

* 添加至后台主题设置-开发者设置-自定义CSS

```
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
```

* 添加至后台主题设置-开发者设置-自定义网站头部代码

```
<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>
```

### 七十二：输出控制台

放入后台-外观设置-开发者设置-自定义body

```

    <script type="text/javascript">
      console.clear();  //清空控制台
      console.log("\n %c 凉心‘s Blog","color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;");  //万能控制台，可写html代码
    </script>
```

### 七十三：背景添加冒泡动画

放入后台-外观设置-开发者设置-自定义body

```

   <div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
```

* 说明
  ```
  id: '',                           //容器ID
  num: 100,                        // 个数
  start_probability: 0.1,          // 如果数量小于num，有这些几率添加一个新的
  radius_min: 1,                   // 初始半径最小值
  radius_max: 2,                   // 初始半径最大值
  radius_add_min: .3,               // 半径增加最小值
  radius_add_max: .5,               // 半径增加最大值
  opacity_min: 0.3,                 // 初始透明度最小值
  opacity_max: 0.5,                // 初始透明度最大值
  opacity_prev_min: .003,            // 透明度递减值最小值
  opacity_prev_max: .005,            // 透明度递减值最大值
  light_min: 40,                 // 颜色亮度最小值
  light_max: 70,                 // 颜色亮度最大值
  is_same_color: false,          //泡泡颜色是否相同
  background:"#f1f3f4"           //背景颜色
  ```

### 七十四：响应耗时和访客总数

* 首先将以下代码加到`/usr/themes/handsome/libs/Content.php`中，放在class Content{}之前

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

/*响应时间*/
    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 text-second"> <span class="blog-info-icons"> <i data-feather="refresh-ccw"></i></span>
               <span class="badge
           pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>
           <li class="list-group-item text-second"> <span class="blog-info-icons"> <i data-feather="users"></i></span>
               <span class="badge
           pull-right"><?php echo theAllViews();?></span><?php _me("访客总数") ?></li>
```

### 七十五：右侧边栏添加全站字数

* 在`component/sidebar.php`的开头加入下面的代码:

```
<?php
//字数统计
function allOfCharacters() {
    $chars = 0;
    $db = Typecho_Db::get();
    $select = $db ->select('text')->from('table.contents');
    $rows = $db->fetchAll($select);
    foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
    $unit = '';
    if($chars >= 10000)     { $chars /= 10000; $unit = '万'; } 
    else if($chars >= 1000) { $chars /= 1000;  $unit = '千'; }
    $out = sprintf('%.2lf %s',$chars, $unit);
    return $out;
}
?>
```

* 在`component/sidebar.php`处，选择合适位置加入以下代码

```
<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-2"></i></span>
               <span class="badge 
           pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
```

### 七十六：全站友链显示图片

* 在`aside.php`里面大约214行的地方修改代码，在a标签内加上：

```
<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" />
```

* 或者复制下方全部代码替换

```

                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a rel='noopener' href=\"{url}\" target=\"_blank\"><img style=\"width:18px;height:18px;border-radius:100%;margin-right:3px;\" src=\"{image}\" /><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
```

### 七十七：开启gzip压缩

* 在根目录`config.inc.php`文件中，加入以下PHP代码即可（建议加在最上面）：
  ```
  /** 开启gzip压缩 */
  ob_start('ob_gzhandler');
  ```

### 七十八：正文结束添加版权信息

* 在主题根目录下`post.php`文件中`<?php echo Content::exportPayForAuthors(); ?>`(大概在87行左右)添加以下内容

```
                 
                <div class="entry-content l-h-2x">
                <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
                <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
             </div>
             <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
             <span>本文作者：<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
             <span>文章标题：<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
             <span>本文地址：<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
             <span>版权说明：若无注明，本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创，转载请保留文章出处。</span>
            </div>
         </div>
                
  ```

### 七十九：时光机使用DPplayer播放器

****后台-设置-评论-允许使用的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行左右，自行修改提示内容即可；****

### 八十二：更换后台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/)**
  [![img](https://cdn.s1mpleqaq.cn/blog20211130155358.png)img](https://cdn.s1mpleqaq.cn/blog20211130155358.png)

****打开** `var/Typecho/Common.php`**找到下面的代码，大概在932行****

```
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}
```

**替换为：**

```
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://cdn.v2ex.com/gravatar/' : 'http://gravatar.duoshuo.com/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}
```

**2.另外一个修改方法**

**具体方式为在** ****config.inc.php**** **中加入**

```
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
```

### 八十三：更换Gravatar默认头像

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

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

****示例：****
[![img](https://cdn.s1mpleqaq.cn/blog20211130155421.png)](https://cdn.s1mpleqaq.cn/blog20211130155421.png)

[img](https://cdn.s1mpleqaq.cn/blog20211130155421.png)

### 八十四：文章最后修改时间格式

文件位置：`/usr/theme/handsome/libs/content.php`
修改`public static function exportPostFooter`中对应的内容
或者查找"最后修改"

### 八十五：右侧博客信息背景色

文件位置：`/usr/theme/handsome/component/sidebar.php`
博客信息：修改`<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>`中的

```
<span class="badge 
pull-right">
```

添加 `style="background: #428bca;"`

```
 <span class="badge
 pull-right"  style="background: #428bca;">
```

### 附：handsome文件

```
component/aside.php        左边导航栏
  component/comments.php     评论区
  component/footer.php       底部版权、音乐播放器之类
  component/header.php       页面头，没啥要改的
  component/headnav.php      顶部导航
  component/say.php          时光机动态
  component/sidebar.php      右侧栏目
  component/third_party_comments.php    3.3.0新增，第三方评论
  css/        博客CSS，一般不要改
  fonts/      博客字体，一般不要改
  img/        图像，一般不要改
  js/         js文件，一般不要改
  lang/       语言文件
  libs/Content.php    文章内容
  libs/...    一般不要改
  usr/        另一个语言文件？
  404.php     404界面
  archive.php    整合
  booklist.php   书单
  cross.php      时光机
  files.php      归档
  functions.php  配置界面的东西
  guestbook.php  留言板
  index.php      首页
  links.php      友链
  page.php       文章页面整合
  post.php       文章输出

color： 选填，不填默认为success（绿色），可选值：
  light：白色
  info：蓝色
  dark：深色
  success：绿色
  black：黑色
  warning：黄色
  primary：紫色
  danger：红色
```

<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">
三十一：评论添加一键打卡主题设置 - 开发者设置 - 自定义JavaScript 和 PJAX回调函数 均添加上以...
</div>
</div>
</a>

</div>

</div>

End

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

最后修改：2021 年 12 月 01 日

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

8 条评论

melo
January 30th, 2022 at 11:26 pm

请问，博客信息数据气泡的颜色是在哪里设置的呢，我好像没有找到。谢谢！
1. melo
  January 30th, 2022 at 11:36 pm
  
  @melo
  
  看到了，不好意思Σ(っ °Д °;)っ
Steve
January 29th, 2022 at 09:54 am

谢谢大佬，已经修改了一部分
minghua
December 27th, 2021 at 06:12 pm

你好，请问右侧最边上的设置怎么显示全部选项，我的只有一个深色模式
kaluosifa
December 18th, 2021 at 06:18 pm

感谢，对我这个小白来说太使用了
sirhexs
December 14th, 2021 at 01:39 am

我居然一条条看完了
1. tl0912
  December 21st, 2021 at 03:42 pm
  
  @sirhexs
  
  好棒呀
2. tl0912
  December 17th, 2021 at 09:30 am
  
  @sirhexs
  
  牛牛牛

此处评论已关闭

今日已经过去小时

这周已经过去天

本月已经过去天

今年已经过去个月

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

彼岸花露 • 2021 年 11 月 30 日

### 六十一：修复透明背景下文章目录bug

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

```
#toc {
    background-color:rgba(255, 255, 255, .15) !important;
}
```

### 六十二：修复透明背景下时光机右侧bug

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

```
.bg-light .lter, .bg-light.lter {
    text-align: justify;
}
```

### 六十三：更好看的友链样式

**1：首先更换`/usr/themes/handsome/links.php`中`51-100行`的数据：**

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

```
.link-box a .thumb {
    font-size: 0;
    overflow: hidden;
    background-color: #fff;
    margin: 0;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    width: 100%;
}

### 六十四：Handsame主题添加微信公众号入口

**1.打开handsame主题目录->component->sidebar.php**

![](https://photo.tianlei.work/other/64.png)

**2.在上面截图的代码位置：**

```
 <?php if ($this->options->adContentSidebar != ""): ?>
         
```

3.添加以下代码：

### 六十五：微信通知新评论

1.下载后解压，将解压后的目录名改为 `Comment2Wechat`，然后上传到你的 Typecho 的`/usr/plugins`，并在 Typecho 后台开启插件

### 六十六：自建公众号对接handsome主题时光机

环境需求

PHP >= 7.1
PHP cURL 扩展
PHP OpenSSL 扩展
PHP SimpleXML 扩展
PHP fileinfo 扩展
PHP PDO_MYSQL 扩展

食用方法

github地址

[https://github.com/iLay1678/wechat_for_handsome](https://github.com/iLay1678/wechat_for_handsome)

2021.20.30打包链接：https://pan.baidu.com/s/1jCwAwdwU9U0_3DIHlmg1JQ
提取码：78ei

### 六十七:给背景添加粒子效果

1.下载js文件
链接：https://pan.baidu.com/s/1cd5nAbPii5bTlNhf37eNEw
提取码：3j8d

> 2.在网站引入js文件

```
<script src="source/Pranule.js"></script>
```

> 3.无需设置直接运行

```
<script>Pranule();</script>
```

> 4.如需要自定义，按照以下格式设置

```
<script>Pranule(['bg_effect','100',"0.0.0","0,0,0",'0','6000','20000','0','2','2','','0']);</script>
```

说明![](https://photo.tianlei.work/other/67.png)

### 六十八：防止复制

放在全局的js中

代码：

```
<script language="Javascript">

document.oncontextmenu=new Function("event.returnValue=false");

document.onselectstart=new Function("event.returnValue=false");

</script>
```

### 六十九：文章end标识

在模板文件 post.php内添加以下代码，建议在83行广告输出结束后添加。

```

<div class="tt-fenge-end">
    <span>End</span>
</div>

```

在后台 自定义css中添加如下代码

### 七十：加载动画

以下代码放置 主题文件header.php内

以下代码放置 后台-开发者设置-自定义javascript 内

```
$(function(){
        $("#PageLoading").fadeOut(400);
        $("#body").css('overflow','');
    });
```

这里面还有三种样式的加载动画有需要可以看看

[为typecho博客添加加载动画 - 友人C (ihewro.com)](https://www.ihewro.com/archives/305/)

### 七十一：网站背景添加海浪背景

* 添加至后台主题设置-开发者设置-自定义CSS

* 添加至后台主题设置-开发者设置-自定义网站头部代码

### 七十二：输出控制台

放入后台-外观设置-开发者设置-自定义body

### 七十三：背景添加冒泡动画

放入后台-外观设置-开发者设置-自定义body

### 七十四：响应耗时和访客总数

* 首先将以下代码加到`/usr/themes/handsome/libs/Content.php`中，放在class Content{}之前

* 然后在`/usr/themes/handsome/component/sidebar.php`文件内，找到博客信息下面添加以下代码

### 七十五：右侧边栏添加全站字数

* 在`component/sidebar.php`的开头加入下面的代码:

* 在`component/sidebar.php`处，选择合适位置加入以下代码

### 七十六：全站友链显示图片

* 在`aside.php`里面大约214行的地方修改代码，在a标签内加上：

```
<img style=\"width:18px;height:18px;border-radius:50%;margin-right:3px;\" src=\"{image}\" />
```

* 或者复制下方全部代码替换

### 七十七：开启gzip压缩

* 在根目录`config.inc.php`文件中，加入以下PHP代码即可（建议加在最上面）：
  ```
  /** 开启gzip压缩 */
  ob_start('ob_gzhandler');
  ```

### 七十八：正文结束添加版权信息

* 在主题根目录下`post.php`文件中`<?php echo Content::exportPayForAuthors(); ?>`(大概在87行左右)添加以下内容

### 七十九：时光机使用DPplayer播放器

****后台-设置-评论-允许使用的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行左右，自行修改提示内容即可；****

### 八十二：更换后台Gravatar国内镜像**

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

****打开** `var/Typecho/Common.php`**找到下面的代码，大概在932行****

```
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://secure.gravatar.com' : 'http://www.gravatar.com';
$url .= '/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}
```

**替换为：**

```
public static function gravatarUrl($mail, $size, $rating, $default, $isSecure = false)
{
$url = $isSecure ? 'https://cdn.v2ex.com/gravatar/' : 'http://gravatar.duoshuo.com/avatar/';

if (!empty($mail)) {
$url .= md5(strtolower(trim($mail)));
}

$url .= '?s=' . $size;
$url .= '&r=' . $rating;
$url .= '&d=' . $default;

return $url;
}
```

**2.另外一个修改方法**

**具体方式为在** ****config.inc.php**** **中加入**

```
define('__TYPECHO_GRAVATAR_PREFIX__', 'https://cdn.v2ex.com/gravatar/');
```

### 八十三：更换Gravatar默认头像

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

****示例：****
[![img](https://cdn.s1mpleqaq.cn/blog20211130155421.png)](https://cdn.s1mpleqaq.cn/blog20211130155421.png)

[img](https://cdn.s1mpleqaq.cn/blog20211130155421.png)

### 八十四：文章最后修改时间格式

文件位置：`/usr/theme/handsome/libs/content.php`
修改`public static function exportPostFooter`中对应的内容
或者查找"最后修改"

### 八十五：右侧博客信息背景色

文件位置：`/usr/theme/handsome/component/sidebar.php`
博客信息：修改`<?php Typecho_Widget::widget('Widget_Stat')->to($stat); ?>`中的

```
<span class="badge 
pull-right">
```

添加 `style="background: #428bca;"`

```
 <span class="badge
 pull-right"  style="background: #428bca;">
```

### 附：handsome文件

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

8 条评论

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

Handsome美化（一—三十）

Handsome美化（三十一—六十）

获取qq头像api接口

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

一、C语言导学与数据类型、数据输入输出（C语言）

Handsome美化（三十一—六十）

七、结构体与C++引用（C语言）

数据结构-2.2.3做题记录

六、函数（C语言）

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