效果

前言

不得不说，handsome主题制作确实很精良，非常感谢原作者友人C的辛苦创作

开启GZIP压缩

为什么要开启GZIP

网站采用Gzip压缩，可以大大缩减网站加载时间，也可以减少流量的使用

更详细的请查看下面这篇文章

<?php
/**
 * Typecho Blog Platform
 *
 * @copyright  Copyright (c) 2008 Typecho team (http://www.typecho.org)
 * @license    GNU General Public License 2.0
 * @version    $Id: index.php 1153 2009-07-02 10:53:22Z magike.net $
 */

/** 开启gzip压缩, add by yovisun */  
ob_start('ob_gzhandler');

/** 载入配置支持 */
if (!defined('__TYPECHO_ROOT_DIR__') && !@include_once 'config.inc.php') {
    file_exists('./install.php') ? header('Location: install.php') : print('Missing Config File');
    exit;
}

/** 初始化组件 */
Typecho_Widget::widget('Widget_Init');

/** 注册一个初始化插件 */
Typecho_Plugin::factory('index.php')->begin();

/** 开始路由分发 */
Typecho_Router::dispatch();

/** 注册一个结束插件 */
Typecho_Plugin::factory('index.php')->end();

音乐播放失效问题

handsome主题音乐时有失效问题，可用以下方法解决

修改底部徽章

/*底部页脚*/
.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: #ff9f18
}

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

.github-badge .bg-green {
  background-color: #00c787
}

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

<div class="github-badge">
<a href="http://www.beian.miit.gov.cn/" rel="nofollow" target="_blank">
<span class="badge-subject"><font color=ffffff>皖ICP备</span><span class="badge-value bg-blue">19008954号-2</span>
</a>
</div>

<img src="https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>" >

        <span class="text-ellipsis"><img src="https://img.shields.io/static/v1?label=©Copyright
©Copyrigh&message=SWJ&color=informational">     <?php $this->options->BottomleftInfo(); ?></span>

删除网站底部驱动信息

进入服务器-主题目录-component-footer.php

找到如下内容并注释相应部分

<span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
      <!--Powered by <a target="blank" href="http://www.typecho.org">Typecho</a>&nbsp;|&nbsp;Theme by <a target="blank" href="https://www.ihewro.com/archives/489/">handsome</a>-->
      </span>

修改导航栏字体

• 展示

/*下面修改为自己字体的位置名和字体名*/
@font-face{
    font-family: 'myfont';
    src : url('../fonts/myfont/***.TTF');
}

 <!-- 本地css静态资源 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

   <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/swj.css" type="text/css" />
      <style>
           .m-l-xs{
                  font-family: 'myfont';
            }
      </style>

删除首页中间博客名文字

效果看本博客首页

 <!-- 本地css静态资源 -->
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/function.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />
    <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.min.css?v=<?php echo Handsome::$version.Handsome::$versionTag ?>" type="text/css" />

   <link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/swj.css" type="text/css" />
      <style>
           .m-l-xs{
                  font-family: 'myfont';
            }
<!-- 添加下面代码 -->
           .xiaoshi{
                display: none;
           }

      </style>

 <!--/公告位置-->
          <?php endif; ?>
        <header class="bg-light lter b-b wrapper-md">
          <h1 class="m-n font-thin h3 text-black l-h"><?php $this->options->title(); ?></h1>
          <small class="text-muted letterspacing indexWords"><?php
              if (@!in_array('hitokoto',$this->options->featuresetup)) {
                  $this->options->Indexwords();

复制成功提示框

复制下面内容至header.php中合适位置

      <!-- 加载复制成功 -->
      <script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>

如果是handsome主题，可以加在开发者设置中的自定义输出body 尾部的HTML代码中并且在自定义 JavaScript中添加如下代码

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

保存即可

文章圆角化及放大动画

打开handsome后台外观设置，进入开发者设置-自定义CSS，输入以下内容

/*首页文章版式圆角化*/

.panel {
    border: none;
    border-radius: 8px;
}

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

.item-thumb {
    border-radius: 8px;
}


/*首页文章列表悬停上浮*/

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

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


/*头图超出*/

.index-post-img {
    overflow: hidden;
    border-radius: 8px;
}

.item-thumb,
.item-thumb-small {
    transition: all 0.3s;
    border-radius: 8px;
}


/*超出部分隐藏*/

.entry-thumbnail {
    overflow: hidden;
    border-radius: 8px;
}

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

#post-content img:hover {
    transform: scale(1.05);
    border-radius: 8px;
}

.item-thumb:hover,
.item-thumb-small:hover {
    transform: scale(1.1);
    border-radius: 8px;
}

网页阴影

打开handsome后台外观设置，进入开发者设置-自定义CSS，输入以下内容

