MENU

Typecho博客评论显示UserAgent(UA)

March 7, 2019 • Read: 66054 • 网站优化

  • 本篇文章实现了为Typecho博客文章评论添加显示UserAgent(UA)的功能
  • 本功能可替代UserAgent插件,更美观、简洁且好看

一. 简介

由于想给博客加一个文章评论显示UserAgent功能,在网上搜寻并尝试了UserAgent插件,但是并不如意。一是因为他太过臃肿,虽然几乎可以识别市面上所有的OS和浏览器,但是我们常用的也就几个而已,大多数都用不到,二是图标太老旧了,而且清晰度很低,在博客上显得突兀且不美观。


于是我结合网上的代码,以及网上开源的图标的png格式重新安排了一个Comment-UA,支持主流操作系统以及浏览器(图标没找到匹配的就没整,不认识的浏览器通通视为Google Chrome ::quyin:1huaji:: ),目前图片全部放在又拍云存储,不用担心拖慢速度。

图标均来自开源图标icons8.cn以及 MBE Style图标包

二. 效果显示

  • 大概就是这样了,实际效果请看我的评论!
  • 目前可以识别的操作系统以及浏览器

食用方法

这里以handsome为例,其他主题操作方法类似(VOID配置看评论)。

首先

将下面这段css全部加入到 handsome/assets/css/handsome.min.css 末尾。
点击查看

也可后台加入自定义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中找到合适位置添加以下代码:

(Mirages在mirages/libs/comments.php)

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

如果修改完都显示Linux的话,需要将上面的$comments替换成$this即可,注意代码缩进

闭路电视可以结合消防和安防系统,为经营者、警察局提供专业数据解决问题,减少时间成本,提升办事效率。
修改完后刷新浏览器缓存,现在你的评论UA已经变得很漂亮啦! ::quyin:1huaji::

Leave a Comment

174 Comments
  1. 小彦 小彦     Windows 10 /    Google Chrome

    这套图标很不错,简约画笔风,有dowload link?

    1. 左岸 左岸     MacOS /    Google Chrome

      @小彦你好,有的,我马上打包发给你 ::quyin:1huaji::

    2. 左岸 左岸     MacOS /    Google Chrome
    3. 小彦 小彦     Android Oreo /    Google Chrome

      @左岸感谢博主先生! ::quyin:laughing::

    4. 左岸 左岸     MacOS /    Google Chrome

      @小彦不客气OωO,话说,能不能把我从小黑屋拉出来先 ::quyin:angry::

    5. 小彦 小彦     Android Oreo /    Google Chrome

      @左岸好!不过我好像没查到你被拦截了,|´・ω・)ノ你是被报告判成机器人么??

    6. 小彦 小彦     Android Oreo /    Google Chrome

      @小彦原来你的网站被禁用了,奇怪,我没做这种操作哦!现在已经恢复,不好意思啊。。。

    7. 左岸 左岸     MacOS /    Google Chrome

      @小彦现在好啦!nice ::quyin:OK::

    8. 左岸 左岸     MacOS /    Google Chrome

      @小彦没事没事(๑•̀ㅁ•́ฅ)

  2. 刘大喵 刘大喵     Windows 10 /    FireFox

    ::quyin:1huaji:: 图标很好看 ,拿走了

    1. 左岸 左岸     MacOS /    Google Chrome

      @刘大喵拿好|´・ω・)ノ

    2. 刘大喵 刘大喵     Linux /    Google Chrome

      @左岸ヾ(´・ ・`。)ノ" 这个回复没有收到邮件通知呢

    3. 左岸 左岸     MacOS /    Google Chrome

      @刘大喵那个,,可能在垃圾箱 ::quyin:die::

    4. 左岸 左岸     MacOS /    Google Chrome

      @刘大喵你看看现在能收到不OωO

    5. 刘大喵 刘大喵     Windows 10 /    FireFox

      @左岸|´・ω・)ノ这个收到了 。也检查了垃圾箱 并没有

    6. 左岸 左岸     MacOS /    Google Chrome

      @刘大喵哈哈,这是我的错误 ::aru:cryingface:: ,刚才在个站商店 看到你了哎 ::aru:insidious::

    7. 刘大喵 刘大喵     Windows 10 /    FireFox

      @左岸 ::aru:meditation:: 我也发现了

    8. 刘大喵 刘大喵     Windows 10 /    FireFox

      @左岸(ノ°ο°)ノ 安装步骤弄好了 , 图标不显示啊,是不是css问题

    9. 左岸 左岸     MacOS /    Google Chrome

      @刘大喵你再看看,或者刷新下缓存,我这里看着你那里是显示的OωO

    10. 刘大喵 刘大喵     Windows 10 /    FireFox

      @左岸→_→对的,好了

    11. 刘大喵 刘大喵     Windows 10 /    FireFox

      @刘大喵 ::aru:shy:: 恳请大佬批本喵准转走这篇文章~

    12. 左岸 左岸     MacOS /    Google Chrome

      @刘大喵转吧OωO,注明出处就好~

    13. 薛定谔 薛定谔     Windows 10 /    Google Chrome

      @刘大喵Akina主题怎么弄

  3. Gazzz Gazzz     MacOS /    Safari
    1. 左岸 左岸     MacOS /    Google Chrome

      @Gazzz ::quyin:amazing::

    2. Gazzz Gazzz     Windows 10 /    Google Chrome

      @左岸诶。。。打的字居然消失了,是Safari下的bug吗。。。

    3. 左岸 左岸     MacOS /    Google Chrome

      @Gazzz你打的啥呀,我还奇怪怎么没有内容呢∠( ᐛ 」∠)_

    4. Gazzz Gazzz     Windows 10 /    Google Chrome

      @左岸哈哈哈 当时打的“アイコンが綺麗ですね~”

    5. 左岸 左岸     MacOS /    Google Chrome

      @Gazzz嘿嘿,“ありがとう~” ::aru:flower::

  4. 崔先森 崔先森     Android /    Google Chrome

    图标挺好看的

    1. 左岸 左岸     Android Pie /    Google Chrome

      @崔先森嘿嘿,找了很久的 ::aru:shy::

  5. yamadie yamadie     iPhone /    QQ浏览器

    学习了

    1. 左岸 左岸     Android Pie /    Google Chrome

      @yamadie互相学习 ::quyin:OK::

  6. 萌萌 萌萌     Linux /    Google Chrome

    大赞,可以考虑整合到handsome
    ヾ(≧∇≦*)ゝ

    1. 左岸 左岸     MacOS /    Google Chrome

      @萌萌哈哈谢谢,有人用我开心了OωO

  7. かえで かえで     Windows 10 /    Google Chrome

    このPHPプラグインは独立して存在することができますか? ::twemoji:shy::

    1. 左岸 左岸     MacOS /    Google Chrome

      @かえでこんにちは、この小さな機能開発のためのプラグインはありません。 ::quyin:1huaji::

    2. Mr.Chou Mr.Chou     Android Pie /    Google Chrome

      @左岸what?这是什么对话?

    3. 左岸 左岸     MacOS /    Google Chrome

      @Mr.Chou哈哈,应该是个日本人,他问我有没有为此功能开发独立的插件,我说没有 ::aru:unhappy::