博客添加新功能了！

忙!!!

哇！这周工作真的很忙都没时间打理博客,更别说更文章了。不过今天还好缓了缓,有时间折腾一下博客(手动滑稽) 今天早上把评论做了一些修改和添加功能,第一是评论头像换成QQ头像,第二是为博客文章评论添加显示 UserAgent（UA）的功能。

评论头像

1.默认的Gravatar是在是太难看了，而且还会经常宕机，所以网上最常用的方法是用QQ头像替换默认的gravatar头像。于是我在网上苦苦搜索了好几天，终于找到了适合的方法，现在记录一下代码。

<span itemprop="image"><?php $number=$comments->mail; echo '<img src="https://q2.qlogo.cn/headimg_dl? bs='.$number.'&dst_uin='.$number.'&dst_uin='.$number.'&;dst_uin='.$number.'&spec=100&url_enc=0&referer=bu_interface&term_type=PC" width="46px" height="46px" style="border-radius: 50%;">'; ?></span>

用以上代码替换comment.php里面默认的gravatar代码即可。

显示UA

1.本功能可替代 UserAgent 插件，更美观、简洁且好看,每次去别人的博客做评论,感觉显示UA好好看,于是我就想给我也装一个,搜到了@左岸老哥的教程,很快实现了UA功能

2. 效果显示

大概就是这样了，实际效果请看我的评论！

目前可以识别的操作系统以及浏览器

食用方法

这里以 handsome 为例，其他主题操作方法类似

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

点击查看

然后找到 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中找到合适位置添加以下代码 (部分模板需要将comments替换成this，注意缩进)：

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

现在你的评论 UA 已经变得很漂亮啦！

BUG

评论区已帮助解决,再次谢谢左岸!
不过移动端有个bug(头像和文字不在一行),不会修复,有能力的大神,看到后帮忙解决一下！

后续

这几天有时间我想办法把评论添加个表情,不然每次都要(手动滑稽)