/*panel阴影*/
.panel{
   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);
}

.panel: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);
}

.panel-small{
    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);
}

.panel-small: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);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}

鼠标停留头像旋转

打开handsome后台外观设置，进入开发者设置-自定义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
}

UserAgent评论标志插件

• 效果

• 下载

点击下载

• 使用

  • 上传插件至Typecho的plugins目录下，且插件目录名应为UserAgent
  • 修改Handsome主题，component目录下的comments.php代码文件，大概第60~80行左右

找到如下内容

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

修改为如下代码

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>

• 还需要注意的一点是，如果评论者开启CDN加速，那么将无法获取真实ip并获取其位置

获取真实ip：
在Typecho博客网站的根目录的config.inc.php插入下面的代码：

//** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

彩色标签云

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义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;
});

鼠标评论框美化

typecho伪静态

挂载bilibili视频响应式代码

演示：

复制嵌入代码添加到文章。

然后在给iframe 这个标签添加class="iframe_video"

再然后就是在handsome后天css文件添加如下css：

/*bilibili视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

访客数量和网站响应耗时

• 首先将以下代码加到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;
    }

• slider.php添加代码

           <li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></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="clock"></i></span> <span 
                       class="badge
            pull-right"><?php echo timer_stop();?></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处，选择合适位置加入以下代码（位置大概在 90 多行）

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

美化markdown

/*美化markdown标题*/
#post-content h1 {
font-size: 30px
}

#post-content h2 {
position: relative;
margin: 20px 0 32px!important;
font-size: 1.55em;
}

#post-content h3 {
font-size: 20px
}

#post-content h4 {
font-size: 15px
}

#post-content h2::after {
transition: all .35s;
content: "";
position: absolute;
background: linear- 
gradient(#3c67bd8c 30%,#3c67bd 70%);
width: 1em;
left: 0;
box-shadow: 0 3px 3px rgba(32,160,255,.4);
height: 3px;
bottom: -8px;
}

#post-content h2::before {
content: "";
width: 100%;
border-bottom: 1px solid #eee;
bottom: -7px;
position: absolute

}

#post-content h2:hover::after {
width: 2.5em;
}

 #post-content h1,#post-content 
 h2,#post-content h3,#post-content 
 h4,#post-content h5,#post-content .h6 {
color: #666;
line-height: 1.4;
font-weight: 700;
margin: 30px 0 10px 0
  }

自定义右键

效果

• 外观设置-开发者设置-自定义输出body 尾部的HTML代码，插入下面的代码

<!-- 自定义右键 -->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(249,129,234,0.88);border-radius: 8px}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://blog.zggsong.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度</span></a></li>
        <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
        <li><a href="https://blog.zggsong.cn/friendlink.html"><i class="fa fa-user fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://blog.zggsong.cn/message.html"><i class="fa fa-pencil fa-fw"></i><span>给我留言吧</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
     
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要搜索的内容！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    function googleSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要搜索的内容！") : window.open("https://www.google.com/search?q=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

全站友情链接带头像

在主题根目录/handsome/component/aside.php185行将下列代码

<!--友情链接-->
              <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                    <span class="nav-icon"><i data-feather="user"></i></span>
                  <span><?php _me("友链") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("友链") ?></span>
                    </a>
                  </li>
                  <!--使用links插件，输出全站友链-->
                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><i><img width=\"18\" height=\"18\" src={image} /></i><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
                </ul>
              </li>

替换成

<!--带头像的友情链接-->
            <li>
                <a class="auto">
                  <span class="pull-right text-muted">
                    <i class="fontello icon-fw fontello-angle-right text"></i>
                    <i class="fontello icon-fw fontello-angle-down text-active"></i>
                  </span>
                    <span class="nav-icon"><i data-feather="user"></i></span>
                  <span><?php _me("友链") ?></span>
                </a>
                <ul class="nav nav-sub dk">
                  <li class="nav-sub-header">
                    <a data-no-instant>
                      <span><?php _me("友链") ?></span>
                    </a>
                  </li>
                  <!--使用links插件，输出全站友链-->
                 <?php $mypattern1 = "<li data-original-title=\"{title}\" data-toggle=\"tooltip\" 
data-placement=\"top\"><a href=\"{url}\" target=\"_blank\"><i><img width=\"18\" height=\"18\" src={image} alt=\"{title}\" /></i><span>{name}</span></a></li>";
                  Handsome_Plugin::output($mypattern1, 0, "ten");?>
                </ul>
              </li>

自用css

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：红色

版权属于：SWJ（除特别注明外）

本文链接：https://blog.zggsong.cn/archives/766.html

本站文章采用CC BY-NC-SA 4.0进行许可，请在转载时注明出处及本声明！