效果图

效果图
之前用了某位博主的ua图标,后来他网站关掉了,图标自然就没了,于是自己动手找了一套ua,还是很好看的!

食用方法

复制下面的代码放到functions.php的最后

/**
* 浏览器及操作系统判断
*
* @param string $agent 系统数据库中访者数据
*/

/** 获取浏览器信息 */
function getBrowser($agent)
{
    if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
        $outputer = 'Internet Explorer' . ' ' . $regs[1];
    } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
        $outputer = 'Mozilla FireFox' . ' ' . $regs[1];
    } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
        $outputer = 'Maxthon' . ' ' . $regs[2];
    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
        $outputer = 'Google Chrome' . ' ' . $regs[2];
    } else if (preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {
        $regg = explode("/",$regs[1]);
        $outputer = 'QQ浏览器' . ' ' . $regg[0];
    } else if (preg_match('/UC/i', $agent)) {
        $outputer = 'UCWeb' . ' ' . '8.11112510';
    } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
        $outputer = 'Apple Safari' . ' ' . $regs[1];
    } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
        $outputer = 'Opera' . ' ' . $regs[1];
    } else {
        $outputer = '其它浏览器';
    }

    echo $outputer;
}

/** 获取操作系统信息 */
function getOs($agent)
{
    $os = false;

    if (preg_match('/win/i', $agent)) {
        if (preg_match('/nt 6.0/i', $agent)) {
            $os = 'Windows Vista';
        } else if (preg_match('/nt 6.1/i', $agent)) {
            $os = 'Windows 7';
        } else if (preg_match('/nt 5.1/i', $agent)) {
            $os = 'Windows XP';
        } else if (preg_match('/nt 5/i', $agent)) {
            $os = 'Windows 2000';
        } else {
            $os = 'Windows';
        }
    } else if (preg_match('/android/i', $agent)) {
        $os = 'Android';
    } else if (preg_match('/ubuntu/i', $agent)) {
        $os = 'Ubuntu';
    } else if (preg_match('/linux/i', $agent)) {
        $os = 'Linux';
    } else if (preg_match('/mac/i', $agent)) {
        $os = 'Mac OS X';
    } else if (preg_match('/unix/i', $agent)) {
        $os = 'Unix';
    } else if (preg_match('/symbian/i', $agent)) {
        $os = 'Nokia SymbianOS';
    } else {
        $os = '其它操作系统';
    }

    echo $os;
}

然后在component目录下的comments.php,在下图所示位置插入下列代码!
comments.php

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

最后在设置外观-自定义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.wudao6.cn/images/360.png)}.icon-android{background-image:url(https://cdn.wudao6.cn/images/android.png);height:19px}.icon-apple{background-image:url(https://cdn.wudao6.cn/images/apple.png)}.icon-baidu{background-image:url(https://cdn.wudao6.cn/images/baidu.png)}.icon-chrome{background-image:url(https://cdn.wudao6.cn/images/chrome.png)}.icon-edge{background-image:url(https://cdn.wudao6.cn/images/edge.png)}.icon-firefox{background-image:url(https://cdn.wudao6.cn/images/firefox.png)}.icon-google{background-image:url(https://cdn.wudao6.cn/images/google.png)}.icon-ie{background-image:url(https://cdn.wudao6.cn/images/ie.png)}.icon-liebao{background-image:url(https://cdn.wudao6.cn/images/liebao.png)}.icon-linux{background-image:url(https://cdn.wudao6.cn/images/linux.png)}.icon-mac{background-image:url(https://cdn.wudao6.cn/images/mac.png)}.icon-opera{background-image:url(https://cdn.wudao6.cn/images/opera.png)}.icon-qq{background-image:url(https://cdn.wudao6.cn/images/qq.png)}.icon-quark{background-image:url(https://cdn.wudao6.cn/images/quark.png)}.icon-safari{background-image:url(https://cdn.wudao6.cn/images/safari.png)}.icon-ubuntu{background-image:url(https://cdn.wudao6.cn/images/ubuntu.png)}.icon-uc{background-image:url(https://cdn.wudao6.cn/images/uc.png)}.icon-win1{background-image:url(https://cdn.wudao6.cn/images/win1.png)}.icon-win2{background-image:url(https://cdn.wudao6.cn/images/win2.png)}

有问题评论区留言

最后修改:2021 年 06 月 03 日 03 : 42 PM
如果觉得我的文章对你有用,请随意赞赏
END
本文作者:
文章标题:Typecho评论美化版ua
本文地址:https://blog.wudao6.cn/css-code/19.html
版权说明:若无注明,本文皆 逆向实验室原创,转载请保留文章出处。