HandSome最全修改、美化教程，注意事项在下面都有标注。

1.首页文章版式半圆

本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义 CSS

#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

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

2.首页文章图片获取焦点放大

本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。将以下代码添加至后台主题设置 自定义 CSS。

#放大的时间和大小自行修改以下数值(别复制该行)
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

3.首页头像转动并放大

本项修改的是首页头像，将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义 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
}

4.首页头像放大并自动旋转

本项修改的是首页头像，效果就是将首页头像放大，并使其自动旋转。将以下代码添加至后台主题设置 自定义 CSS。

#旋转速度请修改3s数值(别复制该行)
/*首页头像放大并自动旋转*/
.thumb-lg{
    width:130px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}

5.文章标题居中

本项修改的是文章标题，使其居中。将以下代码添加至后台主题设置 自定义 CSS。

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

6.首页文章版式阴影化

本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义 CSS。

#阴影颜色修改rgba后面的值(别复制该行)
/*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);
}

7.自定义滚动条滑块

本项修改针对浏览器最右边的滚动条滑块，使其改变样式。将以下代码添加至后台主题设置 自定义 CSS。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

8.评论表情修改

本项修改评论表情，将原始表情替换成泡泡和阿鲁，只需要替换主题文件里的 OwO.min.js和 OwO.json文件就可以了。文件下载：HS_OwO.zip。OwO.min.js在 handsome/assets/js/features文件夹，OwO.json在 handsome/usr文件夹。

9.鼠标点击特效

将以下代码放在主题的 handsome/component/footer.php中的 </body>之前即可。

#字体自行修改
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

10.评论框特效

下载特效 JS文件：commentTyping.js，将其放在网站目录某个地方，然后编辑主题文件 handsome/component/footer.php，在 </body>后面添加以下代码。

<script type="text/javascript" src="(JS文件路径)"></script>

11.Mac风格代码高亮

插件最新更新时间：2020/07/23
handsome.min.css更新时间：2020/08/13
插件下载：未来的我们

  • 下载本插件，解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件（请勿与其它同类插件同时启用，以免互相影响）
  • 设置：选择主题风格，是否显示行号等
  • 修改（替换）/usr/themes/handsome/assets/css/下的handsome.min.css文件
  • 由于Handsome主题最新加入授权，旧版本必须更新至最新版，所以这里就不提供旧版
  • 后台 --> 设置外观 --> 主题增强-->关闭启用主题内置的代码高亮（支持19种常用语言）

handsome.min.css 7.X.X 版本：未来的我们

  • 如果你的网站有开启Pjax（Handsome主题默认开启），把以下代码添加到回调函数的地方，以Handsome为例，打开后台设置-->Pjax-->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);}
  • 若插件里设置不显示行号，pjax函数要改为
if (typeof Prism !== 'undefined') {
Prism.highlightAll(true,null);}
  • 用法（删除下方代码中的\）
\```php(语言类型选填)
<?php echo 'Hello Alvin!'; ?>
\```
删除上边代码中的\

12.底部页脚标签样式

页脚标签样式

  • 将以下代码添加至后台主题设置自定义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 Alvin">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Alvin</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 18135867号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">18135867号</span>
</a>
</div>
  • 将以下代码添加至后台主题设置博客底部右侧信息
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
 |  
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题，作者：友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</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 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>
      <!--可以去除主题版权信息，最好保留版权信息或者添加主题信息到友链，谢谢你的理解-->

13.给网站添加crisp在线客服插件

crisp在线客服插件

  • 注册crisp账户并添加网站：未来
  • 注册完成后，点击设置-网站设置-显示整合-HTML，复制代码添加至后台主题设置自定义输出head 头部的HTML代码即可

14.滑稽表情包

滑稽表情包

  • 复制owo.json到handsome/usr/
  • 复制paopao文件夹到handsome/assets/img/emotion/
  • 清除一下游览器缓存，然后刷新即可

XcnteOWO表情包：未来

15.炫彩鼠标插件

炫彩鼠标插件

  • 下载本插件，解压放到usr/plugins/目录中
  • 登录管理后台，激活并设置插件

HoerMouse：未来

16.评论获取用户信息插件

评论获取用户信息插件

  • 下载本插件，解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件
  • 此插件只适用于Handsome主题，未对其它主题优化！！！
  • 修改component/comments.php文件，大概第60~80行处添加代码
<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>

修改前

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

Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在网站的根目录的 config.inc.php插入下面的代码：

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

UserAgent：未来

17.网站响应耗时(不支持6.0以上版本)

网站响应耗时

  • 将以下代码放到handsome/functions.php中，可以放在最后面
/**
 * 加载时间
 * 
 */
    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"> <i class="glyphicon glyphicon-flash text-muted"></i> <span class="badge
           pull-right"><?php echo timer_stop();?></span><?php _me("响应耗时") ?></li>

18.顶部导航天气(不支持7.0以上版本)

顶部导航天气

  • 将以下代码复制到component/headnav.php搜索提示下方即可，大概86行左右
<!--天气开始-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#ffffff",
    "uid": "xxxxxxxx",
    "hash": "xxxxxxxx"
});
tpwidget("show");</script>
<!--天气结束-->

19.魔性动态标题

魔性动态标题

  • 复制下方代码添加至后台主题设置自定义输出head 头部的HTML代码即可

    <!--动态标题-->
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つェ⊂)别离开,好么！ - Alvin Blog';}else{document.title=normal_title;}});</script>

20.文本框打字机特效

打字机特效

  • 复制下方代码添加至后台主题设置自定义输出body 尾部的HTML代码即可
<!--文本框打字机特效-->
<script type="text/javascript" src="https://www.mgxfd.club/usr/themes/handsome/assets/js/commentTyping.js"></script>

21.博主介绍闪字特效

动态字体特效

  • 复制下方代码添加至后台主题设置博主的介绍即可
  • 介绍文字请在代码中修改
<!--博主介绍的闪字特效-->
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "", o = ["Keep Fighting" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

22.复制弹框版权提醒

复制弹框版权提醒

  • 首先将下方代码复制添加至后台主题设置自定义输出head 头部的HTML代码
<!--复制弹框JS-->
<script src="https://www.mgxfd.club/layer/layer.js"></script>
  • 最后复制下方代码添加至后台主题设置自定义 JavaScript即可
<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};

23.评论邮件提醒功能

评论邮件提醒功能

  • 下载本插件，解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件

Smtp服务器地址：smtp.qq.com
Smtp端口：465
Smtp用户：你的邮箱账户
Smtp密码：开启Smtp时获取的授权码

Comment2Mail：未来

24.文章底部赞赏图标跳动

  • 将以下代码添加至后台主题设置自定义CSS
/*赞赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

25.给文章顶部添加判断百度是否收录

  • 将以下代码添加至handsome/functions.php
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

if(checkBaidu($url)==1)
{echo "百度已收录";
}
else
{echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录！\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
}
  • 将以下代码添加至handsome/post.php大约80行左右分类下方即可
<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i>&nbsp<?php echo baidu_record() ?></li>
最后修改：2020 年 09 月 14 日 04 : 00 PM
© 允许规范转载
别点我，千万别点我！