技术小黑屋

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,到这里就解决问题了,检查一下看看吧。

其他


我的知乎 Live 推荐