魔改整体效果取自神代綺凜的网站

首先,在handsome的后台设置 > 外观设置 > 外观设置开关中关闭盒子模型

1. 添加CSS(实现网站整体效果)

首先下载下面的css文件

将这个文件放到你网站的如下目录中:usr/themes/handsome/assets/css/

然后打开usr/themes/handsome/component/header.php,在53行附近添加一行<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/handsome.css" type="text/css">

然后打开usr/themes/handsome/component/headnav.php,在第一行后加一行 <div id="bg"></div>

最后全部保存

修改网站背景

打开usr/themes/handsome/assets/css/handsome.css,在96行附近改掉PC端背景图片。

163行附近修改移动端背景图片。

Tips: 如果发现出现了首页点击图片无法进入文章的bug,该网站记录了解决方法:

打开usr/themes/handsome/libs/Content.php,找到注释<!--text-muted-->
在下方增加一行:<a href="{$parameterArray['linkUrl']}" class="ahover"></a>

2. 添加js(实现首页右边栏自动隐藏,网页标题自动变化等)

下载下面的js文件

将这个文件放到typecho的如下路径中:./usr/themes/handsome/assets/js/

然后打开usr/themes/handsome/component/footer.php,在350行附近添加一行<script type="text/javascript" src="<?php echo STATIC_PATH; ?>js/handsome.js"></script>

最后保存。

3. 魔改代码块样式

效果:

出处:

插件地址:https://github.com/Xcnte/Code-Prettify-for-typecho

将此插件放到./usr/plugins/目录下,文件夹命名为CodePrettify,然后在后台插件管理处开启插件。

修改(替换)./usr/themes/handsome/assets/css/目录下的handsome.min.css,文件地址:

在handsome的Pjax回调函数处填写如下代码:

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

记得在handsome后台设置里关闭自带的代码高亮。

4. 可爱的返回顶部插件

5. 魔改网站底部

效果:

首先将以下代码添加至后台主题设置自定义CSS

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

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

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

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

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

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

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

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

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

<div class="github-badge">
<a href="./" title="©2019&nbsp;LHD">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;LHD</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="./" title="陕ICP备 19001390号-1" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">陕ICP备</span><span class="badge-value bg-green">19001390号-1</span>
</a>
</div>

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

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

添加完成后,需要去handsome\component\footer.php删除原有底部代码,以下为删除完后的效果(大概1~12行):

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <div class="wrapper b-t 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>
      <!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->

6. Typecho炫彩鼠标插件:HoerMouse

首先下载下面的插件:

解压放到usr/plugins/目录中,文件夹名改为HoerMouse,登录管理后台,激活插件即可。

7. 评论附带设备信息

效果:

首先将下面这段css全部加入到handsome/assets/css/handsome.min.css末尾:

.ua-icon{display:inline-block;width:1pc;height:1pc;background-size:cover;background-repeat:no-repeat;vertical-align:text-top}.icon-360{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/360.png)}.icon-android{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/android.png);height:19px}.icon-apple{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/apple.png)}.icon-baidu{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/baidu.png)}.icon-chrome{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/chrome.png)}.icon-edge{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/edge.png)}.icon-firefox{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/firefox.png)}.icon-google{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/google.png)}.icon-ie{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/ie.png)}.icon-liebao{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/liebao.png)}.icon-linux{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/linux.png)}.icon-mac{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/mac.png)}.icon-opera{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/opera.png)}.icon-qq{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/qq.png)}.icon-quark{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/quark.png)}.icon-safari{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/safari.png)}.icon-ubuntu{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/ubuntu.png)}.icon-uc{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/uc.png)}.icon-win1{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/win1.png)}.icon-win2{background-image:url(https://cdn.zrahh.com/usr/uploads/2019/03/win2.png)}

也可后台加入自定义 css 或是直接在 header.php 中引入

然后找到 handsome/functions.php,将下面代码完整复制,加到 functions.php 文件的最末尾:

// 获取浏览器信息
function getBrowser($agent)
{
    if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
        $outputer = '<i class="ua-icon icon-ie"></i>&nbsp;&nbsp;Internet Explore';
    } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
      $str1 = explode('Firefox/', $regs[0]);
$FireFox_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-firefox"></i>&nbsp;&nbsp;FireFox';
    } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
      $str1 = explode('Maxthon/', $agent);
$Maxthon_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-edge"></i>&nbsp;&nbsp;MicroSoft Edge';
    } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360"></i>&nbsp;&nbsp;360极速浏览器';
    } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
        $str1 = explode('Edge/', $regs[0]);
$Edge_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-edge"></i>&nbsp;&nbsp;MicroSoft Edge';
    } else if (preg_match('/UC/i', $agent)) {
              $str1 = explode('rowser/',  $agent);
$UCBrowser_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-uc"></i>&nbsp;&nbsp;UC浏览器';
    }  else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {
                  $str1 = explode('rowser/',  $agent);
$QQ_vern = explode('.', $str1[1]);
        $outputer = '<i class= "ua-icon icon-qq"></i>&nbsp;&nbsp;QQ浏览器';
    } else if (preg_match('/UBrowser/i', $agent, $regs)) {
              $str1 = explode('rowser/',  $agent);
$UCBrowser_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-uc"></i>&nbsp;&nbsp;UC浏览器';
    }  else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
        $outputer = '<i class= "ua-icon icon-opera"></i>&nbsp;&nbsp;Opera';
    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Chrome/', $agent);
$chrome_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-chrome""></i>&nbsp;&nbsp;Google Chrome';
    } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
         $str1 = explode('Version/',  $agent);
