- 本篇文章实现了为Typecho博客文章评论添加显示UserAgent(UA)的功能
- 本功能可替代UserAgent插件,更美观、简洁且好看
一. 简介
由于想给博客加一个文章评论显示UserAgent功能,在网上搜寻并尝试了UserAgent插件,但是并不如意。一是因为他太过臃肿,虽然几乎可以识别市面上所有的OS和浏览器,但是我们常用的也就几个而已,大多数都用不到,二是图标太老旧了,而且清晰度很低,在博客上显得突兀且不美观。
于是我结合网上的代码,以及网上开源的图标的png格式重新安排了一个Comment-UA
,支持主流操作系统以及浏览器(图标没找到匹配的就没整,不认识的浏览器通通视为Google Chrome ::quyin:1huaji:: ),目前图片全部放在又拍云存储,不用担心拖慢速度。
图标均来自开源图标icons8.cn以及 MBE Style图标包。
二. 效果显示
- 大概就是这样了,实际效果请看我的评论!
- 目前可以识别的操作系统以及浏览器
食用方法
这里以handsome为例,其他主题操作方法类似(
VOID配置看评论
)。
首先
将下面这段css全部加入到 handsome/assets/css/handsome.min.css
末尾。
点击查看
也可后台加入自定义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> 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> 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> MicroSoft Edge';
} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360"></i> 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> 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> 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> 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> UC浏览器';
} else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
$outputer = '<i class= "ua-icon icon-opera"></i> 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> 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> Safari';
} else{
$outputer = '<i class="ua-icon icon-chrome"></i> Google Chrome';
}
echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
$os = false;
if (preg_match('/win/i', $agent)) {
if (preg_match('/nt 6.0/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows Vista / ';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows 7 / ';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 8 / ';
} else if(preg_match('/nt 6.3/i', $agent)) {
$os = ' <i class= "ua-icon icon-win2"></i> Windows 8.1 / ';
} else if(preg_match('/nt 5.1/i', $agent)) {
$os = ' <i class="ua-icon icon-win1"></i> Windows XP / ';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 10 / ';
} else{
$os = ' <i class="ua-icon icon-win2"></i> Windows X64 / ';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Pie / ';
}
else if (preg_match('/android 8/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Oreo / ';
}
else{
$os = ' <i class="ua-icon icon-android"></i> Android / ';
}
}
else if (preg_match('/ubuntu/i', $agent)) {
$os = ' <i class="ua-icon icon-ubuntu"></i> Ubuntu / ';
} else if (preg_match('/linux/i', $agent)) {
$os = ' <i class= "ua-icon icon-linux"></i> Linux / ';
} else if (preg_match('/iPhone/i', $agent)) {
$os = ' <i class="ua-icon icon-apple"></i> iPhone / ';
} else if (preg_match('/mac/i', $agent)) {
$os = ' <i class="ua-icon icon-mac"></i> MacOS / ';
}else if (preg_match('/fusion/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android / ';
} else {
$os = ' <i class="ua-icon icon-linux"></i> Linux / ';
}
echo $os;
}
最后
在handsome/component/comments.php
中找到合适位置添加以下代码:
(Mirages在mirages/libs/comments.php)
<span class="comment-ua">
<?php getOs($comments->agent); ?>
<?php getBrowser($comments->agent); ?></span>
闭路电视可以结合消防和安防系统,为经营者、警察局提供专业数据解决问题,减少时间成本,提升办事效率。
修改完后刷新浏览器缓存,现在你的评论UA已经变得很漂亮啦! ::quyin:1huaji::
减少时间成本 m.baqizw.com m.sswwxs.com m.sweixs.com m.aaxixs.com m.youmuxs.com m.umoxs.com m.uquxs.com m.ebuxs.com m.igexs.com m.imuxs.com m.uyixs.com m.ihexs.com m.ezuxs.com m.eaixs.com m.ubuxs.com
Dalao要不要改一下CSS鸭 CSS里的图标域还是cdn.zrahh.com:4433 改成www.zrahh.com才正常~
好像图标显示不正常了::quyin:cry::
修改CSS里的cdn.zrahh.com:4433为www.zrahh.com就好啦~
谢大佬分享!
已用上,效果很好!
#(献花)
作者,你好!我是腾讯云+社区的小编,关注了您分享的技术文章,觉得很棒,我们诚挚邀请您加入云+社区,与我们众多的社区作者一起为开发者分享技术干货。这个是我们云+社区【腾讯云自媒体分享计划】入驻流程和权益介绍的地址:https://cloud.tencent.com/developer/support-plan。如果您愿意加入或者想了解更多的信息请联系我~微信:suimgi,我们对您的加入充满期待。
最新版6.0 handsome模板,无法打开functions.php,显示“文件编码不被兼容,无法正确读取文件!”
请问博主,这个是什么问题?
handsome好像用不了了。@(真棒)::quyin:watermaleon::
自定义CSS加上:
.comment-ua .ua-icon{vertical-align: bottom}可以治疗强迫症@(滑稽)
求鼠标放在图标上显示文字写法,我的主题放上去好长不太美观,不知可否help。嘿嘿··
Mirages 在 mirages/libs/comments.php 博主 大约添加到第几行啊