app de namoro anonimo de namoro online namoro um esquizofrenico lee sung kyung namoro namoro depois dos 50 b2 agencia matrimonial tu y ella encontro selvagem assistir online preterito imperfeito de namorar perguntas para fazer ao namorado no começo do namoro música de o que e pedir um tempo no namoro presentes criativos sites de encontros para casar mensagem de namoro religioso o que fazer para um namoro da certo qual o sentido namoro bodas de conhecer contrato de namoro jurisprudência ideias de presentes para namoro anel de namoro em qual mao usar namorar policial feminina telefone para contato namoro consequencias no namoro na adolescencia 5 motivos para namorar alguem de cancer namoro longo tem direito a bens namoro em latim app internacional meme web namoro lindas mensagens de namoro recente carta de namorar homens separados com filhos dinamica sobre namoro na adolescencia indiretas para pedido de namoro excursão para solteiros 2020 agencia de matrimonio barcelona imagem de ana maria namorar a sua filha portal chrześcijański randkowy grupos de whatsapp para solteros incontri ragazze a cecina
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏我爱资源网吧

多说评论框核心脚本embed.js本地化+回复后显示浏览器及操作系统信息(Useragent)

技术教程 小磊 6年前 (2015-01-02) 97次浏览 已收录 1个评论 扫描二维码
本文最后更新于 2015年05月27日 12:42 可能会因为没有更新而失效。如已失效或需要修正,请及时留言!

1.一、embed.js本地化

多说社会化评论框核心脚本embed.js文件是个多说官方提供的公用文件,如果官方渠道过于拥挤,或者服务器故障(这个已经有过了~~),就会导致页面加载过慢或者完全无法加载,如果我们将其下载下来,放到我们自己的空间,就会使加载速度有一定的提升,同时也可以对多说评论框做一些个性化调整,因为我们使用的多说评论框主体代码全部都在这里面。以下用wordpress的多说插件为例。

首先打开多说核心脚本的远程文件:embed.js【点此下载】 ,然后点击右键-另存为,将其保存下来,上传到你自己的空间里。

然后用flashfxp等FTP客户端软件找到wordpress的【wp-content/plugins/duoshuo】目录,找到【WordPress.php】,用各种文本编辑器打开,如:记事本,我比较喜欢用Notepad++。

打开【WordPress.php】,搜索“embed.js”,会找到两处网址:embed.js【点此下载】,将这两处替换为你上传后的embed.js地址,推荐将embed.js上传至多说插件目录:【wp-content/plugins/duoshuo】,如上传至多说插件目录,【WordPress.php】中的两处替换网址就改为【wp-content/plugins/duoshuo/embed.js】,然后保存上传即可。

刷新下页面,然后点击鼠标右键 查看源代码-搜索 embed.js,如果显示wp-content/plugins/duoshuo/embed.js,而且多说评论框区域一切正常,那么恭喜您,多说社会化评论框核心脚本embed.js本地化就完全成功了!

您也可以用这种方法,将embed.js上传至七牛云存储等CDN当中就能使速度再次提升!

2.二、多说回复后显示浏览器及操作系统信息

修改前请确保您的多说核心脚本embed.js已经本地化

检查方法:在有多说回复框的页面点击鼠标右键查看源代码,搜索embed.js,如果找到:http://static.duoshuo.com/embed.js 这条网址,说明您的多说没有做过本地化

注意:回复本文就可以查看到效果了

然后在主题的样式表内(主题目录内的style.css文件)添加如下样式代码:

    /*多说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结束*/

如果您需要再美化一下,向本站的一样在前面加上地球、电脑、微信等小图标样式,请下载Font Awesome,获得其他图标请访问:http://fontawesome.io/icons/

它提供了479中小图标,只需要将下载到的 css 和 fonts 两个目录上传后(注意: css 和 fonts 需要上传至站点根目录),在header内引入上传后的CSS文件即可,非常方便!

在header.php中间插入以下代码引入css:

<link rel="stylesheet" href="/css/font-awesome.min.css">

注意:css目录内有两个css文件:

font-awesome.css
font-awesome.min.css

font-awesome.min.css 是 font-awesome.css 的压缩版!

保存上传后就可以显示了,快去试试吧!

如果您觉得本文对大家有帮助,请一定记得点击下方的分享按钮召唤您滴小伙伴前来围观啊!


我爱资源网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:多说评论框核心脚本embed.js本地化+回复后显示浏览器及操作系统信息(Useragent)
喜欢 (0)
关于作者:
我爱资源网 - 主要收集网络中各种破解软件,去广告补丁,以及精品各种精品资源,教程.
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 测试UA啦!
    蠢蛋小丑魚2015-04-02 09:58 回复 Windows 7 | Firefox浏览器 31.9