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

博主： tl0912
发布时间：2021 年 11 月 30 日
2035次浏览
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

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">
          </section>

六十五：微信通知新评论

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

2.到 Server酱里申请你的专属 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

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>

说明

六十八：防止复制

放在全局的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)

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

添加至后台主题设置-开发者设置-自定义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}\" />

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

<!--使用links插件，输出全站友链-->
                 <?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/
Loli源： https://gravatar.loli.net/avatar/
极客族： https://sdn.geekzu.org/avatar/**
img

打开 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

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

文件位置：/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：红色

Handsome美化（一—三十）

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

Handsome美化（三十一—六十）

三十一：评论添加一键打卡主题设置 - 开发者设置 - 自定义JavaScript 和 PJAX回调函数均添加上以...

End

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

本文作者：tl0912

本文链接：https://www.tianlei.work/archives/79/

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

最后修改：2021 年 12 月 01 日 11 : 33 PM

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

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
  
  牛牛牛
  
  回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

初阳
啥情侣页面，可以发给我吗
melo
看到了，不好意思Σ(っ °Д °;)っ
melo
你好，请问博客信息的彩色气泡颜色是哪里设置的的？谢谢你！
melo
请问，博客信息数据气泡的颜色是在哪里设置的呢，我好像没有找到。谢谢！
Steve
谢谢大佬，已经修改了一部分

此内容被密码保护
浏览次数: 299
此内容被密码保护
浏览次数: 374
此内容被密码保护
浏览次数: 378
此内容被密码保护
浏览次数: 284
Handsome美化（三十一—六十）
浏览次数: 1230

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

tl0912 • 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行的数据：

                    <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

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">
          </section>

六十五：微信通知新评论

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

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>

说明

六十八：防止复制

放在全局的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)

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

添加至后台主题设置-开发者设置-自定义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}\" />

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

<!--使用links插件，输出全站友链-->
                 <?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/
Loli源： https://gravatar.loli.net/avatar/
极客族： https://sdn.geekzu.org/avatar/**
img

打开 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

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

文件位置：/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：红色

Handsome美化（一—三十）

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

Handsome美化（三十一—六十）

三十一：评论添加一键打卡主题设置 - 开发者设置 - 自定义JavaScript 和 PJAX回调函数均添加上以...

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

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

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

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

六十五：微信通知新评论

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

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

六十八：防止复制

六十九：文章end标识

七十：加载动画

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

七十二：输出控制台

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

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

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

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

七十七：开启gzip压缩

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

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

八十：在文章中嵌入网页

八十一：回复可见提示内容修改

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

八十三：更换Gravatar默认头像

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

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

附：handsome文件

8 条评论

发表评论 取消回复

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

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

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

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

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

六十五：微信通知新评论

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

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

六十八：防止复制

六十九：文章end标识

七十：加载动画

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

七十二：输出控制台

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

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

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

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

七十七：开启gzip压缩

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

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

八十：在文章中嵌入网页

八十一：回复可见提示内容修改

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

八十三：更换Gravatar默认头像

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

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

附：handsome文件

发表评论取消回复