Typecho Handsome主题添加评论者浏览器标识

这里以Handsome主题为例，其他的主题请自行调整一下。

之前也发布过一个《Typecho 博客评论显示 UserAgent (UA)》的教程，基本差不多，这里没有用到下载图标，而是直接应用bootcss的矢量。

教程

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

/** 获取浏览器信息 */
function getBrowser($agent)
{ $outputer = false;
    if (preg_match('/MSIE\s([^\s|;]+)/i', $agent)) {
        $outputer = '<i></i> IE浏览器';
    } else if (preg_match('/FireFox\/([^\s]+)/i', $agent)) {
        $outputer = '<i></i> 火狐浏览器';
    } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i></i> 傲游浏览器';
    } else if (preg_match('#SE 2([a-zA-Z0-9.]+)#i', $agent)) {
        $outputer = '<i></i> 搜狗浏览器';
    } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent)) {
        $outputer = '<i></i> 360浏览器';
    } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i></i> Edge';
    } else if (preg_match('/EdgiOS([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i></i> Edge';
    } else if (preg_match('/UC/i', $agent)) {
        $outputer = '<i></i> UC浏览器 ';
    }else if (preg_match('/OPR/i', $agent)) {
        $outputer = '<i></i> 欧朋浏览器';
    } else if (preg_match('/MicroMesseng/i', $agent)) {
        $outputer = '<i></i> 微信内嵌浏览器';
    }  else if (preg_match('/WeiBo/i', $agent)) {
        $outputer = '<i></i> 微博内嵌浏览器';
    }  else if (preg_match('/QQ/i', $agent)||preg_match('/QQBrowser\/([^\s]+)/i', $agent)) {
        $outputer = '<i></i> QQ浏览器';
    } else if (preg_match('/MQBHD/i', $agent)) {
        $outputer = '<i></i> QQ浏览器 ';
    } else if (preg_match('/BIDU/i', $agent)) {
        $outputer = '<i></i> 百度浏览器';
    } else if (preg_match('/LBBROWSER/i', $agent)) {
        $outputer = '<i></i> 猎豹浏览器';
    } else if (preg_match('/TheWorld/i', $agent)) {
        $outputer = '<i></i> 世界之窗浏览器';
    } else if (preg_match('/XiaoMi/i', $agent)) {
        $outputer = '<i></i> 小米浏览器';
    } else if (preg_match('/UBrowser/i', $agent)) {
        $outputer = '<i></i> UC浏览器 ';
    } else if (preg_match('/mailapp/i', $agent)) {
        $outputer = '<i></i> email内嵌浏览器';
    } else if (preg_match('/2345Explorer/i', $agent)) {
        $outputer = '<i></i> 2345浏览器';
    } else if (preg_match('/Sleipnir/i', $agent)) {
        $outputer = '<i></i> 神马浏览器';
    } else if (preg_match('/YaBrowser/i', $agent)) {
        $outputer = '<i></i> Yandex浏览器';
    }  else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent)) {
        $outputer = '<i></i> Opera浏览器';
    } else if (preg_match('/MZBrowser/i', $agent)) {
        $outputer = '<i></i> 魅族浏览器';
    } else if (preg_match('/VivoBrowser/i', $agent)) {
        $outputer = '<i></i> vivo浏览器';
    } else if (preg_match('/Quark/i', $agent)) {
        $outputer = '<i></i> 夸克浏览器';
    } else if (preg_match('/mixia/i', $agent)) {
        $outputer = '<i></i> 米侠浏览器';
    }else if (preg_match('/fusion/i', $agent)) {
        $outputer = '<i></i> 客户端';
    } else if (preg_match('/CoolMarket/i', $agent)) {
        $outputer = '<i></i> 基安内置浏览器';
    } else if (preg_match('/Thunder/i', $agent)) {
        $outputer = '<i></i> 迅雷内置浏览器';
    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent)) {
        $outputer = '<i></i> Chrome ';
    } else if (preg_match('/safari\/([^\s]+)/i', $agent)) {
        $outputer = '<i></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></i> Windows Vista';
        } else if (preg_match('/nt 6.1/i', $agent)) {
            $os = '<i></i> Windows 7';
        } else if (preg_match('/nt 6.2/i', $agent)) {
            $os = '<i></i> Windows 8';
        } else if(preg_match('/nt 6.3/i', $agent)) {
            $os = '<i></i> Windows 8.1';
        } else if(preg_match('/nt 5.1/i', $agent)) {
            $os = '<i></i> Windows XP';
        } else if (preg_match('/nt 10.0/i', $agent)) {
            $os = '<i></i> Windows 10';
        } else{
            $os = '<i></i> Windows';
        }
    } else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
        $os = '<i></i> Android P';
    }
else if (preg_match('/android 8/i', $agent)) {
        $os = '<i></i> Android O';
    }
else if (preg_match('/android 7/i', $agent)) {
        $os = '<i></i> Android N';
    }
else if (preg_match('/android 6/i', $agent)) {
        $os = '<i></i> Android M';
    }
else if (preg_match('/android 5/i', $agent)) {
        $os = '<i></i> Android L';
    }
else{
        $os = '<i></i> Android';
}
    }
 else if (preg_match('/ubuntu/i', $agent)) {
        $os = '<i></i> Linux';
    } else if (preg_match('/linux/i', $agent)) {
        $os = '<i></i> Linux';
    } else if (preg_match('/iPhone/i', $agent)) {
        $os = '<i></i> iPhone';
    } else if (preg_match('/iPad/i', $agent)) {
        $os = '<i></i> iPad';
    } else if (preg_match('/mac/i', $agent)) {
        $os = '<i></i> OSX';
    }else if (preg_match('/cros/i', $agent)) {
        $os = 'chrome os';
    }else {
 return false;
    }
   return $os;
}

然后修改 component 目录下的 comments.php 文件

<span class="comment-author vcard"><b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?></span>

在以上代码的后面添加：

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

然后在主题设置自定义css添加

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

最后在 head 头部引入 css 文件

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