多说高级应用-添加 UA 浏览器标识、旋转头像等

最新推荐文章于 2021-05-25 14:45:23 发布
最新推荐文章于 2021-05-25 14:45:23 发布
阅读量1.9k 收藏
点赞数
分类专栏： hexo 文章标签： css 浏览器 多说 hexo 不二博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/erchowyo/article/details/54407626
版权

原文发表在：http://blog.buer.website

相关脚本下载

完整多说 CSS 样式文件: duosuo.css by Yeechong

完整多说 embed-js 文件: embed-js by Yeechong

UA 浏览器标识

修改多说调用地址

主题 Yelee (v3.0) 在 Buer/layout/_partial/comments/duoshuo.ejs 里修改。

var duoshuoQuery = {short_name:"<%=theme.duoshuo%>"};
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;

    ds.src = 'http://blog.buer.website/js/embed.js';
    /*上面是我自己的 embed.js 链接，请改为你自己的地址*/

    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0] 
     || document.getElementsByTagName('body')[0]).appendChild(ds);
})();

引入 Font Awesome

这里介绍下最快捷的方式，把下面代码放入对应 HTML head 头部即可。例如 Hexo 博客主题的通常是在 layout 文件夹下的 Head 文件中引入

主题 Buer 已自带 Font Awesome，无需再引入。

<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">

多说后台自定义CSS

多说后台自定义CSS

span.ua {
    display: inline-block !important;
    margin: auto 1px .3em !important;
    color: #fff !important;
}
.os_other {
    background-color: #bdb2a7!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_other {
    background-color: #bdb2a7!important;
    color: #fff;
    border: 1px solid #BBB!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_other {
    opacity: 1;
}
.os_other:hover {
    opacity: 1;
}
.ua_ie {
    background-color: #428bca!important;
    border-color: #357ebd!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_ie:hover {
    opacity: 1;
}
.ua_firefox {
    background-color: #f0ad4e!important;
    border-color: #eea236!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_firefox:hover {
    opacity: 1;
}
.ua_maxthon {
    background-color: #7373B9!important;
    border-color: #7373B9!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_maxthon:hover {
    opacity: 1;
}
.ua_ucweb {
    background-color: #FF740F!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_ucweb:hover {
    opacity: 1;
}
.ua_sogou {
    background-color: #78ACE9!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_sogou:hover {
    opacity: 1;
}
.ua_2345explorer {
    background-color: #2478B8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_2345explorer:hover {
    opacity: 1;
}
.ua_2345chrome {
    background-color: #F9D024!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_2345chrome:hover {
    opacity: 1;
}
.ua_mi {
    background-color: #FF4A00!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_mi:hover {
    opacity: 1;
}
.ua_lbbrowser {
    background-color: #FC9D2E!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_lbbrowser:hover {
    opacity: 1;
}
.ua_chrome {
    background-color: #EE6252!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_chrome:hover {
    opacity: 1;
}
.ua_qq {
    background-color: #3D88A8!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_qq:hover {
    opacity: 1;
}
.ua_apple {
    background-color: #E95620!important;
    border-color: #4cae4c!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_apple:hover {
    opacity: 1;
}
.ua_opera {
    background-color: #d9534f!important;
    border-color: #d43f3a!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.ua_opera:hover {
    opacity: 1;
}
.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;
    opacity: .4;
}
.os_vista:hover,.os_2000:hover,.os_windows:hover,.os_xp:hover,.os_7:hover,.os_8:hover,.os_8_1:hover {
    opacity: 1;
}
.os_android {
    background-color: #98C13D!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_android:hover {
    opacity: 1;
}
.os_ubuntu {
    background-color: #DD4814!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_ubuntu:hover {
    opacity: 1;
}
.os_linux {
    background-color: #3A3A3A!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_linux:hover {
    opacity: 1;
}
.os_mac {
    background-color: #666666!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_mac:hover {
    opacity: 1;
}
.os_unix {
    background-color: #006600!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_unix:hover {
    opacity: 1;
}
.os_nokia {
    background-color: #014485!important;
    border-color: #1F1F1F!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.os_nokia:hover {
    opacity: 1;
}
/*UA End*/

