[Next]集成Mob分享组件

原文发表在我的博客：为Next集成Mob分享组件
插件效果也可以在我的博客观看，另求关注、求交流、求意见、求建议。

前言

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

成果展示

决定是不是要配置当然还是得先上效果图

分享按钮

配置插件

配置 Mob 分享组件非常简单，只需要获取一个 AppKey 然后将 Mob 提供的代码复制到网页中即可，文档也比较详细，具体的插件设置等可以直接在文档中看。

获取 AppKey

在 Mob 注册账号后，点击头像进入后台，选择 shareSDK 添加一个 Web应用 ，如下图：

添加后就可以看到自己 AppKey 了，如下图：

在 Next 中配置

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

修改 Next 配置文件

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

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

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

# Baidu Share
# Available value:
#    button | slide
# baidushare:
##  type: button 

# Share
# jiathis:
# add_this_id:

# Share
duoshuo_share: false

将上述代码注释或改为 false ，在后面添加下面的代码（注意缩进），appkey 修改为之前获取的 appkey 。

#Share
mob_share:
  enable: true
  appkey: ********

现在就可以通过修改配置文件轻松的打开关闭以及修改mob_share的参数了。

添加 Mob 模块

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

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

在其中新建名为 mob_share.swig 的文件，内容为：

<!--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-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-->

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

添加引用

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

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

修改如下部分：

修改前

      {% 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 %}

修改后

      {% 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' %}
      {% elseif theme.mob_share.enable %}
        {% include '_partials/share/mob_share.swig' %}
      {% endif %}

现在，重新生成发布博客 Mob 分享插件就出现在文章后面了。

美化

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

添加 Mob 样式文件

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

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

添加引用

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

@import "mob_share";

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

脚本控制

添加 Mob 脚本文件

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

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

在其中添加新文件 mob_share.swig ，内容为：

{% 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。

{% include '_scripts/third-party/mob_share.swig' %}

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

代码分享

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

模块部分

<!--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-->

样式部分

.-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;
}

脚本部分

{% 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 %}

总结

对自己过于复杂的事情不妨等一等，也许就不经意间遇到了解决的办法，当然可能一直都达不到自己的要求，但是也是在趋近于完善的。当把遇到的都研究一遍之后，就可以吸取百家之长，复杂的事情也许就不会那么复杂了。另求网页调用手机各种 APP 的接口，如果能实现的话就总结起来开一个开源项目。

最后编辑于：2017.12.04 09:11:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,012评论 4赞 359
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,589评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,819评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,652评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,954评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,381评论 1赞 210
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,687评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,404评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,082评论 1赞 238
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,355评论 2赞 241
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,880评论 1赞 255
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,249评论 2赞 250
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,864评论 3赞 232
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,007评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,760评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,394评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,281评论 2赞 259

[Next]集成Mob分享组件

前言

成果展示

配置插件

获取 AppKey

在 Next 中配置

修改 Next 配置文件

添加 Mob 模块

添加引用

美化

添加 Mob 样式文件

添加引用

脚本控制

添加 Mob 脚本文件

添加引用

代码分享

模块部分

样式部分

脚本部分

总结

推荐阅读更多精彩内容