媒介
昨天博客接入了批评体系,运用的是国内的多说。
之前看到过有些应用该批评体系的有浏览器和体系信息的显现,觉得很不错。
所以,也想有如许的结果。
题目
多说怎样显现浏览器和体系的信息?
解决方法
经由查找,应用UAParser.js能够完成。
步骤
1. 增加款式
span.this_ua {background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;border: 1px solid #BBB!important;color: #fff;}
.this_ua.platform.Windows{background-color: #39b3d7!important;border-color: #46b8da!important;}
.this_ua.platform.Linux {background-color: #3A3A3A!important;border-color: #1F1F1F!important;}
.this_ua.platform.Android {background-color: #00C47D!important;border-color: #01B171!important;}
.this_ua.browser.Chrome{background-color: #5cb85c!important;border-color: #4cae4c!important;}
.this_ua.browser.Firefox{background-color: #f0ad4e!important;border-color: #eea236!important;}
.this_ua.browser.IE{background-color: #428bca!important;border-color: #357ebd!important;}
.this_ua.browser.Opera{background-color: #d9534f!important;border-color: #d43f3a!important;}
能够新建一个css文件,在页面中增加援用。
如自定义显现色彩css请加.this_ua.platform.相干称号(注重大小写)。
2. 增加js代码
这段代码最好放在多说js代码以后,能够放在多说js的下面。
下面两段代码根据需要挑选。
一般加载运用这段代码:
<script type="text/javascript">
if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp();
else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp;
function hookDUOSHUO_tp(){
var _D_post=DUOSHUO.templates.post
DUOSHUO.templates.post=function (e,t){
var rs=_D_post(e,t);
if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
return rs;
}
}
function show_ua(string){
$.ua.set(string);
var sua=$.ua;
if(sua.os.version=='x86_64')sua.os.version='x64';
return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
}
</script>
无革新加载的请运用下面代码:
<script type="text/javascript">
if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp();
else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp;
var hookDUOSHUO_bl=false;
function hookDUOSHUO_tp(){
if(hookDUOSHUO_bl)return;
else hookDUOSHUO_bl=true;
var _D_post=DUOSHUO.templates.post;
DUOSHUO.templates.post=function (e,t){
var rs=_D_post(e,t);
if(e.agent&&/^Mozilla/.test(e.agent))rs=rs.replace(/<\/div><p>/,show_ua(e.agent)+'</div><p>');
return rs;
}
}
function show_ua(string){
$.ua.set(string);
var sua=$.ua;
if(sua.os.version=='x86_64')sua.os.version='x64';
return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>';
}
</script>
3. 引入ua-parser.js库
<script src="http://faisalman.github.io/ua-parser-js/src/ua-parser.js"></script>
能够将库文件下载到当地增加到主题中。
要先引入jquery库文件。
引入的ua-parser.js
库文件必须在多说embed.js
以后。
引荐加载多说js代码中:
<script type="text/javascript">
var duoshuoQuery = {short_name:"<%= theme.duoshuo_shortname %>"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://faisalman.github.io/ua-parser-js/src/ua-parser.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script >
结果图
原文来自:seay前端博客