显示博主标记

分别添加以下代码到你的 embed.js文件和多说自定义 CSS ，自己多说账户的评论旁将显示博主标记。如果你用的是我上面提供的 embed.js，那修改好 e.user_id 时博主标记应该已经显示了。

source\js

/*博主标记: 添加到 embed.js*/
function sskadmin(e) {
    var ssk = '';
    if (e.user_id == 你的多说数字ID) {
        if (checkMobile()) {
            ssk = '<span class="ua"><span class="sskadmin">博主</span></span><br><br>';
        } else {
            ssk = '<span class="ua"><span class="sskadmin">博主</span></span>';
        }
    } else {
        if (checkMobile()) {
            ssk = '<br><br>';
        }
    }
    return ssk;
}
/*博主标记 CSS*/
.sskadmin {
    background-color: #00a67c!important;
    border-color: #01B171!important;
    border-radius: 4px;
    padding: 0 5px!important;
    opacity: .4;
}
.sskadmin:hover {
    opacity: 1;
}

不二博主设置

自己评论后点击自己的头像，会跳转到一个页面：
6360067528008712000
6362267528038712065
http://yeechong.duoshuo.com/user-url/?user_id=6362267528038712065
即可查看user_id。 

//移动客户端判断结束
//管理员判断开始
function sskadmin(e) {
var ssk = '';
if (e.user_id == 6362267528038712065) {
    if (checkMobile()) {
        ssk = '<span class="ua"><span class="sskadmin">不二博主</span>';
    } else {
        ssk = '<span class="ua"><span class="sskadmin">不二博主</span>';
    }
} else {
    if (checkMobile()) {
        ssk = '<br><br>';
    }
}
return ssk;
}

个性化 CSS 样式

旋转头像

修改了旋转度数，动画时间，内边距。如果是嵌套评论，则可删除图片宽高属性。
/头像样式/
#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}
#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .9s;-moz-transition: .9s;-o-transition: .9s;-ms-transition: .9s;padding: 2px;border: 1px solid #ddd;background: #fff;}
/鼠标悬停旋转头像/
.ds-post:hover .ds-avatar img{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}
#ds-reset .ds-avatar img:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);border-radius:30px !important;}

喜欢按钮样式

透明度，背景，边框等样式调整。

.ds-meta {
    opacity: .5;
    }
.ds-meta:hover {
    opacity: 1;
    }
#ds-thread #ds-reset a.ds-like-thread-button {
    background-image: none;
    background-color: #fee2d3;
    border: none;
    text-shadow: none;
    font-family: inherit;
    }

社交账号登陆透明度

#ds-thread #ds-reset .ds-login-buttons {
    opacity: .5;
}
#ds-thread #ds-reset .ds-login-buttons:hover {
    opacity: 1;
    }

用户名颜色

#ds-thread #ds-reset .ds-highlight {
    color: #ef7c6c !important;
}

未登录用户名字颜色

颜色与其他登陆用户保持一致；

#ds-thread #ds-reset .ds-user-name {
    color: #ef7c6c !important;
}

评论框背景图片

选择合适大小的图片即可，带透明背景的更好。

#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url("/img/bg.jpg") bottom right no-repeat;}

评论框背景

#ds-thread #ds-reset .ds-textarea-wrapper {
    background: rgba(255, 255, 255, .5);
}

工具栏背景

被顶起来的评论

#ds-reset .ds-gradient-bg {
    background: #F0F8FF;
}

“发布”按钮背景

#ds-thread #ds-reset .ds-post-button {
    background-image: none;
    background: #FAEBD7;
    text-shadow: none;
}

评论列表背景