$safari_vern = explode('.', $str1[1]);
        $outputer = '<i class="ua-icon icon-safari"></i>&nbsp;&nbsp;Safari';
    } else{
        $outputer = '<i class="ua-icon icon-chrome"></i>&nbsp;&nbsp;Google Chrome';
    }
    echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
    $os = false;

    if (preg_match('/win/i', $agent)) {
        if (preg_match('/nt 6.0/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"></i>&nbsp;&nbsp;Windows Vista&nbsp;/&nbsp;';
        } else if (preg_match('/nt 6.1/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win1"></i>&nbsp;&nbsp;Windows 7&nbsp;/&nbsp;';
        } else if (preg_match('/nt 6.2/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 8&nbsp;/&nbsp;';
        } else if(preg_match('/nt 6.3/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class= "ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 8.1&nbsp;/&nbsp;';
        } else if(preg_match('/nt 5.1/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win1"></i>&nbsp;&nbsp;Windows XP&nbsp;/&nbsp;';
        } else if (preg_match('/nt 10.0/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows 10&nbsp;/&nbsp;';
        } else{
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win2"></i>&nbsp;&nbsp;Windows X64&nbsp;/&nbsp;';
        }
    } else if (preg_match('/android/i', $agent)) {
    if (preg_match('/android 9/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android Pie&nbsp;/&nbsp;';
        }
    else if (preg_match('/android 8/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android Oreo&nbsp;/&nbsp;';
        }
    else{
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';
    }
    }
    else if (preg_match('/ubuntu/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-ubuntu"></i>&nbsp;&nbsp;Ubuntu&nbsp;/&nbsp;';
    } else if (preg_match('/linux/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class= "ua-icon icon-linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';
    } else if (preg_match('/iPhone/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-apple"></i>&nbsp;&nbsp;iPhone&nbsp;/&nbsp;';
    } else if (preg_match('/mac/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-mac"></i>&nbsp;&nbsp;MacOS&nbsp;/&nbsp;';
    }else if (preg_match('/fusion/i', $agent)) {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-android"></i>&nbsp;&nbsp;Android&nbsp;/&nbsp;';
    } else {
        $os = '&nbsp;&nbsp;<i class="ua-icon icon-linux"></i>&nbsp;&nbsp;Linux&nbsp;/&nbsp;';
    }
    echo $os;
}

最后在 handsome/component/comments.php 中找到合适位置添加以下代码:

<span class="comment-ua">
    <?php getOs($comments->agent); ?>
    <?php getBrowser($comments->agent); ?></span>

8. 响应耗时

效果:

将以下代码存放到主题的functions.php中,可以放在最后面:

/**
 * * 加载时间
 * * @return bool
 * */
function timer_start() {
    global $timestart;
    $mtime = explode( ' ', microtime()  );
    $timestart = $mtime[1] + $mtime[0];
    return true;

}
timer_start();
function timer_stop( $display = 0, $precision = 3  ) {
    global $timestart, $timeend;
    $mtime = explode( ' ', microtime()  );
    $timeend = $mtime[1] + $mtime[0];
    $timetotal = number_format( $timeend - $timestart, $precision  );
    $r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
    if ( $display  ) {
        echo $r;

    }
    return $r;

}

然后在右侧边栏加上响应耗时部分,具体就是修改component/sidebar.php这个文件,在合适的位置加上如下代码:

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

9. 3D标签云

效果:

插件地址:

将插件下载后放到usr/themes/handsome/plugins中,目录命名为ColorfulTags

后台开启该插件,进入插件配置页面,手动填写标签云容器的ID,正常情况下都是tag_cloud-2

注意,可能会出现标签云显示不正常,鼠标停到某一标签上而该标签会自动上浮的bug

修改usr/themes/handsome/assets/css/handsome.css,在117行附近找到.standpage,aside,aside *,将aside *注释掉即可。

10. 文章底部版权提示

打开usr/themes/handsome/post.php,在94行附近加上如下代码:

<!--版权说明-->
<blockquote class="content-copyright" style="margin-top:50px;background-color:rgba(255,255,255,0.7);border-left:5px solid #f07a9b96!important;">
    <p>
        <b>版权声明</b>:若文中无特殊说明,则本文为原创文章,版权归 <a href="https://laihaodong.cn/" target="_blank">Syndicate</a> 所有。
    </p>
    <p>
        <b>本文链接</b>:<a href="<?php $this->permalink()  ?>"><?php $this->permalink() ?></a>
    </p>
    <p>
        所有原创文章采用 <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a> 进行许可。
        <br>
        您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
    </p>
</blockquote>

11. 添加复制弹窗

首先在官网下载layer文件包,解压并将layer整个文件夹(不要拆分结构)存放到你项目的任意目录,然后在footer.php中引用layer文件夹下的layer.js

然后在handsome后台设置的开发者设置 > 自定义Javascript中填入下面的代码:

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

12. 仿Github的Markdown样式

首先下载CSS:

将其放在 usr/themes/handsome/assets/css/ 下。

然后打开 usr/themes/handsome/component/header.php,在第56行附近引用该css:

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/github-markdown-css-for-blog.css" type="text/css">

最后打开usr/themes/handsome/post.php,在91行附近为该div元素加上markdown-body属性:

警告,如果同时使用了Code Prettify的代码块美化插件,有可能css会产生冲突,如果发现代码块样式显示不正常,建议删除这个github-markdown-css-for-blog.css中的code标记以及pre标记相关部分

13. 扩展更丰富的图标

首先下载整个项目:

将其解压放在网站目录下,然后打开usr/themes/handsome/component/header.php,引用其中的css/all.min.css

<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>fontawesome-free-5.11.2-web/css/all.min.css" type="text/css">

然后就可以愉快的使用官网上提供的图标了。

Last modification:December 7th, 2019 at 12:27 pm