MENU

Mirages主题评论区用户UA外显 (支持Win11)

June 6, 2022 • Read: 320 • 技术

来个效果图:

效果图
嗯开始魔改

通用版本

这里 Win11 会显示成 Win10

CSS

.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(//ae01.alicdn.com/kf/U42458a083b5841e29e6bdf64da4dd6f7n.png)}
.icon-android {background-image: url(//ae01.alicdn.com/kf/U828b5bf82ae54f5bbd4e85d4f8d55429z.png);height: 19px}
.icon-apple {background-image: url(https://img.tsutsu.one/i-1/2022/05/31/6295f447062e3.png)}
.icon-baidu {background-image: url(//ae01.alicdn.com/kf/Uc2fa8f9e72754d77b88300baade30a51G.png)}
.icon-chrome {background-image: url(//ae01.alicdn.com/kf/U6affe14cdd2d4cc68b6496ee128e0afcc.png)}
.icon-edge {background-image: url(//ae01.alicdn.com/kf/U9a187f745382403f8091363dd5116805F.png)}
.icon-firefox {background-image: url(//ae01.alicdn.com/kf/U6236d80cf4ff476e8e43aaed69c5befeN.png)}
.icon-google {background-image: url(//ae01.alicdn.com/kf/Ubf337232dad142c48eaeceefb3a45f74l.png)}
.icon-ie {background-image: url(//ae01.alicdn.com/kf/Ucb261fe3d6754c2a9a591d318be2ce97k.png)}
.icon-liebao {background-image: url(//ae01.alicdn.com/kf/U68d7a79a125f4ec6b2baf20cc3fc496fM.png)}
.icon-linux {background-image: url(//ae01.alicdn.com/kf/Udc4a7c01acb243a8bdc0aca75fddc371o.png)}
.icon-mac {background-image: url(//ae01.alicdn.com/kf/Ud308988cce504ee79c64c127ed888250i.png)}
.icon-opera {background-image: url(//ae01.alicdn.com/kf/U5874ce102e504312bc047430fdffe83bv.png)}
.icon-qq {background-image: url(//ae01.alicdn.com/kf/U177c494909864eb3bbf4d3a3e17dc71bz.png)}
.icon-quark {background-image: url(//ae01.alicdn.com/kf/U6eac778937844e8aa6941a980c2023f0H.png)}
.icon-safari {background-image: url(https://img.tsutsu.one/i-1/2022/05/31/6295f4128907c.png)}
.icon-ubuntu {background-image: url(//ae01.alicdn.com/kf/U6403e788bd8b482a8d405c00f3ffb75av.png)}
.icon-uc {background-image: url(//ae01.alicdn.com/kf/U59565d33b8a74e518f2c202d6d35eed7M.png)}
.icon-win1 {background-image: url(//ae01.alicdn.com/kf/U8da46c8fcddc4b67b4970bbcb6dda523H.png)}
.icon-win2 {background-image: url(//ae01.alicdn.com/kf/U49a973712e134806bc73d050bceeb48bm.png)}
.icon-win3 {background-image : url(https://img.tsutsu.one/i-1/2022/05/31/629602d273c38.png)}

PHP

加到 /usr/themes/Mirages/function.php 最后即可

    if (preg_match('/MSIE\s([^\s|;]+)/i', Extra open brace or missing close brace$agent, $regs)) {
        Extra open brace or missing close brace$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', Misplaced & $agent, $regs)) {
        Extra open brace or missing close brace$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 极速浏览器';
    } else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', Misplaced & $agent, $regs)) {
        Extra open brace or missing close brace$str1 = explode('Edge/', $regs[0]);
        $Edge_vern = explode('.', $str1[1]);
        $outputer = '    MicroSoft Edge';
    } else if (preg_match('/UC/i', $agent)) {
        Extra open brace or missing close brace$str1 = explode('rowser/', $agent);
        $UCBrowser_vern = explode('.', $str1[1]);
        $outputer = '    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 = '  QQ 浏览器';
    } else if (preg_match('/UBrowser/i', Misplaced & $agent, $regs)) {
        Extra open brace or missing close brace$str1 = explode('rowser/', $agent);
        $UCBrowser_vern = explode('.', $str1[1]);
        $outputer = '    UC 浏览器';
    } else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
        $outputer = '  Opera';
    } else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', Misplaced & $agent, $regs)) {
        Extra open brace or missing close brace$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 {
        Misplaced & $outputer = '    Google Chrome';
    }
    echo $outputer;
}

function getOs(Extra close brace or missing open brace$agent) {
    $os = false;
    if (preg_match('/win/i', $agent)) {
        if (preg_match('/nt 6.0/i', $agent)) {
            Extra open brace or missing close brace$os = '        Windows Vista  /  ';
        } else if (preg_match('/nt 6.1/i', $agent)) {
            Extra open brace or missing close brace$os = '        Windows 7  /  ';
        } else if (preg_match('/nt 6.2/i', $agent)) {
            Extra open brace or missing close brace$os = '        Windows 8  /  ';
        } else if (preg_match('/nt 6.3/i', $agent)) {
            Extra open brace or missing close brace$os = '        Windows 8.1  /  ';
        } else if (preg_match('/nt 5.1/i', $agent)) {
            Extra open brace or missing close brace$os = '        Windows XP  /  ';
        } else if (preg_match('/nt 10.0/i', $agent)) {
            Extra open brace or missing close brace$os = '        Windows 10  /  ';
        } else {
            $os = '    Windows X64 / ';
        }
    } else if (preg_match('/android/i', Misplaced & $agent)) {
        if (preg_match('/android 9/i', $agent)) {
            Extra open brace or missing close brace$os = '        Android Pie  /  ';
        } else if (preg_match('/android 8/i', $agent)) {
            Extra open brace or missing close brace$os = '        Android Oreo  /  ';
        } else {
            $os = '    Android / ';
        }
    } else if (preg_match('/ubuntu/i', Misplaced & $agent)) {
        $os = '    Ubuntu / ';
    } else if (preg_match('/linux/i', Misplaced & $agent)) {
        $os = '    Linux / ';
    } else if (preg_match('/iPhone/i', Misplaced & $agent)) {
        $os = '    iPhone / ';
    } else if (preg_match('/mac/i', Misplaced & $agent)) {
        $os = '    MacOS / ';
    } else if (preg_match('/fusion/i', Misplaced & $agent)) {
        $os = '    Android / ';
    } else {
        Misplaced & $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>&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 if (preg_match('/nt 11.0/i', $agent)) {
            $os = '&nbsp;&nbsp;<i class="ua-icon icon-win3"></i>&nbsp;&nbsp;Windows 11&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;
}

导入数据库是更改 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
}

保存, 搞定~

Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

2 Comments
  1. Q78KG Q78KG     Windows 11 /    Google Chrome

    网盘炸了qwq

  2. つつ つつ     MacOS /    Safari

    iPad