强仔
@qiangzai

今天下午又弄了一个美化的功能,自我感觉还不错,Typecho评论美化,能显示评论者的设备和浏览器信息,挺简单的直接分享给你们,根据各位博主的兴趣自行研究吧,下面有效果。

效果截图

  • 未美化修改

  • 美化修改后

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

文字教程

这里以强仔博客的系统演示,将下面这段 css 全部加入到主题style.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.jsdelivr.net/gh/52qiangzai/cdn/icon/360.png)}.icon-android{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/android.png);height:19px}.icon-apple{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/apple.png)}.icon-baidu{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/baidu.png)}.icon-chrome{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/chrome.png)}.icon-edge{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/edge.png)}.icon-firefox{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/firefox.png)}.icon-google{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/google.png)}.icon-ie{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/ie.png)}.icon-liebao{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/liebao.png)}.icon-linux{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/linux.png)}.icon-mac{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/mac.png)}.icon-opera{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/opera.png)}.icon-qq{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/qq.png)}.icon-quark{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/quark.png)}.icon-safari{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/safari.png)}.icon-ubuntu{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/ubuntu.png)}.icon-uc{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/uc.png)}.icon-win1{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/win1.png)}.icon-win2{background-image:url(https://cdn.jsdelivr.net/gh/52qiangzai/cdn/icon/win2.png)}

找到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 = '  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;

}

将以下代码添加到comments.php中,具体是第几行我也不知道,这个根据你的主题,自行放在你认为美观的位置

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

最后强调一下, $this 报错或者显示一直同一个设备的话就换成 $comments

  • 大概看一下我的操作截图吧


代码食用

点我下载全部代码
如果感觉麻烦,可以直接下载插件 点我下载插件

结语

以上配置完成,如果只显示文字而不显示图片,这时间你需要清楚一下浏览器的缓存即可咯,如果还不行,就是你放的代码位置有问题,请你仔细阅读我的教程吧,不懂也可以留言问我。

本文文章字数为:362个

您阅读这篇文章共花了:

文章最后更新于:2020 年 10 月 24 日 08:29:39

当前IP为:3.236.156.34,请自觉遵守网络安全

END
下午4:50 · 2020年09月10日
401
1
13
宝贝留个言吧

    尤子     
    2个月前

    不愧是你

教程
Typecho评论页美化
今天下午又弄了一个美化的功能,自我感觉还不错,Typecho评论美化,能显示评论者的设备和浏览器信息,挺简单的直接分享给你们,根据各位博主的...
欢迎扫描二维码继续阅读
September 10, 2020
强仔博客
blogger
强仔
统计
文章:106 篇
分类:4 个
评论:313 条
加载耗时:25 ms
运行时长:1年141天
by yoniu.
强仔博客