Permalink
Browse files

refactor: Baidu Share 百度分享优化

  • Loading branch information...
MOxFIVE committed Apr 2, 2016
1 parent 0489055 commit 20b2e4f7296c945d4039c358841d45d906f5fe4f
Showing with 65 additions and 38 deletions.
  1. +16 −13 layout/_partial/post/share.ejs
  2. +49 −25 source/css/_partial/share.styl
@@ -1,14 +1,17 @@
<div class="share">
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
<a href="#" class="bds_copy" data-cmd="copy" title="复制网址"></a>
<a href="#" class="bds_mail" data-cmd="mail" title="通过邮件分享"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
<% if (theme.share) { %>
<div class="share">
<div class="bdsharebuttonbox">
<li id="bds_twi"><a href="#" class="bds_twi" data-cmd="twi" title="分享到推特"></a></li>
<li id="bds_tsina"><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a></li>
<li id="bds_sqq"><a href="#" class="bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a></li>
<li id="bds_copy"><a href="#" class="bds_copy" data-cmd="copy" title="复制网址"></a></li>
<li id="bds_mail"><a href="#" class="bds_mail" data-cmd="mail" title="通过邮件分享"></a></li>
<li id="bds_weixin"><a href="#" class="bds_weixin" data-cmd="weixin" title="生成文章二维码"></a></li>
<li id="bds_more"><a href="#" class="bds_more" data-cmd="more"></i></a></li>
</div>
<script>
window._bd_share_config={
"common":{"bdSnsKey":{},"bdText":"<%- post.title %> | <%- config.title %> ","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
</div>
<script>
window._bd_share_config={
"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
</div>
<% } %>
@@ -1,25 +1,49 @@
.share {
padding-left: 40px;
margin-bottom: 5px;
opacity: .2;
&:hover {
opacity: .7;
};
}
.back_home{
float: right;
}
.back_home a{
font-weight: bold;
margin-left: 10px;
}
.back_home a:hover{
color: #6e6e6e;
}
.share:hover {
a:last-child::after {
content: "\f029"; /*fa fa-qrcode*/
font: 28px FontAwesome;
color: black;
}
}
.share
padding-left 40px
margin 1em auto .5em
opacity .5
&:hover
opacity 1
.bdsharebuttonbox
font-family Arial
li
display inline-block
width 28px
height @width
margin-right 2px
font 20px FontAwesome
background #6f7170
text-align center
vertical-align middle
box-shadow 1px 1px 1px rgba(0,0,0, .1), 1px 1px 1px rgba(0,0,0, .3)
a, .bds_more
float none
margin 0
padding 0
font @font
background-image none
color white
line-height @width
&:hover
opacity 1
&:hover
opacity 1
transform scale(1.1)
a
color white
// http://share.baidu.com/help/webid
font-logo = bds_tsina f18a #db332f,
bds_sqq f1d6 #1cbcef,
bds_copy f016 #8f8f8f,
bds_mail f003 #6fc0e4,
bds_weixin f1d7 #8cdc49,
bds_more f1e0 #8cbcf5,
bds_twi f099 #21abf4
for i in font-logo
.{i[0]}:before
content '\' + i[1]
#{i[0]}
background i[2]

1 comment on commit 20b2e4f

@MOxFIVE

This comment has been minimized.

Show comment
Hide comment
@MOxFIVE

MOxFIVE Apr 2, 2016

Owner

Before:
snip20160402_2

After:
snip20160402_4

Owner

MOxFIVE commented on 20b2e4f Apr 2, 2016

Before:
snip20160402_2

After:
snip20160402_4

Please sign in to comment.