本博客基于Handsome主题的一些修改教程

Author： Helo
发布时间：February 16, 2019
9876views
2 comments
10738 words
Categories：资源分享

说明：本博客使用的是handsome主题，外观很好看，功能也是十分的强大，值得推荐！而博主基于原主题做了下小小的修改，使其更加好看、更特别。

1、首页文章版式圆角化

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

/*首页文章版式圆角化*/
.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。

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(17, 150, 196, 0.35);
}

4、首页文章a标签颜色渐变

忘记在哪找的代码了，好像没啥用。。。将以下代码添加至后台主题设置自定义CSS。

/*首页文章a标签颜色渐变*/
.index-post-title a:hover{
     color:rgba(107, 209, 255, 1);
     transition:color 0.2s linear
}

5、显示评论者的系统信息及浏览器UA标识

步骤一

添加下方的代码到functions.php文件末尾

/** 获取浏览器信息 */
function getBrowser($agent)
{ $outputer = false;
    if (preg_match('/MSIE\s([^\s|;]+)/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> IE浏览器';
    } else if (preg_match('/FireFox\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-firefox"></i> 火狐浏览器';
    } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-maxcdn"></i> 傲游浏览器';
    } else if (preg_match('#SE 2([a-zA-Z0-9.]+)#i', $agent)) {
        $outputer = '<i class="fa fa-scribd"></i> 搜狗浏览器';
    } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 360浏览器';
    } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-edge"></i> Edge';
    } else if (preg_match('/EdgiOS([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-edge"></i> Edge';
    } else if (preg_match('/UC/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> UC浏览器 ';
    }else if (preg_match('/OPR/i', $agent)) {
        $outputer = '<i class="fa fa-opera"></i> 欧朋浏览器';
    } else if (preg_match('/MicroMesseng/i', $agent)) {
        $outputer = '<i class="fa fa-weixin"></i> 微信内嵌浏览器';
    }  else if (preg_match('/WeiBo/i', $agent)) {
        $outputer = '<i class="fa fa-weibo"></i> 微博内嵌浏览器';
    }  else if (preg_match('/QQ/i', $agent)||preg_match('/QQBrowser\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-qq"></i> QQ浏览器';
    } else if (preg_match('/MQBHD/i', $agent)) {
        $outputer = '<i class="fa fa-qq"></i> QQ浏览器 ';
    } else if (preg_match('/BIDU/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 百度浏览器';
    } else if (preg_match('/LBBROWSER/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 猎豹浏览器';
    } else if (preg_match('/TheWorld/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 世界之窗浏览器';
    } else if (preg_match('/XiaoMi/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 小米浏览器';
    } else if (preg_match('/UBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> UC浏览器 ';
    } else if (preg_match('/mailapp/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> email内嵌浏览器';
    } else if (preg_match('/2345Explorer/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 2345浏览器';
    } else if (preg_match('/Sleipnir/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 神马浏览器';
    } else if (preg_match('/YaBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> Yandex浏览器';
    }  else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-opera"></i> Opera浏览器';
    } else if (preg_match('/MZBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 魅族浏览器';
    } else if (preg_match('/VivoBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-vimeo"></i> vivo浏览器';
    } else if (preg_match('/Quark/i', $agent)) {
        $outputer = '<i class="fa fa-quora"></i> 夸克浏览器';
    } else if (preg_match('/mixia/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 米侠浏览器';
    }else if (preg_match('/fusion/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 客户端';
    } else if (preg_match('/CoolMarket/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 基安内置浏览器';
    } else if (preg_match('/Thunder/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 迅雷内置浏览器';
    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-chrome"></i> Chrome ';
    } else if (preg_match('/safari\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-apple"></i> Safari';
    } else{
        return false;
    }
   return $outputer;
}
/** 获取操作系统信息 */
function getOs($agent)
{
    $os = false;

    if (preg_match('/win/i', $agent)) {
        if (preg_match('/nt 6.0/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows Vista';
        } else if (preg_match('/nt 6.1/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 7';
        } else if (preg_match('/nt 6.2/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 8';
        } else if(preg_match('/nt 6.3/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 8.1';
        } else if(preg_match('/nt 5.1/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows XP';
        } else if (preg_match('/nt 10.0/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 10';
        } else{
            $os = '<i class="fa fa-windows"></i> Windows';
        }
    } else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android P';
    }
else if (preg_match('/android 8/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android O';
    }
else if (preg_match('/android 7/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android N';
    }
else if (preg_match('/android 6/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android M';
    }
else if (preg_match('/android 5/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android L';
    }
else{
        $os = '<i class="fa fa-android"></i> Android';
}
    }
 else if (preg_match('/ubuntu/i', $agent)) {
        $os = '<i class="fa fa-linux"></i> Linux';
    } else if (preg_match('/linux/i', $agent)) {
        $os = '<i class="fa fa-linux"></i> Linux';
    } else if (preg_match('/iPhone/i', $agent)) {
        $os = '<i class="fa fa-apple"></i> iPhone';
    } else if (preg_match('/iPad/i', $agent)) {
        $os = '<i class="fa fa-apple"></i> iPad';
    } else if (preg_match('/mac/i', $agent)) {
        $os = '<i class="fa fa-OSX"></i> OSX';
    }else if (preg_match('/cros/i', $agent)) {
        $os = 'chrome os';
    }else {
 return false;
    }
   return $os;
}

步骤二

修改component目录下的comments.php
在
<?php echo $author; ?><?php echo $Identity; ?>
代码后添加

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

步骤三

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

/*评论区UA*/
.agent {
    display: inline-block;
    margin-left: 5px;
    padding: 0 3px;
    border-radius: 2px;
    color: #58666e;
    font-size: 12px;
    opacity: .8
}

步骤四

后台主题设置自定义输出head头部的HTML代码引入css文件

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

6、鼠标点击特效

将以下代码放在主题的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>

7、评论框特效

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

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

比如我把commentTyping.js放在网站根目录下，就是

<script type="text/javascript" src="https://www.doratree.com/commentTyping.js"></script>

8、评论表情修改

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

9、复制带版权信息

复制下面面的js代码到handsome/post.php文件末尾
可选择是否开启弹窗功能，想使用的话把注释符去掉就好了。
length > 42设置截取字符串长度

<script>
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)');
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
            + '作者：<?php $this->author() ?><br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：<?php $this->options->siteUrl(); ?><br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：<?php $this->author() ?>\n'
            + '链接：' + window.location.href + '\n'
            + '来源：<?php $this->options->siteUrl(); ?>\n\n'
            + window.getSelection().toString();

        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
</script>

以上就是本博客对Headsome主题的改动了。如果你觉得这个主题不错，可以联系作者购买Handsome主题。点击前往
以上内容大部分来源于Rat's Blog和憶の年的相关文章，博主对其进行了相应的整合和修改。

版权声明：本文为原创文章，版权归 Helo 所有。
本文链接：https://www.ishelo.com/archives/41/
商业转载请联系作者获得授权，非商业转载请注明出处。

Last modification：February 17th, 2019 at 12:09 am

If you think my article is useful to you, please feel free to appreciate

2 comments

骄傲的学生
October 10th, 2023 at 08:17 am

我发现你和咸鱼的博客样式是一样的，我就知道不简单

Reply
老秦
April 24th, 2020 at 11:34 pm

很棒啊

Reply

本博客基于Handsome主题的一些修改教程

Helo • 2019 年 02 月 16 日

说明：本博客使用的是handsome主题，外观很好看，功能也是十分的强大，值得推荐！而博主基于原主题做了下小小的修改，使其更加好看、更特别。

1、首页文章版式圆角化

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

/*首页文章版式圆角化*/
.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。

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(17, 150, 196, 0.35);
}

4、首页文章a标签颜色渐变

忘记在哪找的代码了，好像没啥用。。。将以下代码添加至后台主题设置自定义CSS。

/*首页文章a标签颜色渐变*/
.index-post-title a:hover{
     color:rgba(107, 209, 255, 1);
     transition:color 0.2s linear
}

5、显示评论者的系统信息及浏览器UA标识

步骤一

添加下方的代码到functions.php文件末尾

/** 获取浏览器信息 */
function getBrowser($agent)
{ $outputer = false;
    if (preg_match('/MSIE\s([^\s|;]+)/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> IE浏览器';
    } else if (preg_match('/FireFox\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-firefox"></i> 火狐浏览器';
    } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-maxcdn"></i> 傲游浏览器';
    } else if (preg_match('#SE 2([a-zA-Z0-9.]+)#i', $agent)) {
        $outputer = '<i class="fa fa-scribd"></i> 搜狗浏览器';
    } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 360浏览器';
    } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-edge"></i> Edge';
    } else if (preg_match('/EdgiOS([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-edge"></i> Edge';
    } else if (preg_match('/UC/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> UC浏览器 ';
    }else if (preg_match('/OPR/i', $agent)) {
        $outputer = '<i class="fa fa-opera"></i> 欧朋浏览器';
    } else if (preg_match('/MicroMesseng/i', $agent)) {
        $outputer = '<i class="fa fa-weixin"></i> 微信内嵌浏览器';
    }  else if (preg_match('/WeiBo/i', $agent)) {
        $outputer = '<i class="fa fa-weibo"></i> 微博内嵌浏览器';
    }  else if (preg_match('/QQ/i', $agent)||preg_match('/QQBrowser\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-qq"></i> QQ浏览器';
    } else if (preg_match('/MQBHD/i', $agent)) {
        $outputer = '<i class="fa fa-qq"></i> QQ浏览器 ';
    } else if (preg_match('/BIDU/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 百度浏览器';
    } else if (preg_match('/LBBROWSER/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 猎豹浏览器';
    } else if (preg_match('/TheWorld/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 世界之窗浏览器';
    } else if (preg_match('/XiaoMi/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 小米浏览器';
    } else if (preg_match('/UBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> UC浏览器 ';
    } else if (preg_match('/mailapp/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> email内嵌浏览器';
    } else if (preg_match('/2345Explorer/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 2345浏览器';
    } else if (preg_match('/Sleipnir/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 神马浏览器';
    } else if (preg_match('/YaBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> Yandex浏览器';
    }  else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-opera"></i> Opera浏览器';
    } else if (preg_match('/MZBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 魅族浏览器';
    } else if (preg_match('/VivoBrowser/i', $agent)) {
        $outputer = '<i class="fa fa-vimeo"></i> vivo浏览器';
    } else if (preg_match('/Quark/i', $agent)) {
        $outputer = '<i class="fa fa-quora"></i> 夸克浏览器';
    } else if (preg_match('/mixia/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 米侠浏览器';
    }else if (preg_match('/fusion/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 客户端';
    } else if (preg_match('/CoolMarket/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 基安内置浏览器';
    } else if (preg_match('/Thunder/i', $agent)) {
        $outputer = '<i class="fa fa-internet-explorer"></i> 迅雷内置浏览器';
    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-chrome"></i> Chrome ';
    } else if (preg_match('/safari\/([^\s]+)/i', $agent)) {
        $outputer = '<i class="fa fa-apple"></i> Safari';
    } else{
        return false;
    }
   return $outputer;
}
/** 获取操作系统信息 */
function getOs($agent)
{
    $os = false;

    if (preg_match('/win/i', $agent)) {
        if (preg_match('/nt 6.0/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows Vista';
        } else if (preg_match('/nt 6.1/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 7';
        } else if (preg_match('/nt 6.2/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 8';
        } else if(preg_match('/nt 6.3/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 8.1';
        } else if(preg_match('/nt 5.1/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows XP';
        } else if (preg_match('/nt 10.0/i', $agent)) {
            $os = '<i class="fa fa-windows"></i> Windows 10';
        } else{
            $os = '<i class="fa fa-windows"></i> Windows';
        }
    } else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android P';
    }
else if (preg_match('/android 8/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android O';
    }
else if (preg_match('/android 7/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android N';
    }
else if (preg_match('/android 6/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android M';
    }
else if (preg_match('/android 5/i', $agent)) {
        $os = '<i class="fa fa-android"></i> Android L';
    }
else{
        $os = '<i class="fa fa-android"></i> Android';
}
    }
 else if (preg_match('/ubuntu/i', $agent)) {
        $os = '<i class="fa fa-linux"></i> Linux';
    } else if (preg_match('/linux/i', $agent)) {
        $os = '<i class="fa fa-linux"></i> Linux';
    } else if (preg_match('/iPhone/i', $agent)) {
        $os = '<i class="fa fa-apple"></i> iPhone';
    } else if (preg_match('/iPad/i', $agent)) {
        $os = '<i class="fa fa-apple"></i> iPad';
    } else if (preg_match('/mac/i', $agent)) {
        $os = '<i class="fa fa-OSX"></i> OSX';
    }else if (preg_match('/cros/i', $agent)) {
        $os = 'chrome os';
    }else {
 return false;
    }
   return $os;
}

步骤二

修改component目录下的comments.php
在
<?php echo $author; ?><?php echo $Identity; ?>
代码后添加

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

步骤三

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

/*评论区UA*/
.agent {
    display: inline-block;
    margin-left: 5px;
    padding: 0 3px;
    border-radius: 2px;
    color: #58666e;
    font-size: 12px;
    opacity: .8
}

步骤四

后台主题设置自定义输出head头部的HTML代码引入css文件

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

6、鼠标点击特效

将以下代码放在主题的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>

7、评论框特效

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

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

比如我把commentTyping.js放在网站根目录下，就是

<script type="text/javascript" src="https://www.doratree.com/commentTyping.js"></script>

8、评论表情修改

9、复制带版权信息

复制下面面的js代码到handsome/post.php文件末尾
可选择是否开启弹窗功能，想使用的话把注释符去掉就好了。
length > 42设置截取字符串长度

<script>
document.body.addEventListener('copy', function (e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        // alert('商业转载请联系作者获得授权，非商业转载请注明出处哦~\n谢谢合作~(｡・`ω´･)');
    }
}); 
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();
        var htmlData = ''
            + '著作权归作者所有。<br>'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
            + '作者：<?php $this->author() ?><br>'
            + '链接：' + window.location.href + '<br>'
            + '来源：<?php $this->options->siteUrl(); ?><br><br>'
            + window.getSelection().toString();
        var textData = ''
            + '著作权归作者所有。\n'
            + '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
            + '作者：<?php $this->author() ?>\n'
            + '链接：' + window.location.href + '\n'
            + '来源：<?php $this->options->siteUrl(); ?>\n\n'
            + window.getSelection().toString();

        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain',textData);
    }
}
</script>

版权声明：本文为原创文章，版权归 Helo 所有。
本文链接：https://www.ishelo.com/archives/41/
商业转载请联系作者获得授权，非商业转载请注明出处。

1、首页文章版式圆角化

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

3、首页头像转动并放大

4、首页文章版式阴影化

4、首页文章a标签颜色渐变

5、显示评论者的系统信息及浏览器UA标识

步骤一

步骤二

步骤三

步骤四

6、鼠标点击特效

7、评论框特效

8、评论表情修改

9、复制带版权信息

2 comments