Mirages主题评论区用户UA外显 (支持Win11)
来个效果图:
嗯开始魔改
通用版本
这里 Win11 会显示成 Win10
CSS
# 更换图床
<style> #backtop {padding: 0.75em 1em;}
.google-auto-placed {display: none; }
.biaoqing.quyin {margin-bottom: -.3125rem;min-height: 3.25rem;height: 1em}
.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.sa.net/2025/04/18/glvkt5GDaJAxm94.webp)}
.icon-android {background-image: url(https://cdn.sa.net/2025/04/18/EyC7KfBert2F4Hj.png);height: 19px}
.icon-apple {background-image: url(https://cdn.sa.net/2025/04/18/4KQubwpFn8Uy1Et.png)}
.icon-baidu {background-image: url(https://cdn.sa.net/2025/04/18/8TuikAsv7Wew23z.webp)}
.icon-chrome {background-image: url(https://cdn.sa.net/2025/04/18/5T3GztAfElIYX8n.png)}
.icon-edge {background-image: url(https://cdn.sa.net/2025/04/18/eHd9wPoKnDlF6b5.png)}
.icon-firefox {background-image: url(https://cdn.sa.net/2025/04/18/t2eYbVEz9R6Tirg.png)}
.icon-google {background-image: url(https://cdn.sa.net/2025/04/18/5T3GztAfElIYX8n.png)}
.icon-ie {background-image: url(https://cdn.sa.net/2025/04/18/2ZEPeTV4KR9JibO.webp)}
.icon-liebao {background-image: url(https://cdn.sa.net/2025/04/18/nuKkAxUL3DFP9Tl.webp)}
.icon-linux {background-image: url(https://cdn.sa.net/2025/04/18/m3F1pIvyNkGg8uK.png)}
.icon-mac {background-image: url(https://cdn.sa.net/2025/04/18/4KQubwpFn8Uy1Et.png)}
.icon-opera {background-image: url(https://cdn.sa.net/2025/04/18/Q3UfOu7rhVZTsWm.png)}
.icon-qq {background-image: url(https://cdn.sa.net/2025/04/18/b1K5MmkonDhzIEP.png)}
.icon-quark {background-image: url(https://cdn.sa.net/2025/04/18/MYmzENFPid9ZIv3.webp)}
.icon-safari {background-image: url(https://cdn.sa.net/2025/04/18/8WK3vhUoRQOcu1H.png)}
.icon-ubuntu {background-image: url(https://cdn.sa.net/2025/04/18/VMGqml2nQIARdH7.png)}
.icon-uc {background-image: url(https://cdn.sa.net/2025/04/18/XDrLxyj16iz5WS7.png)}
.icon-win1 {background-image: url(https://cdn.sa.net/2025/04/18/qAHMKlO5FSI498W.png)}
.icon-win2 {background-image: url(https://cdn.sa.net/2025/04/18/4oLSAva6Du8tJsi.png)}
</style>PHP
加到 /usr/themes/Mirages/function.php 最后即可
# 针对PHP8.1+做了适配
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;
}HTML 输出
先找到需要修改的文件位置
如果版本为 1.2.0, 则为 /usr/themes/Mirages/lib/comments_1.2.php 中 (373 行左后)
如果是旧版本, 则为 /usr/themes/Mirages/lib/comments.php 中 (122 行 zuo'you)
搜索 ClassName: comment-author
找到对应的 div, 如:
<div
class="comment-author"
itemprop="creator"
itemscope
itemtype="http://schema.org/Person">
<span itemprop="image">
<?php $this->outputAvatar($singleCommentOptions->avatarSize,
$singleCommentOptions->defaultAvatar); ?>
</span>
<cite class="fn color-main" itemprop="name"
><?php $singleCommentOptions->beforeAuthor(); $this->author();
$singleCommentOptions->afterAuthor(); ?></cite>
</div>
在最后加上如下代码 (所有版本通用):
<span class="comment-ua">
<?php getOs($this->agent); ?>
<?php getBrowser($this->agent); ?>
</span>
像这样:
<div
class="comment-author"
itemprop="creator"
itemscope
itemtype="http://schema.org/Person">
<span itemprop="image">
<?php $this->outputAvatar($singleCommentOptions->avatarSize,
$singleCommentOptions->defaultAvatar); ?>
</span>
<cite class="fn color-main" itemprop="name"
><?php $singleCommentOptions->beforeAuthor(); $this->author();
$singleCommentOptions->afterAuthor(); ?></cite>
<span class="comment-ua">
<?php getOs($this->agent); ?>
<?php getBrowser($this->agent); ?>
</span>
</div>
(上面的代码示例为 1.2.0 版本)
做 Win11 适配
Win10 和 Win11 的 UserAgent 是一样的, 想要分辨则需要另外的新途径
整体思路是这样的: 检测是否为 Win11 --> 记录 Cookie --> PHP 检测是否存在 Cookies, 若存在改 UA 为 Windows NT 11
开搞~
JS 储存 Cookies
储存 Cookies 检测 Win11 思路来自: 泽泽社
在主题设置外观处, 添加
if (navigator.userAgentData) { //判断当前环境是否支持
navigator.userAgentData.getHighEntropyValues(["platformVersion"])
.then(ua => {
if (navigator.userAgentData.platform === "Windows") { //判断是否是 Windows 系统
const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
if (majorPlatformVersion >= 13) { //判断是否是 win11 或以上
document.cookie = "win11=true;path=/"; //写入 cookie
}
}
});
}
修改 PHP
添加 Win11 的专属 Logo
把前面 /usr/themes/Mirages/function.php 添加的, 整体改为
// 获取浏览器信息
function getBrowser($agent)
{
if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-ie"></i> ';
} 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> ';
} 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> ';
} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360"></i> ';
} 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> ';
} else if (preg_match('/UC/i', $agent)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc"></i> ';
} 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> ';
} 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> ';
} else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
$outputer = '<i class= "ua-icon icon-opera"></i> ';
} 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> ';
} 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> ';
} else{
$outputer = '<i class="ua-icon icon-chrome"></i> ';
}
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> ';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> ';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> ';
} else if(preg_match('/nt 6.3/i', $agent)) {
$os = ' <i class= "ua-icon icon-win2"></i> ';
} else if(preg_match('/nt 5.1/i', $agent)) {
$os = ' <i class="ua-icon icon-win1"></i> ';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> ';
} else if (preg_match('/nt 11.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> ';
} else{
$os = ' <i class="ua-icon icon-win2"></i> ';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> ';
}
else if (preg_match('/android 8/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> ';
}
else{
$os = ' <i class="ua-icon icon-android"></i> ';
}
}
else if (preg_match('/ubuntu/i', $agent)) {
$os = ' <i class="ua-icon icon-ubuntu"></i> ';
} else if (preg_match('/linux/i', $agent)) {
$os = ' <i class= "ua-icon icon-linux"></i> ';
} else if (preg_match('/iPhone/i', $agent)) {
$os = ' <i class="ua-icon icon-apple"></i> ';
} else if (preg_match('/mac/i', $agent)) {
$os = ' <i class="ua-icon icon-mac"></i> ';
}else if (preg_match('/fusion/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> ';
} else {
$os = ' <i class="ua-icon icon-linux"></i> ';
}
echo $os;
}
导入数据库是更改 UA (谨慎操作)
这里设置是全局设置, 这样以后万一换主题不需要重新弄 (除非更新 Typecho, 看着更新频率应该问题不大)
在 /www/wwwroot/tsutsu.cc/var/Widget/base/Comments.php 中, 大概 70 来行的位置
/** 构建插入结构 */
$insertStruct = [
'xxx' => $rows['xxx'],
.........
];
下方添加
/** Win11 适配 */
if(isset($_COOKIE['win11'])){//判断 cookie
$insertStruct['agent']=str_replace("Windows NT 10.0","Windows NT 11.0",$insertStruct['agent']);//将 win10 的参数改成 win11
}
保存, 搞定~
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »