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

一、简介

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

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

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

二、效果显示

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

Typecho 博客评论显示 UserAgent (UA)

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

Typecho 博客评论显示 UserAgent (UA)

三、食用方法

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

首先

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

.ua-icon{display:inline-block;width:1pc;height:1pc;background-size:cover;background-repeat:no-repeat;vertical-align:text-top}.icon-360{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/360.png)}.icon-android{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/android.png);height:19px}.icon-apple{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/apple.png)}.icon-baidu{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/baidu.png)}.icon-chrome{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/chrome.png)}.icon-edge{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/edge.png)}.icon-firefox{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/firefox.png)}.icon-google{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/google.png)}.icon-ie{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/ie.png)}.icon-liebao{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/liebao.png)}.icon-linux{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/linux.png)}.icon-mac{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/mac.png)}.icon-opera{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/opera.png)}.icon-qq{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/qq.png)}.icon-quark{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/quark.png)}.icon-safari{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/safari.png)}.icon-ubuntu{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/ubuntu.png)}.icon-uc{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/uc.png)}.icon-win1{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/win1.png)}.icon-win2{background-image:url(https://cdn.zrahh.com:4433/usr/uploads/2019/03/win2.png)}

也可后台加入自定义 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 已经变得很漂亮啦!

本文转载自左岸博客

最后修改:2020 年 10 月 08 日 11 : 40 PM
如果觉得我的文章对你有用,请随意赞赏