在评论中展示浏览器、操作系统版本信息

📅 9月12日 / 🎨 开发日志 / 👓 200 / 💬 6


不得不提的 User-Agent

随着 Cardy Theme 博客主题慢慢完善,我也开始着手针对细节进行优化。注意到朋友的 Hexo 博客使用的 Valine 评论系统有一些有趣的元素:

评论截图

于是我也安排一下。

开始

User-Agent 简介

浏览器请求服务器时会在 Header 中带上 User-Agent 信息,举个栗子:User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

服务器则可以从 User-Agent 中轻易发现客户端的一些基本信息,如浏览器 Chrome/74.0、操作系统 Windows NT 10.0 等。

那我们怎么知道评论者的 User-Agent 呢?

好消息是 Typecho 在评论数据中已经保存了 User-Agent 信息(机智呀),所以可以从这里入手,直接提取出我们需要的信息,放在评论中。

但是,实际上不同操作系统、浏览器所生成的 User-Agent 千差万别,我们很难用一条简单的规则去从中完美解析出所需的信息。所以我们还得想想办法。

User-Agent 解析

先看看前人造了什么好用的轮子。搜索一通后发现很多文章、插件中都使用一坨又一坨的 正则表达式 来解析,但其实 PHP 已经造好了这个轮子,只需一个 get_browser() 函数足以满足我们的要求(果然PHP是世界上最好的语言)。

再来一个但是,这个函数比较特殊,第一次使用前通过两个步骤来准备好环境:

  1. 下载 browscap.ini 文件
  2. 修改 php.ini 配置
一句话说明:首先函数需要调用 browscap.ini 这个文件,可以从 browscap.org 官网下载,然后再将 php.ini 中的 browscap = 该文件路径即可。

举个例子(Linux 环境下也一样):

php.ini 配置

重启下 php-fpm,就可以享用了。

看下效果:

效果截图

真香。

附加:browscap 版本

php_browscap 官网有三个版本,体积相差较大,具体返回的内容也不一样,这里做个记录。

测试内容是从微信浏览器中提取的:User-Agent:Mozilla/5.0 (Linux; Android 9; HMA-AL00 Build/HUAWEIHMA-AL00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044904 Mobile Safari/537.36 MMWEBID/4483 MicroMessenger/7.0.6.1500(0x2700063D) Process/tools NetType/WIFI Language/zh_CN

lite_php_browscap.ini (496 KB):

解析结果:

{
    "browser_name_regex": "~^mozilla/5\\.0 \\(.*linux.*android.*\\).*applewebkit.*\\(.*khtml.*like.*gecko.*\\).*version/.*chrome/66\\.0.*mobile.*safari.*$~",
    "browser_name_pattern": "Mozilla/5.0 (*Linux*Android*)*applewebkit*(*khtml*like*gecko*)*Version/*Chrome/66.0*Mobile*Safari*",
    "parent": "Android WebView 66.0",
    "comment": "Android WebView 66.0",
    "browser": "Android WebView",
    "version": "66.0",
    "platform": "Android",
    "ismobiledevice": "1",
    "device_type": "Mobile Phone",
    "istablet": ""
}

php_browscap.ini (17,857 KB):

解析结果:

{
    "browser_name_regex": "~^mozilla/5\\.0 \\(.*linux.*android.* build/.*\\) applewebkit.* \\(.*khtml.*like.*gecko.*\\).*version/.* mqqbrowser/.*safari/.* micromessenger/.*$~",
    "browser_name_pattern": "Mozilla/5.0 (*Linux*Android* Build/*) applewebkit* (*khtml*like*gecko*)*Version/* MQQBrowser/*Safari/* MicroMessenger/*",
    "parent": "WeChat App Generic",
    "platform": "Android",
    "comment": "WeChat App Generic",
    "browser": "WeChat App",
    "browser_maker": "Tencent Ltd.",
    "ismobiledevice": "1",
    "device_type": "Mobile Phone",
    "device_pointing_method": "touchscreen",
    "version": "0.0",
    "majorver": "0",
    "minorver": "0",
    "istablet": "",
    "crawler": ""
}

full_php_browscap.ini (89,249 KB):

解析结果:

{
    "browser_name_regex": "~^mozilla/5\\.0 \\(.*linux.*android.* build/.*\\) applewebkit.* \\(.*khtml.*like.*gecko.*\\).*version/.* mqqbrowser/.*safari/.* micromessenger/.*$~",
    "browser_name_pattern": "Mozilla/5.0 (*Linux*Android* Build/*) applewebkit* (*khtml*like*gecko*)*Version/* MQQBrowser/*Safari/* MicroMessenger/*",
    "parent": "WeChat App Generic",
    "browser_bits": "32",
    "platform": "Android",
    "platform_description": "Android OS",
    "platform_bits": "32",
    "platform_maker": "Google Inc",
    "comment": "WeChat App Generic",
    "browser": "WeChat App",
    "browser_type": "Application",
    "browser_maker": "Tencent Ltd.",
    "frames": "1",
    "iframes": "1",
    "tables": "1",
    "cookies": "1",
    "javascript": "1",
    "javaapplets": "1",
    "ismobiledevice": "1",
    "cssversion": "3",
    "aolversion": "0",
    "device_name": "general Mobile Phone",
    "device_type": "Mobile Phone",
    "device_pointing_method": "touchscreen",
    "device_code_name": "general Mobile Phone",
    "renderingengine_name": "WebKit",
    "renderingengine_description": "For Google Chrome, iOS (including both mobile Safari, WebViews within third-party apps, and web clips), Safari, Arora, Midori, OmniWeb, Shiira, iCab since version 4, Web, SRWare Iron, Rekonq, and in Maxthon 3.",
    "renderingengine_maker": "Apple Inc",
    "browser_modus": "unknown",
    "version": "0.0",
    "majorver": "0",
    "minorver": "0",
    "platform_version": "unknown",
    "alpha": "",
    "beta": "",
    "win16": "",
    "win32": "",
    "win64": "",
    "backgroundsounds": "",
    "vbscript": "",
    "activexcontrols": "",
    "istablet": "",
    "issyndicationreader": "",
    "crawler": "",
    "isfake": "",
    "isanonymized": "",
    "ismodified": "",
    "device_maker": "unknown",
    "device_brand_name": "unknown",
    "renderingengine_version": "unknown"
}

参考

(完)

留言(6)

SaltyLeo
SaltyLeoChrome 76.0Win10#67
9月14日 回复

666,手动改代码的都是大佬!

SaltyLeo
SaltyLeoChrome 76.0Win10#69
9月14日 回复

咦~ 似乎不会从gravatar同步头像了欸。

Juexe
JuexeChrome 74.0Win10#71
9月14日 回复

准备用 gravatar.loli.net 代理一下,晚点会更新😁

aapon
aaponChrome 76.0Win10#65
9月13日 回复

可以,新功能

Juexe
JuexeChrome 74.0Win10#66
9月13日 回复

效果没有 Valine 那么好,继续改进

Juexe
JuexeChrome 74.0Win10#55
9月12日 回复

评论效果看我

没有更多了 :)