实现评论区显示操作系统和评论来源 | Typecho

学习笔记 · 02-24 23:38

评论区显示操作系统和评论来源的作用是提供更多信息和背景,对于作者和访问者来说都具有一定的意义。

对于作者来说,了解评论来源和操作系统可以帮助他们了解读者的分布和设备偏好。这些信息可用于改进网站或内容的适应性,例如优化页面加载速度、调整布局以适应不同设备等。

对于访问者来说,评论区显示操作系统和评论来源可以帮助他们了解其他读者的背景和观点。通过查看评论来源,他们可以了解不同地区、不同文化和不同群体的观点和反馈。此外,了解评论来源还可以帮助他们判断评论的可信度和相关性。

总之,评论区显示操作系统和评论来源可以提供更多信息和背景,为作者和访问者提供了更全面的视角和理解。

具体操作

方法1

1.复制代码

首先打开主题目录下的 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;
}

2.还是复制代码

在主题目录文件中,找到 comments.php 文件(有些主题可能是 comment.php),在合适位置(比如评论作者的后面)添加以下代码

<?php getOs($comments->agent); ?><?php getBrowser($comments->agent); ?>
注意:这里用的是comments.php做的演示。如果你的主题目录下评论文件名为 comment.php ,可能需要到上面JS代码中稍微改动一下。

3.回到网站重新刷新一下,就可以看到效果了。

方法2

1.添加CSS样式

在主题目录文件中找到 style.css 文件(路径参考:/usr/themes/Joe-master/assets/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://youdomain.com)
}
.icon-android {
background-image: url(https://youdomain.com);
height: 19px
}
.icon-apple {
background-image: url(https://youdomain.com)
}
.icon-baidu {
background-image: url(https://youdomain.com)
}
.icon-chrome {
background-image: url(https://youdomain.com)
}
.icon-edge {
background-image: url(https://youdomain.com)
}
.icon-firefox {
background-image: url(https://youdomain.com)
}
.icon-google {
background-image: url(https://youdomain.com)
}
.icon-ie {
background-image: url(https://youdomain.com)
}
.icon-liebao {
background-image: url(https://youdomain.com)
}
.icon-linux {
background-image: url(https://youdomain.com)
}
.icon-mac {
background-image: url(https://youdomain.com)
}
.icon-opera {
background-image: url(https://youdomain.com)
}
.icon-qq {
background-image: url(https://youdomain.com)
}
.icon-quark {
background-image: url(https://youdomain.com)
}
.icon-safari {
background-image: url(https://youdomain.com)
}
.icon-ubuntu {
background-image: url(https://youdomain.com)
}
.icon-uc {
background-image: url(https://youdomain.com)
}
.icon-win1 {
background-image: url(https://youdomain.com)
}
.icon-win2 {
background-image: url(https://youdomain.com)
}


2.将以下代码加入到function.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 = '<i class="ua-icon icon-360"></i>&nbsp;&nbsp;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;
}


3.将以下代码添加到comments.php中122行附近所在的div中

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

注意:部分主题需要将comments修改为this才生效


UA图标下载:https://liuyajun.lanzout.com/icyIp1kfkdbg


方法3

基于腾讯位置服务添加IP属地显示的方法:

1.注册腾讯位置服务

打开腾讯位置服务官网,注册一个账号或者直接用QQ或者微信登录都可以(需要验证手机号)。

2.创建应用

打开控制台,点击左侧边栏中的应用管理,然后点击创建应用,输入应用名称和应用类型即可。

3.添加Key

一个应用可以添加多个Key,一个Key一天可以免费调用10000次IP定位服务(并发5次/s)。其他选项根据提示,按需选择即可。

4.复制代码(调用)

将以下代码复制到Cuteen/core/Function.php的末尾:

/* 腾讯LBS IP定位服务 */
function curl_tencentlbs_ip($ip) {
    //应用Key也就是上面的Key,修改成自己的Key即可
    $key = 'XXX-XXX';
    $url = 'https://apis.map.qq.com/ws/location/v1/ip?ip='.$ip.'&key='.$key;
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, 1);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($ch, CURLOPT_HTTPGET, true);
    curl_setopt($ch, CURLOPT_REFERER, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36');
    $content = curl_exec($ch);
    curl_close($ch);
    if($content) {
        $json = json_decode($content,true);
        if($json['status'] == 0 ) {
            $resjson = $json['result']['ad_info'];
            if($resjson['province']=='北京市'||$resjson['province']=='天津市'||$resjson['province']=='上海市'||$resjson['province']=='重庆市') {
                return $resjson['nation'].$resjson['city'];
            }
            return $resjson['nation'].$resjson['province'];
        }
    }
    return '';
}

注意:为了保护个人隐私,上面的代码已去除城市和区县信息,仅显示国家和省份信息。

5.将下面的代码复制到主题目录下的 comment.php 评论文件中(路径参考:usr/themes/Joe-master/public/comment.php)

IP属地:<?php echo curl_tencentlbs_ip($comments->ip); ?>


Typecho 评论 组件 优化

上一篇 : Typecho评论区增加楼层显示

下一篇 : "随机图片"动态显示 | 教程


| 黔ICP备2024020400号-2 | 萌ICP备20246777号 | | 当前有 4 人在线 |
本站已加入BLOGS·CN
订阅
Sitemap
博友圈 星球穿梭
开往-友链接力