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

1：去除顶部博客名称

展开查看详情

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

options->title(); ?>

2：标题栏title自动变化

展开查看详情

把下面的代码添加到开发者设置->自定义输出head 头部的HTML代码中即可。
``

3：一言打字特效美化

展开查看详情


第一步
先把这两个js放到：设置外观--开发者设置--自定义输出head头部的HTML代码

第二步
把下面的js代码。复制到：设置外观--开发者设置--自定义JavaScript

function typedword(){$.ajax({type:"get",url:"https://api.gqink.cn/api/page/love",data:{page:'index'},async:true,success:function(word){var list=[];for(var i=0;i<word.data.length;i++){list.push(word.data[i]['word'])}$("#word").typed({strings:list,typeSpeed:20,loop:true,backDelay:3000,})}})}
第三步
把下面的html代码复制到：设置外观--初级设置--首页一行文字介绍

最后保存一下就大功告成

4：给handsome加入“岁月不待人”

展开查看详情

给handsome加入“岁月不待人”

首先

将以下代码加到/usr/themes/handsome/component/sidebar.php，在122行左右，放在<?php endif; ?>之后

<!-- 时间倒计时代码开始 --> <section id="blog_info" class="widget widget_categories wrapper-md clear"> <h5 class="widget-title m-t-none text-md"><?php _me("岁月不待人") ?></h5> <div class="sidebar sidebar-count"> <div class="content"> <div class="item" id="dayProgress"> <div class="title">今日已经过去<span></span>小时</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-1"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="weekProgress"> <div class="title">这周已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-2"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="monthProgress"> <div class="title">本月已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-3"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="yearProgress"> <div class="title">今年已经过去<span></span>个月</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-4"></div> </div> <div class="progress-percentage"></div> </div> </div> </div> </div> </section> <!-- 时间倒计时代码结束 -->

其次

添加完成后,将以下代码放入后台-外观设置-开发者设置-自定义css

`/ 时间倒计时 /
.sidebar-count .content {
padding: 15px
}

.sidebar-count .content .item {
margin-bottom: 15px
}

.sidebar-count .content .item:last-child {
margin-bottom: 0
}

.sidebar-count .content .item .title {
font-size: 12px;
color: var(--minor);
margin-bottom: 5px;
display: flex;
align-items: center
}

.sidebar-count .content .item .title span {
color: var(--theme);
font-weight: 500;
font-size: 14px;
margin: 0 5px
}

.sidebar-count .content .item .progress {
display: flex;
align-items: center
}

.sidebar-count .content .item .progress .progress-bar {
height: 10px;
border-radius: 5px;
overflow: hidden;
background: var(--classC);
width: 0;
min-width: 0;
flex: 1;
margin-right: 5px
}
@keyframes progress {
0% {
background-position: 0 0
}

100% {
    background-position: 30px 0
}

}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
width: 0;
height: 100%;
border-radius: 5px;
transition: width 0.35s;
-webkit-animation: progress 750ms linear infinite;
animation: progress 750ms linear infinite
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
background: #bde6ff;
background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
background: #ffd980;
background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
background: #ffa9a9;
background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
background: #67c23a;
background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
background-size: 30px 30px
}

.sidebar-count .content .item .progress .progress-percentage {
color: var(--info)
}`

最后

添加完成,将以下代码放入后台-外观设置-开发者设置-自定义输出body尾部

`

`

第一步放在 非文章界面 前面

5：去除博客底部版权

展开查看详情

把下面代码放在主题目录usr/themes/handsome/component/footer.php内大概在177行，覆盖原来的即可
请输入图片描述

<footer id="footer" class="app-footer" role="footer">
<div class="wrapper bg-light">
    <span class="pull-right hidden-xs text-ellipsis">
        <?php $this->options->BottomInfo();
  // 可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解
  ?>
    </span>
    <span class="text-ellipsis">
        <?php
        $this->options->BottomleftInfo(); ?>
    </span>
</div>

</footer>

6：信息统计增加全站字数、在线人数、响应耗时和访客总数

展开查看详情

首先将以下代码加到/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;
}
    /**
 * 全站字数
 */
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;
} 
/**
 * 在线人数
 */
function online_users() {
    $filename='online.txt'; //数据文件
    $cookiename='Nanlon_OnLineCount'; //Cookie名称
    $onlinetime=30; //在线有效时间
    $online=file($filename); 
    $nowtime=$_SERVER['REQUEST_TIME']; 
    $nowonline=array(); 
    foreach($online as $line){ 
        $row=explode('|',$line); 
        $sesstime=trim($row[1]); 
        if(($nowtime - $sesstime)<=$onlinetime){
            $nowonline[$row[0]]=$sesstime;
        } 
    } 
    if(isset($_COOKIE[$cookiename])){
        $uid=$_COOKIE[$cookiename]; 
    }else{
        $vid=0;
        do{
            $vid++; 
            $uid='U'.$vid; 
        }while(array_key_exists($uid,$nowonline)); 
        setcookie($cookiename,$uid); 
    } 
    $nowonline[$uid]=$nowtime;
    $total_online=count($nowonline); 
    if($fp=@fopen($filename,'w')){ 
        if(flock($fp,LOCK_EX)){ 
            rewind($fp); 
            foreach($nowonline as $fuid=>$ftime){ 
                $fline=$fuid.'|'.$ftime."\n"; 
                @fputs($fp,$fline); 
            } 
            flock($fp,LOCK_UN); 
            fclose($fp); 
        } 
    } 
    echo "$total_online"; 
}

然后在/usr/themes/handsome/component/sidebar.php文件内，找到合适和位置添加以下代码： 注：处就是添加代码的地方，找到你想加的位置添加代码即可

<li class="list-group-item text-second"><span class="blog-info-icons"><i data-feather="edit-3"></i> 
</span><span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?> 
</li>
<li class="list-group-item"> <i class="glyphicon glyphicon-user text-muted text-muted"></i> <span 
class="badge pull-right"><?php echo online_users() ?></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>
<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>


一朵无名之花.中国

翻开那发黄的扉页， 命运将它装订得极为拙劣。含着泪，我一读再读。却不得不承认， 青春是一本太仓促的书。

一朵无名之花.中国
最后修改：2022 年 11 月 16 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