Typecho评论页美化
今天下午又弄了一个美化的功能，自我感觉还不错，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://web-static.q6q.cc/files/icon/360.png)}.icon-android{background-image:url(https://web-static.q6q.cc/files/icon/android.png);height:19px}.icon-apple{background-image:url(https://web-static.q6q.cc/files/icon/apple.png)}.icon-baidu{background-image:url(https://web-static.q6q.cc/files/icon/baidu.png)}.icon-chrome{background-image:url(https://web-static.q6q.cc/files/icon/chrome.png)}.icon-edge{background-image:url(https://web-static.q6q.cc/files/icon/edge.png)}.icon-firefox{background-image:url(https://web-static.q6q.cc/files/icon/firefox.png)}.icon-google{background-image:url(https://web-static.q6q.cc/files/icon/google.png)}.icon-ie{background-image:url(https://web-static.q6q.cc/files/icon/ie.png)}.icon-liebao{background-image:url(https://web-static.q6q.cc/files/icon/liebao.png)}.icon-linux{background-image:url(https://web-static.q6q.cc/files/icon/linux.png)}.icon-mac{background-image:url(https://web-static.q6q.cc/files/icon/mac.png)}.icon-opera{background-image:url(https://web-static.q6q.cc/files/icon/opera.png)}.icon-qq{background-image:url(https://web-static.q6q.cc/files/icon/qq.png)}.icon-quark{background-image:url(https://web-static.q6q.cc/files/icon/quark.png)}.icon-safari{background-image:url(https://web-static.q6q.cc/files/icon/safari.png)}.icon-ubuntu{background-image:url(https://web-static.q6q.cc/files/icon/ubuntu.png)}.icon-uc{background-image:url(https://web-static.q6q.cc/files/icon/uc.png)}.icon-win1{background-image:url(https://web-static.q6q.cc/files/icon/win1.png)}.icon-win2{background-image:url(https://web-static.q6q.cc/files/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> 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 = ' 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;}
将以下代码添加到comments.php中，具体是第几行我也不知道，这个根据你的主题，自行放在你认为美观的位置
<span class="comment-ua">
<?php getOs($this->agent); ?>
<?php getBrowser($this->agent); ?></span>最后强调一下， this 报错或者显示一直同一个设备的话就换成 comments
- 大概看一下我的操作截图吧
$(document).ready(function(){$(".galleryidpost").lightGallery({selector: ".yoniu-index-img",share: false,share: false,showThumbByDefault: false,autoplayControls: false});});
代码食用
点我下载全部代码 如果感觉麻烦，可以直接下载插件 点我下载插件
结语
以上配置完成，如果只显示文字而不显示图片，这时间你需要清楚一下浏览器的缓存即可咯，如果还不行，就是你放的代码位置有问题，请你仔细阅读我的教程吧，不懂也可以留言问我。
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=xp5d9fxk7lsq
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-09-101，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录