0%

为Next集成shareSDK分享组件

前言

博客开通以来,最让我不满意的地方就是社会化分享组件,因为 Next 内置的几个都不是很好用,唯一让我满意的 addthis 对中文又不友好而且速度慢,其他的尽管已经尽力的去修改不满意的地方,不支持 @2x 尺寸图标的问题还是不好解决,因为实在是不好找到成套的合适图标,自己绘制又嫌麻烦,所以就一直搁置着这个问题。不过很多事情都是机缘巧合的,不经意间就发现了 Mob 的分享插件,质量高出其他的不少,下面就分享一下我在 Next 主题配置和美化 Mob 分享插件的过程。

shareSDK分享组件

ShareSDK官网

ShareSDK
ShareSDK关于Web集成的官方文档

获取AppKey

在官网注册后可以获得AppKey

普通网页添加

下面是在网页上分享按钮的代码,只需要将以下代码添加到想要显示的位置即可。appkey是你自己的appkey。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分享</div>
<div class="-mob-share-ui" style="display: none">
<ul class="-mob-share-list">
<li class="-mob-share-weibo"><p>新浪微博</p></li>
<li class="-mob-share-weixin"><p>微信</p></li>
<li class="-mob-share-qzone"><p>QQ空间</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
<li class="-mob-share-renren"><p>人人网</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-youdao"><p>有道云笔记</p></li>
<li class="-mob-share-mingdao"><p>明道</p></li>
<li class="-mob-share-pengyou"><p>朋友网</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</p></li>
<li class="-mob-share-pocket"><p>Pocket</p></li>
<li class="-mob-share-google"><p>Google+</p></li>
<li class="-mob-share-tumblr"><p>Tumblr</p></li>
<li class="-mob-share-instapaper"><p>Instapaper</p></li>
<li class="-mob-share-linkedin"><p>Linkedin</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=你的appkey"></script>
<!--MOB SHARE END-->

上述代码包括了ShareSDK支持的所有社交软件,根据需要自行删除或修改顺序,当然也可以添加其他想要添加的东西。

添加到Next

Next 采用的是 Swig 模板引擎,模板引擎可以理解为把网页分解成一个个模块,最后再组合到一起,可以起到复用代码、简化工程的作用。我们需要做的就是找到 Next 的分享模块位置,添加上 Mob 的提供的代码就好了。

添加 Mob 模块

Next 中的分享模块都存在下面的路径中:

your-blog-path/themes/next/layout/_partials/share/

在其中新建名为 mob_share.swig 的文件,内容为上面的那一大段代码。只需要修改一部分。修改的部分为:

1
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{theme.mob_share.appkey}}"></script>

修改这写的目的是为了让我们能够在主题的配置文件中添加appkey。(只需要在主题的配置文件中添加一个shareSDKappkey并为其附上值即可)。

添加引用

现在只是声明了模块,使其生效需要在文章模块中引入,打开文章模块:

your-blog-path/themes/next/layout/post.swig

在大概在16行左右找到

