MENU

博客添加新功能了!

March 28, 2019 • Read: 609 • 技术分享阅读设置

忙!!!

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

PC端.png

评论头像

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. 效果显示

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

PC端.png

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

3404854218.png

食用方法

这里以 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(头像和文字不在一行),不会修复,有能力的大神,看到后帮忙解决一下!
移动端.png

后续

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

Last Modified: April 27, 2019
Leave a Comment

32 Comments
  1. 你好 你好

    还有啊,我的ua不显示图标……

    1. Ann Ann

      @你好先查看你的ua图标能不能访问,然后看看你引用的对不对

    2. 你好 你好

      @Ann能显示了,现在就是头像和昵称不再同一行这个问题没解决

    3. 你好 你好

      @Ann能显示了,现在就是头像和昵称不再同一行这个问题没解决

    4. Ann Ann

      @你好就是span标签 位置不对,我刚开始也是这样

  2. 你好 你好

    斗胆问一句,头像和昵称不在同一行的bug怎么解决哇?

    1. Ann Ann

      @你好看看你的span标签对不对

    2. 你好 你好

      @Ann要怎么加?

    3. 你好 你好

      @Ann要不你把你comments.php发给我看一看呀,我跟你同一主题~嘻嘻

    4. 你好 你好

      @Ann那这个标签应该放哪里?

    5. Ann Ann

      @你好你看一下详细的教程

    6. Ann Ann

      @你好好没问题,明天你提醒我一下子,我健忘

    7. Ann Ann

      @你好已经发到你的邮箱中。

    8. Ann Ann

      @你好已经发到你的邮箱中。

  3. 你好 你好

    ……

  4. 求你这个邮件模板,真好看

    1. Ann Ann

      @酱酱已经发送到你的邮箱,由于手机操作限制。发过去的是html代码,如有不懂可以问我!

  5. wp的吗

    1. Ann Ann

      @夏木这是ty的

  6. HE HE

    我这是上镜了