#ds-thread #ds-reset li.ds-post {
    background: #00000;
}
#ds-thread #ds-reset li.ds-post:hover {
    background-color: #C0C0C0 !important;
}

评论数标签

#ds-thread #ds-reset li.ds-tab a.ds-current {
    background: #FBFBFF;
}

站长回复标记

在已经保存至本地或是云存储的 embed.js 内最顶部添加如下代码：

//管理员判断开始
function sskadmin(e) {
 var ssk = '';
 if(e.user_id==【多说id】){
 ssk = '<div style="position: absolute;margin-left:300px;"><img src="【改为你自己的图片地址】" width="【图片宽度】" height="【图片高度】"></div>'
 }
 return ssk;
}
//管理员判断结束

多说账户设置

在多说网站后台做的一些个性化设置。

http://多说用户名.duoshuo.com/admin/settings

评论显示方式

　　比较喜欢嵌套模式，最大层数设为３，评论每页最多30条。

过滤机制

　　启用”Akismet智能过滤”，等再过一阵子公开博客后大概能用上吧。

默认头像

　　不大喜欢多说默认未登录访客的头像，修改为 QQ 匿名头像。

其它开源方案

欢迎大家积极反馈，提出自己的想法^_^

前端识别

大家可以猛击测试各种UA

不二侬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义浏览器UA标识
一二说
06-16 1万+
正文 手机浏览器改成下面这段，可以享受到百度的纯净浏览。 Mozilla/5.0 (Linux; U; Android 10; zh-CN; 2014811 Build/QQ3A.200805.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/78.0.2564.116 Quark/3.8.2.126 Mobile Safari/537.36 T7/10.3 SearchCraft/2.6.3 (Baidu; P1 8.0.0)
火狐浏览器&谷歌浏览器&Edge浏览器修改默认UA（User-Agent）
热门推荐
m0_46665077的博客
07-11 5万+
火狐浏览器修改默认UA（User-Agent） 谷歌浏览器默认UA（User-Agent） Edge浏览器修改默认UA（User-Agent）
POST/GET提交测试工具-可自定义UA、Cookies等
04-09
【很好用的测试工具】POST/GET提交测试工具-可自定义UA、Cookies、head、代理等，可能部分软件会报毒（E编写），如果不放心请勿下载。
关于浏览器UA的一些介绍
努力码代码的程序媛小艺
10-14 2152
User Agent是Http协议中的一部分，属于头域的组成部分，User Agent也简称UA。通俗地讲，UA是一种向访问网站提供你所使用的浏览器类型、操作系统、浏览器内核等信息的标识。通过这个标识，用户所访问的网站可以显示不同的排版，从而为用户提供更好的体验或者进行信息统计。例如，百度、新浪等网站用手机访问和电脑访问是不一样的，这是因为网站根据访问者的UA判断后，进行了不同的设置和处理。 使
[330]Postman的Post请求方式的四种类型的数据
周小董
07-14 3万+
1. form-data 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有content-type来说明文件类型；content-disposition用来说明字段的一些信息；由于有boundary隔离，所以multipart/form-data既可以上传文...
华视CVR-100UA驱动及SDK
04-13
这款阅读器采用了先进的非接触式IC卡技术，能够快速、准确地读取第二代居民身份证中的芯片信息，包括个人基本信息、证件照片等，广泛应用于公安、教育、金融、电信等多个领域。 驱动程序是连接硬件设备和操作系统的...
node-opcua-sample:一个简单的OPCUA示例客户端，以演示如何使用节点opcua SDK
05-15
一个简单的OPCUA示例客户端，以演示如何使用 SDK。 该样品带有3种口味 带有异步/等待支持的打字稿 $ npm install ts-node -g $ ts-node simple_client_ts.ts 支持async / await的最新nodejs版本（es2017） $ node...
2024最新设备python爬虫十万条UA User-Agent信息浏览器头信息包括手机
最新发布
06-05
2024最新设备python爬虫十万条UA User-Agent信息浏览器头信息包括手机
Node-REDnode-red-contrib-opcua-server模块使用（4）
02-01
Node-REDnode-red-contrib-opcua-server模块使用（4）
prosys-opc-ua-simulation-server-windows-x64-5.2.2-9
08-19
单机调试plc工具
Go-FakeUseragent各种各样的随机浏览器头useragents
08-14
Fake Useragent：各种各样的随机浏览器头 useragents
根据移动终端（手机）请求头的UA信息，判断其操作系统
09-14 9096
一、安卓 使用机器：三星I9000 1、 自带浏览器 User-Agent : Mozilla/5.0 (Linux; U; Android 4.0.3; zh-cn; U8860 Build/HuaweiU8860) UC AppleWebKit/530+ (KHTML, like Gecko) Mobile Safari/530  带有android字样 2、
selenium之chrome浏览器设置userAgent和代理ip
铁马冰河入梦来
06-02 2万+
1.设置user-agent option = ChromeOptions() #设置无头模式 option.add_argument("--headless") option.add_experimental_option('excludeSwitches', ['enable-automation']) option.add_experimental_option('useAutomationExtension', False) #设置user-age
postman 如何修改请求的User-Agent
weixin_39845496的博客
07-12 1万+
postman发送请求时，想修改User-Agent 发现 写在header里没起作用 下面就是解决办法 只需要把这个开关打开，你的User-Agent就会起作用 如果你首次打开时会提示 图片上的内容 会让你安装Postman Interceptor 插件 点击Install （确认你能翻墙！！！） ， 会直接跳转到插件页面进行安装 会提示 点击 添加扩展程序， 等添加完成。 最后一步 去p...
linux firefox ua,浏览器标识ua(示例代码)
weixin_31359991的博客
05-25 1935
# LinuxLinux / Firefox 29: Mozilla/5.0 (X11; Linux x86_64; rv:29.0) Gecko/20100101 Firefox/29.0Linux / Chrome 34: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.184...
在postman中调用自定义签名方式的API
纸上得来终觉浅
05-16 6348
Tags： api postman一、目的项目内部api接口使用的签名方式导致在postman中不能使用，需要在postman中，自行实现签名方式以方便测试API接口。 二、实现原理1. 在postman实际调用接口前，可以执行自定义js，从而实现数据签名 2. 自定义JS可以获取到请求参数、链接参数，并且可以自定义变量 三、接口调用1. Params:链接中的通用参数 2. Headers:请求头
网站流量日志自定义采集
coder
08-11 888
网站流量日志自定义采集 1 原理分析 ​ 用户的行为会触发浏览器对被统计页面的一个http请求，比如打开一个网站，当页面加载时，页面中的埋点javascript就会被执行。 ​ 埋点是指：预先在网页中加入小段javascript代码，这个代码片段会独立的创建一个script标签，并将scr属性指向一个单独的js文件，这个js会被浏览器请求到并执行，这个js就是真正的数据收集脚本。...
修改浏览器的 User-Agent 来伪装你的浏览器和操作系统
蜡笔小辛的专栏
01-21 1万+
完整的的User-Agents信息尽在 useragents.xml 有了这个文件中的信息，什么样的浏览器和操作系系统都能伪装出来。 使用 User-Agents 的方法： FireFox：[推荐使用User-Agent switcher 这个火狐扩展] 地址栏键入：about:config 回车 设置：general.useragent.override-->自定义的 UA
网站用户行为日志采集和后台日志服务器搭建
枣面包的博客
07-04 3万+
1.使用场景 2.设计架构 3.设计实现 3.1埋点JS 3.2数据采集JS 3.3后台脚本
OPC-UA配置与使用教程：多工控机环境实战
OPC-UA（OPC统一架构）是一种工业通信标准，用于在设备、应用程序和系统之间安全、可靠地交换数据。它超越了传统的OPC COM/DCOM技术，采用基于服务导向架构（SOA）和Web服务技术，支持多平台通信，提供身份验证、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值