1
2
3
4
5
6
7
8
9
{% if theme.jiathis %}
{% include '_partials/share/jiathis.swig' %}
{% elseif theme.baidushare %}
{% include '_partials/share/baidushare.swig' %}
{% elseif theme.add_this_id %}
{% include '_partials/share/add-this.swig' %}
{% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
{% include '_partials/share/duoshuo_share.swig' %}
{% endif %}

里面添加

1
2
{% elseif theme.mob_share.enable %}
{% include '_partials/share/mob_share.swig' %}

修改 Next 配置文件( _config.yml)

考虑到分享模块的可控性,首先需要在 Next 的配置文件中添加 Mob 的相关参数,配置文件路径为:

your-blog-path/themes/next/_config.yml

找到配置文件中分享模块部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
# baidushare:
## type:

# Share
# jiathis:
# Warning: JiaThis does not support https.
# add_this_id:

# Share
# duoshuo_share: true

在后面添加下面的代码(注意缩进),appkey 修改为之前获取的 appkey 。

1
2
3
4
#Share
mob_share:
enable: true
appkey: ********

现在就可以通过修改配置文件轻松的打开关闭以及修改mob_share的参数了。
现在,重新生成发布博客 Mob 分享插件就出现在文章后面了。

美化

经过上述配置,插件应该已经可以跑起来了,但是还是有一些细节与 Next 不搭配,有前端经验的人可以试着修改成自己喜欢的外观。

添加 Mob 样式文件

Next 样式使用的 Stylus 进行预处理,可以算是扩展版的 CSS ,很容易上手。
在下面目录中添加 mob_share.styl 样式文件。

your-blog-path/themes/next/source/css/_common/components/third-party/

添加样式文件引用

在同一目录下的 third-party.styl 中添加:

1
@import "mob_share";

现在就可以在 mob_share.styl 中愉快的写想要的样式了。
通过浏览器 审查元素 找到需要修改的 class 把想要的写在样式文件中就好了。

添加 Mob 脚本文件

毕竟 CSS3 能做的有限,为了完善插件,加入 JavaScript 就能更加深度的定制了。
Next 第三方插件的 JavaScript 存在下面的路径里。

your-blog-path/themes/next/layout/third-party/

在其中添加新文件 mob_share.swig ,内容为:

1
2
3
4
5
{% if theme.mob_share.enable %}
<script type="text/javascript">
//enter your code
</script>
{% endif %}

添加脚本文件引用

打开 _layout 文件,路径为:

your-blog-path/themes/next/layout/_layout.swig

在 body 的最后添加下面的代码来引入 mob_share.swig。

1
{% include '_third-party/mob_share.swig' %}

这样就可以在 mob_share.swig 里写各种事件控制插件了。

代码分享

由于修改比较多就不细说了,拿出本站现在的 Mob 模块的代码作为参考。

模块部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!--MOB SHARE BEGIN-->
<div class="-hoofoo-share-title">分享到:</div>
<div class="-hoofoo-share-buttons">
<div class="-mob-share-weibo -hoofoo-share-weibo -hoofoo-share-ui-button"><i class="fa fa-weibo" aria-hidden="true"></i></div>
<div class="-mob-share-weixin -hoofoo-share-weixin -hoofoo-share-ui-button"><i class="fa fa-weixin" aria-hidden="true"></i></div>
<div class="-mob-share-twitter -hoofoo-share-twitter -hoofoo-share-ui-button"><i class="fa fa-twitter" aria-hidden="true"></i></div>
<div class="-hoofoo-share-more -hoofoo-share-ui-button -mob-share-open"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>
</div>
<div class="-mob-share-ui" style="display: none">
<ul class="-mob-share-list">
<li class="-mob-share-weibo"><p>新浪微博</p></li>
<li class="-mob-share-weixin"><p>微信</p></li>
<li class="-mob-share-qzone"><p>QQ空间</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
<li class="-mob-share-renren"><p>人人网</p></li>
<li class="-mob-share-kaixin"><p>开心网</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-youdao"><p>有道云笔记</p></li>
<li class="-mob-share-mingdao"><p>明道</p></li>
<li class="-mob-share-pengyou"><p>朋友网</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</p></li>
<li class="-mob-share-pocket"><p>Pocket</p></li>
<li class="-mob-share-google"><p>Google+</p></li>
<li class="-mob-share-tumblr"><p>Tumblr</p></li>
<li class="-mob-share-instapaper"><p>Instapaper</p></li>
<li class="-mob-share-linkedin"><p>Linkedin</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{theme.mob_share.appkey}}"></script>
<!--MOB SHARE END-->

样式部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
.-hoofoo-share-buttons{
display: inline-block;
}
.-hoofoo-share-title{
font-size: 1.1em;
font-weight: 200;
}
.-hoofoo-share-ui-button{
cursor: pointer;
background-color: #555;
color: #fff;
font-size: 24px;
line-height: 40px;
width: 40px;
height: 40px;
margin: 10px;
border-radius: 25px;
float: left;
transition: background 0.4s;
-moz-transition: background 0.4s; /* Firefox 4 */
-webkit-transition: background 0.4s; /* Safari 和 Chrome */
-o-transition: background 0.4s;
}
.-hoofoo-share-weibo:hover{
background-color: #cf3f41;
}
.-hoofoo-share-weixin:hover{
background-color: #18a01a;
}
.-hoofoo-share-twitter:hover{
background-color: #2ab3e6;
}
.-hoofoo-share-more:hover{
background-color: #777;
}
.-mob-share-weixin-qrcode-content{
border-radius: 4px;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.-mob-share-weixin-qrcode{
margin: 5% !important;
width: 90% !important;
height: auto !important;
}
.-mob-share-weixin-qrcode-close {
background-image: url('/lib/fancybox/source/fancybox_sprite.png') !important;//因为兼容问题把vendor改成了lib,根据自己的路径修改
}
.-mob-share-weixin-qrcode-close {
overflow: hidden;
line-height: 100px !important;
position: absolute !important;
top: -18px !important;
right: -18px !important;
width: 36px !important;
height: 36px !important;
cursor: pointer !important;
z-index: 8040 !important;
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
.-mob-share-weixin-qrcode-close {
background-image: url('/lib/fancybox/source/fancybox_sprite@2x.png') !important;//因为兼容问题把vendor改成了lib,根据自己的路径修改
background-size: 44px 152px !important; /*The size of the normal image, half the size of the hi-res image*/
}
}
.-mob-share-close{
height: 4em !important;
font-size: 0.8em !important;
line-height: 4em !important;
background: #555 !important;
color: #fff !important;
}

脚本部分

1
2
3
4
5
6
7
8
{% if theme.mob_share.enable %}
<script type="text/javascript">
//微信二维码点击背景关闭
$('body').delegate('.-mob-share-weixin-qrcode-bg','click', function(){
$(".-mob-share-weixin-qrcode-close").trigger("click");
});
</script>
{% endif %}