在多说中显示评论者的UA

作者 Hstb 日期 2017-01-21
在多说中显示评论者的UA

前言


以前看见评论框会显示UA和OS时感觉挺高大的(/ω╲)
就去问度娘方法,得到后一直尝试,却从未成功

明明都是WorldWordPress,为啥我不行ㄟ( ▔, ▔ )ㄏ
于是下定决心,弃坑😅

最近改评论框的时候才想起它,
又去百度了一波,最终弄好了(  ̄ー ̄)
不过这次用的是Hexo,
是不是WordPress有问题o(一︿一+)o

显示UA & OS


查看代码时请使用电脑

来自手机の友情提示

JS本地化

编辑JS

添加

  • 在embed.js头部加入以下代码 || 引用 js文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    //移动客户端判断开始,作用:在移动客户端显示不同样式
    function sskcheckMobile() {
    var isiPad = navigator.userAgent.match(/iPad/i) != null;
    if (isiPad) {
    return false;
    }
    var isMobile = navigator.userAgent.match(/iphone|android|phone|mobile|wap|netfront|x11|java|opera mobi|opera mini|ucweb|windows ce|symbian|symbianos|series|webos|sony|blackberry|dopod|nokia|samsung|palmsource|xda|pieplus|meizu|midp|cldc|motorola|foma|docomo|up.browser|up.link|blazer|helio|hosin|huawei|novarra|coolpad|webos|techfaith|palmsource|alcatel|amoi|ktouch|nexian|ericsson|philips|sagem|wellcom|bunjalloo|maui|smartphone|iemobile|spice|bird|zte-|longcos|pantech|gionee|portalmmm|jig browser|hiptop|benq|haier|^lct|320x320|240x320|176x220/i) != null;
    if (isMobile) {
    return true;
    }
    return false;
    }
    //移动客户端判断结束
    //显UA开始
    function sskua(e) {
    var r = new Array;
    var outputer = '';
    if (r = e.match(/FireFox\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_firefox"><i class="fa fa-firefox"></i> Mozilla FireFox' + '|' + r1[1]
    } else if (r = e.match(/Maxthon([\d]*)\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_maxthon"><i class="fa fa-globe"></i> Maxthon'
    } else if (r = e.match(/BIDUBrowser([\d]*)\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> 百度浏览器' + '|' + r1[1]
    } else if (r = e.match(/UBrowser([\d]*)\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_ucweb"><i class="fa fa-globe"></i> UCBrowser' + '|' + r1[1]
    } else if (r = e.match(/MetaSr/ig)) {
    outputer = '<span class="ua_sogou"><i class="fa fa-globe"></i> 搜狗浏览器'
    } else if (r = e.match(/2345Explorer/ig)) {
    outputer = '<span class="ua_2345explorer"><i class="fa fa-globe"></i> 2345浏览器'
    } else if (r = e.match(/2345chrome/ig)) {
    outputer = '<span class="ua_2345chrome"><i class="fa fa-globe"></i> 2345浏览器'
    } else if (r = e.match(/LBBROWSER/ig)) {
    outputer = '<span class="ua_lbbrowser"><i class="fa fa-globe"></i> 猎豹浏览器'
    } else if (r = e.match(/MicroMessenger\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_qq"><i class="fa fa-weixin"></i> 微信' + '|' + r1[1]
    /*.split('/')[0]*/
    } else if (r = e.match(/QQBrowser\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_qq"><i class="fa fa-qq"></i> QQ浏览器' + '|' + r1[1]
    /*.split('/')[0]*/
    } else if (r = e.match(/QQ\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_qq"><i class="fa fa-qq"></i> QQ浏览器' + '|' + r1[1]
    /*.split('/')[0]*/
    } else if (r = e.match(/MiuiBrowser\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_mi"><i class="fa fa-globe"></i> Miui浏览器' + '|' + r1[1]
    /*.split('/')[0]*/
    } else if (r = e.match(/Edge([\d]*)\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_ie"><i class="fa fa-edge"></i> Edge' + '|' + r1[1]
    /*.split('.')[0]*/
    } else if (r = e.match(/Chrome([\d]*)\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_chrome"><i class="fa fa-chrome"></i> Chrome' + '|' + r1[1]
    /*.split('.')[0]*/
    } else if (r = e.match(/safari\/([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_apple"><i class="fa fa-safari"></i> Apple Safari' + '|' + r1[1]
    } else if (r = e.match(/Opera[\s|\/]([^\s]+)/ig)) {
    var r1 = r[0].split("/");
    outputer = '<span class="ua_opera"><i class="fa fa-opera"></i> Opera' + '|' + r[1]
    } else if (r = e.match(/Trident\/7.0/gi)) {
    outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></i> Internet Explorer 11'
    } else if (r = e.match(/MSIE\s([^\s|;]+)/gi)) {
    outputer = '<span class="ua_ie"><i class="fa fa-internet-explorer"></i> Internet Explorer' + '|' + r[0]
    /*.replace('MSIE', '').split('.')[0]*/
    } else {
    outputer = '<span class="ua_other"><i class="fa fa-globe"></i> 其它浏览器'
    }
    if (sskcheckMobile()) {
    Mobile = '<br><br>';
    } else {
    Mobile = '';
    }
    return outputer + "</span>" + Mobile;
    }
    function sskos(e) {
    var os = '';
    if (e.match(/win/ig)) {
    if (e.match(/nt 5.1/ig)) {
    os = '<span class="os_xp"><i class="fa fa-desktop"></i> Windows XP'
    } else if (e.match(/nt 6.1/ig)) {
    os = '<span class="os_7"><i class="fa fa-desktop"></i> Windows 7'
    } else if (e.match(/nt 6.2/ig)) {
    os = '<span class="os_8"><i class="fa fa-windows"></i> Windows 8'
    } else if (e.match(/nt 6.3/ig)) {
    os = '<span class="os_8_1"><i class="fa fa-windows"></i> Windows 8.1'
    } else if (e.match(/nt 10.0/ig)) {
    os = '<span class="os_8_1"><i class="fa fa-windows"></i> Windows 10'
    } else if (e.match(/nt 6.0/ig)) {
    os = '<span class="os_vista"><i class="fa fa-desktop"></i> Windows Vista'
    } else if (e.match(/nt 5/ig)) {
    os = '<span class="os_2000"><i class="fa fa-desktop"></i> Windows 2000'
    } else {
    os = '<span class="os_windows"><i class="fa fa-desktop"></i> Windows'
    }
    } else if (e.match(/android/ig)) {
    os = '<span class="os_android"><i class="fa fa-android"></i> Android'
    } else if (e.match(/ubuntu/ig)) {
    os = '<span class="os_ubuntu"><i class="fa fa-desktop"></i> Ubuntu'
    } else if (e.match(/linux/ig)) {
    os = '<span class="os_linux"><i class="fa fa-linux"></i> Linux'
    } else if (e.match(/mac/ig)) {
    os = '<span class="os_mac"><i class="fa fa-desktop"></i> Mac'
    } else if (e.match(/unix/ig)) {
    os = '<span class="os_unix"><i class="fa fa-desktop"></i> Unix'
    } else if (e.match(/symbian/ig)) {
    os = '<span class="os_nokia"><i class="fa fa-mobile"></i> Nokia'
    } else {
    os = '<span class="os_other"><i class="fa fa-desktop"></i> 其它操作系统'
    }
    return os + "</span>";
    }
    //显UA结束

搜索

  • 在embed.js中查找以下代码

—如果找不到请先 点此格式化JS

data-qqt-account=”‘ + (r.qqt_account || “”) + ‘“>’ + u(r.name) + ““),

添加

  • 在此之后添加如下代码(显示时OS在前,UA在后):

    t += “<span class="ua">” + sskos(s.agent) + “<span class="ua">” + sskua(s.agent) + ““,

编辑CSS

添加

  • 在 [ CSS文件 || 多说后台管理-自定义CSS ] 中加入代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    /*多说UA开始*/
    span.ua {
    margin:0 1px!important;
    color:#FFFFFF!important;
    /*text-transform:Capitalize!important;
    float:right!important;
    line-height:18px!important;
    */
    }
    .ua_other.os_other {
    background-color:#ccc!important;
    color:#fff;
    border:1px solid #BBB!important;
    border-radius:4px;
    }
    .ua_ie {
    background-color:#428bca!important;
    border-color:#357ebd!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_firefox {
    background-color:#f0ad4e!important;
    border-color:#eea236!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_maxthon {
    background-color:#7373B9!important;
    border-color:#7373B9!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_ucweb {
    background-color:#FF740F!important;
    border-color:#d43f3a!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_sogou {
    background-color:#78ACE9!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_2345explorer {
    background-color:#2478B8!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_2345chrome {
    background-color:#F9D024!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_mi {
    background-color:#FF4A00!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_lbbrowser {
    background-color:#FC9D2E!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_chrome {
    background-color:#EE6252!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_qq {
    background-color:#3D88A8!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_apple {
    background-color:#E95620!important;
    border-color:#4cae4c!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .ua_opera {
    background-color:#d9534f!important;
    border-color:#d43f3a!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
    background-color:#39b3d7!important;
    border-color:#46b8da!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .os_android {
    background-color:#98C13D!important;
    border-color:#01B171!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .os_ubuntu {
    background-color:#DD4814!important;
    border-color:#01B171!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .os_linux {
    background-color:#3A3A3A!important;
    border-color:#1F1F1F!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .os_mac {
    background-color:#666666!important;
    border-color:#1F1F1F!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .os_unix {
    background-color:#006600!important;
    border-color:#1F1F1F!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    .os_nokia {
    background-color:#014485!important;
    border-color:#1F1F1F!important;
    border-radius:4px;
    padding:0 5px!important;
    }
    /*多说UA结束*/

引用(可选)

  • 在HTML中引用这两个CSS文件(如果需要显示图标):
  • //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css *
  • //cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css *

不建议将这两个CSS文件本地化,容易出现引用失败问题
[点击这里]可以看到更多图标(675+),使用时请在<span class="ua_ie"><span class="os_xp"> 等代码后加入图标代码,如(浅红色标签):
Apple <i class="fa fa-apple" aria-hidden="true"></i>
Android <i class="fa fa-android" aria-hidden="true"></i>
Chrome <i class="fa fa-chrome" aria-hidden="true"></i>
Desktop <i class="fa fa-desktop" aria-hidden="true"></i>
InternetExplorer <i class="fa fa-internet-explorer" aria-hidden="true"></i>


显示博主标志


JS本地化

  • 参见上文

编辑JS

添加

  • 在embed.js头部加入以下代码 || 引用 js文件
    //管理员判断开始
    function sskadmin(e) {
    var ssk = '';
    if (e.user_id == 【多说ID】) {
      ssk = '<span class="sskadmin"> ' + '博主' + '</span> '   
    }
    return ssk;
    }
    //管理员判断结束
  • 请将‘【多说ID】’替换为自己(博主)的多说ID
  • ‘博主’可以替换为任意文字,比如站长,管理员之类的
  • 如需显示博主图标请在<span class="sskadmin"> 后加入代码 && 引用上文所说的两个CSS文件:

    ** <i class="fa fa-user-o" aria-hidden="true"></i> **

搜索

  • 在embed.js中搜索代码:

—如果找不到,请先 点此格式化JS

*data-qqt-account="' + (r.qqt_account || "") + '">' + u(r.name) + "</span>"), *

添加

  • 在此之后加入代码:*t += sskadmin(r), *

保存代码,刷新一下

效果图:

  • UAの配色看起来可能有点怪,自行调整下吧~
  • 差点忘记说方法,千万别打我_(:з」∠)_
  1. 在css查找对应样式(class),如<span class="os_android"> 对应.os_android
    .os_android {
     background-color:#98C13D!important;/*背景色*/
     border-color:#01B171!important;
     border-radius:4px;
     padding:0 5px!important;
    }
  2. background-color:#98C13D!important; 中的#98C13D 替换成顺眼喜欢的[颜色代码]
  • 如果显示的UA有误,请 [访问此站] 复制User-Agent信息并评论在下方

声明,本文内容参考自
搜索客の 多说回复后显示浏览器及操作系统信息 && 多说社会化评论框添加”站长回复”标记