强仔
@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 = 'Internet Explore'; } else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Firefox/', $regs[0]); $FireFox_vern = explode('.', $str1[1]); $outputer = 'FireFox'; } else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Maxthon/', $agent); $Maxthon_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) { $outputer = '360 Fast Browser'; } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Edge/', $regs[0]); $Edge_vern = explode('.', $str1[1]); $outputer = 'MicroSoft Edge'; } else if (preg_match('/UC/i', $agent)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQ Browser\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $QQ_vern = explode('.', $str1[1]); $outputer = 'QQ Browser'; } else if (preg_match('/UBrowser/i', $agent, $regs)) { $str1 = explode('rowser/', $agent); $UCBrowser_vern = explode('.', $str1[1]); $outputer = 'UC Browser'; } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) { $outputer = 'Opera'; } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Chrome/', $agent); $chrome_vern = explode('.', $str1[1]); $outputer = 'Google Chrome'; } else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) { $str1 = explode('Version/', $agent); $safari_vern = explode('.', $str1[1]); $outputer = 'Safari'; } else{ $outputer = 'Google Chrome'; } 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 6.2/i', $agent)) { $os = 'Windows 8 · '; } else if(preg_match('/nt 6.3/i', $agent)) { $os = 'Windows 8.1 · '; } else if(preg_match('/nt 5.1/i', $agent)) { $os = 'Windows XP · '; } else if (preg_match('/nt 10.0/i', $agent)) { $os = 'Windows 10 · '; } else{ $os = 'Windows X64 · '; } } else if (preg_match('/android/i', $agent)) { if (preg_match('/android 9/i', $agent)) { $os = 'Android Pie · '; } else if (preg_match('/android 8/i', $agent)) { $os = 'Android Oreo · '; } else{ $os = 'Android · '; } } else if (preg_match('/ubuntu/i', $agent)) { $os = 'Ubuntu · '; } else if (preg_match('/linux/i', $agent)) { $os = 'Linux · '; } else if (preg_match('/iPhone/i', $agent)) { $os = 'iPhone · '; } else if (preg_match('/mac/i', $agent)) { $os = 'MacOS · '; }else if (preg_match('/fusion/i', $agent)) { $os = 'Android · '; } else { $os = 'Linux · '; } echo $os; }

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

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

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

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


代码食用

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

结语

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

下午4:50 · 2020年09月10日
182
0
13
宝贝留个言吧

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