忙!!!
哇!这周工作真的很忙都没时间打理博客,更别说更文章了。不过今天还好缓了缓,有时间折腾一下博客(手动滑稽) 今天早上把评论做了一些修改和添加功能,第一是评论头像换成QQ头像,第二是为博客文章评论添加显示 UserAgent(UA)的功能。
评论头像
1.默认的Gravatar是在是太难看了,而且还会经常宕机,所以网上最常用的方法是用QQ头像替换默认的gravatar头像。于是我在网上苦苦搜索了好几天,终于找到了适合的方法,现在记录一下代码。
<span itemprop="image"><?php $number=$comments->mail; echo '<img src="https://q2.qlogo.cn/headimg_dl? bs='.$number.'&dst_uin='.$number.'&dst_uin='.$number.'&;dst_uin='.$number.'&spec=100&url_enc=0&referer=bu_interface&term_type=PC" width="46px" height="46px" style="border-radius: 50%;">'; ?></span>
用以上代码替换comment.php里面默认的gravatar代码即可。
显示UA
1.本功能可替代 UserAgent 插件,更美观、简洁且好看,每次去别人的博客做评论,感觉显示UA好好看,于是我就想给我也装一个,搜到了@左岸老哥的教程,很快实现了UA功能
2. 效果显示
大概就是这样了,实际效果请看我的评论!
目前可以识别的操作系统以及浏览器
食用方法
这里以 handsome 为例,其他主题操作方法类似
首先将下面这段 css 全部加入到 handsome/assets/css/handsome.min.css 末尾。
然后找到 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中找到合适位置添加以下代码 (部分模板需要将comments替换成this,注意缩进):
<span class="comment-ua">
<?php getOs($comments->agent); ?>
<?php getBrowser($comments->agent); ?></span>
现在你的评论 UA 已经变得很漂亮啦!
BUG
评论区已帮助解决,再次谢谢左岸!不过移动端有个bug(头像和文字不在一行),不会修复,有能力的大神,看到后帮忙解决一下!
后续
这几天有时间我想办法把评论添加个表情,不然每次都要(手动滑稽)
学习了::quyin:1huaji::
哈哈哈,我的网站ua都消失了,修复修复
还有啊,我的ua不显示图标……
先查看你的ua图标能不能访问,然后看看你引用的对不对
能显示了,现在就是头像和昵称不再同一行这个问题没解决
能显示了,现在就是头像和昵称不再同一行这个问题没解决
就是span标签 位置不对,我刚开始也是这样
斗胆问一句,头像和昵称不在同一行的bug怎么解决哇?
看看你的span标签对不对
要怎么加?
要不你把你comments.php发给我看一看呀,我跟你同一主题~嘻嘻
那这个标签应该放哪里?
你看一下详细的教程
好没问题,明天你提醒我一下子,我健忘
已经发到你的邮箱中。
已经发到你的邮箱中。
……
求你这个邮件模板,真好看
已经发送到你的邮箱,由于手机操作限制。发过去的是html代码,如有不懂可以问我!
wp的吗
这是ty的