Octopress中处理加网分享问题

作为一个以内容为中心的网站,在文章结尾增加社会化分享按钮是一种标配,使用Octopress也不例外,本博客选用了加网的社会化分享按钮。开始的时候一切顺利,但是后来出现了一点小瑕疵,具体的情况如下图

究其原因

我们来看看出问题的HTML代码。

linenos:false

1 2 3 4 5 6 7 8 9

<div class="flash-video"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="0" height="0" id="JIATHISSWF" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"> <param name="allowScriptAccess" value="always"> <param name="swLiveConnect" value="true"> <param name="movie" value="http://www.jiathis.com/code/swf/m.swf"> <param name="FlashVars" value="z=a"> <embed name="JIATHISSWF" src="http://www.jiathis.com/code/swf/m.swf" flashvars="z=a" width="0" height="0" allowscriptaccess="always" swliveconnect="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object> </div>

压缩css代码之后发现了这样一段代码。

linenos:false

1 2 3 4 5 6 7 8 9 10 11 12 13 14

article img,article video,article .flash-video { -webkit-border-radius:0.3em; -moz-border-radius:0.3em; -ms-border-radius:0.3em; -o-border-radius:0.3em; border-radius:0.3em; -webkit-box-shadow:rgba(0,0,0,0.15) 0 1px 4px; -moz-box-shadow:rgba(0,0,0,0.15) 0 1px 4px; box-shadow:rgba(0,0,0,0.15) 0 1px 4px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:#fff 0.5em solid }

这句话border:#fff 0.5em solid就会产生我们所看到的白色的遮挡。

解决问题

思路:对id为JIATHISSWF的Object不应用包裹flash-video的div即可。 需要修改的文件为source/javascripts/octopress.js

这是原来的代码

linenos:false source/javascripts/octopress.js

1 2 3 4 5 6 7 8

function wrapFlashVideos() { $('object').each(function(i, object) { if( $(object).find('param[name=movie]').length ){ $(object).wrap('<div class="flash-video">') } }); $('iframe[src*=vimeo],iframe[src*=youtube]').wrap('<div class="flash-video">') }

这是修改后的代码

linenos:false source/javascripts/octopress.js

1 2 3 4 5 6 7 8 9 10

function wrapFlashVideos() { $('object').each(function(i, object) { if ($(object).attr('id') != "JIATHISSWF") { if( $(object).find('param[name=movie]').length ){ $(object).wrap('<div class="flash-video">') } } }); $('iframe[src*=vimeo],iframe[src*=youtube]').wrap('<div class="flash-video">') }

OK,到这里就解决问题了,检查一下看看吧。

其他

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏轮子工厂

分享两个可供练手的Javaweb网站源码

本科大二的时候记得有一回实验课,系主任给我们代的课。当时我特别认真的坐在第一排敲代码,老师可能是觉得我写代码的姿势特别的帅气,于是过来和我聊天,然后我凭借三寸不...

38940
来自专栏*坤的Blog

DNS线路

4.9K50
来自专栏Web行业观察

为什么前后端分离了,你比从前更痛苦?

前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

18040
来自专栏Java帮帮-微信公众号-技术文章全总结

研究微信即时通讯的服务端、朋友圈、红包、推送等方案

即时通信:前端获得消息发送到服务端,服务端处理后通过推送的方式,给到接收方;Android使用长连机制,联通网络长连十几分钟,电信仅五六分钟,因此需要根据测试的...

45630
来自专栏FreeBuf

利用qq钓鱼或者定位女友是否回家

前言 随着手机开始普及,现在几乎是人手一部手机,而且qq是必装的app,这正好给了骗子可乘之机,根据你的爱好,给你推送相应的内容,让你防不胜防。 看看下面的聊天...

34850
来自专栏网络

Uber开山基石:如何从无到有设计系统架构?

欢迎回看本文原始视频 http://t.cn/RjSC0KQ 本篇为Uber系列技术文章第一篇 今天我们解读的是Uber公司的Curis所分享的Uber架构从0...

356100
来自专栏魏艾斯博客www.vpsss.net

域名相关知识-零基础搭建 wordpress 教程

什么是域名?域名如何购买如何解析?选择域名应该注意哪些因素?本文是 VPS 服务器建站教程第一步-域名相关知识,专门为新手写的,把域名相关知识及魏艾斯博客对域名...

37420
来自专栏Netkiller

协议测试

协议测试 May 9, 2016 协议测试 What 什么是协议测试 什么事协议? 协议是计算机进程或网络中进行数据交换而建立的规则、标准或约定的集合。 什么是...

53050
来自专栏成猿之路

为什么前后端分离了,你比从前更痛苦?

前后端分离早已经不是新闻,当真正分离之后确遇到了更多问题。要想解决现在的痛,就要知道痛的原因:

11630
来自专栏木子昭的博客

使用python创建跨平台的fork()炸弹

进程炸弹运行截图 这是一个用python实现的最简单的fork炸弹 import os while True: os.fuck() 但是对于win...

350100

扫码关注云+社区

领取腾讯云代金券