hexo blog 添加分享功能

2018-05-28 11:49

前几天把hexo博客的主题更换了一下,新换的主题没有集成分享功能,所以手动添加一下。

此次添加的分享功能为第三方http://www.mob.com/提供的,本着快速的方式,整个功能的添加过程也很简单。时间充裕的情况下,可以尝试自己编写。下文是记录的步骤。

主要有两个步骤:

  • mob网站应用的创建
  • hexo博客中添加ShareSDK的功能

第一步 —— mob


先注册mob账号,登陆成功后进入后台管理。 下面文字记录一下操作步骤:

  1. 新建应用 如新建hexo应用

  2. 进入hexo应用管理页面 进入新建的hexo应用后台管理页面会有相关功能的添加

  3. 添加ShareSDK功能 添加成功后会出现相关提示

  4. 记录好AppKey 一个应用的Appkey值只有一个,后续的Share功能中会需要用到

至此,mob中的账号信息,应用创建完毕。

参考如下图所示:

进入mob官网中的产品文档区,找到web集成文档http://wiki.mob.com/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90-13/。找到快速集成区域,可以看到需要集成的代码。此处将官网的集成代码拷贝了过来,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--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-qzone"><p>QQ空间</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</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-->

将上面的代码拷贝到博客中的页面,修改成自己设置应用的Appkey值,部署之后即可使用

第二步 —— hexo博客中添加功能


上文中已经完成了先期的准备工作,现在开始在hexo博客中添加功能。

找到hexo博客使用的主题目录,进入layout文件夹,所有页面相关的功能都是在此文件夹下。

_layout.swig 页面是整个hexo博客功能关联的核心。以下简单介绍一下hexo资源相关作用

1
2
3
4
5
6
7
一般hexo主题下会存有如下几个文件夹

languages:用与做多语言适配

layout:页面功能设计区,主页面功能,菜单栏,页面头部,页面底部,评论,统计等都是添加在此处

source:资源管理区域,css样式,图片,字体,依赖lib

进过简单的源码梳理,发现只有在主题下的/layout/_layout.swig 文件中<body></body>标签中添加快速集成的代码即可。

注意一下添加的位置,建议放到评论功能的位置之上。参考如下图所示


这样简单的添加功能是好了,但却不利于后期的维护。通过查看源码,我们发现主题源码已经做了相关接藕操作。将功能分成不同的部分,然后在_layout.swig页面进行拼装 所以,添加share功能也应该进行相似的处理。

思路:

  • 在/layout/_partial文件夹下新建shares.swig 文件
  • 把快速集成中的代码加入其中
  • _layout.swig页面相关位置引用添加的shares.swig文件

shares.swig 文件参考代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% if page.comments and not is_home()  %}
<div class="-mob-share-ui-text -mob-share-open">分享</div>
<div class="-mob-share-ui -mob-share-ui-theme-slide-bottom" 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-douban"><p>豆瓣</p></li>
<li class="-mob-share-youdao"><p>有道云笔记</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</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.shares.shares-mob"></script>
{% endif %}

参考代码有所调整,首先增加了功能限制,并不是每一个页面都需要分享功能。上面的处理是评论功能开启,分享功能也同时开启,blog首页中不展示分享功能。可根据实际情况做调整。

_layout.swig中的引用代码

1
{% include '_partial/shares.swig' %}  注意存放的页面位置

Share SDK相关设置说明


支持的平台

上文中,share功能已经添加成功,这部分是记录一下mob官网中关于shareSDK的一些设置说明。

支持的分享平台如下所示,本文中的功能并没有完全添加,知道了官方支持的分享平台后,则可以根据实际情况进行调整

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
平台名称   		 ID   

新浪微博 ——》 weibo

微信 ——》 weixin

QQ空间 ——》 qzone

QQ好友 ——》 qq

豆瓣网 ——》 douban

Faceboo ——》 facebook

Twitter ——》 twitter

Pocket ——》 pocket

Google+ ——》 google

有道云笔记 ——》 youdao

Tumblr ——》 tumblr

Instapap ——》 instapaper

Linkedin ——》 linkedin

分享功能弹出的效果


通过增加-mob-share-ui元素的css类改变弹出效果

默认效果 -mob-share-ui-theme -mob-share-ui-theme-scatter
上边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-top
下边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-bottom
左边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-left
右边滑出 -mob-share-ui-theme -mob-share-ui-theme-slide-right

修改参考如下,改成了左侧弹出分享功能

1
2
3
4
<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui -mob-share-ui-theme -mob-share-ui-theme-slide-left" style="display: none">
略...
</div>

根据实际需求修改样式。

更多的功能可看官方文档:分享设定

注:如有遇到问题先自己排查一下,然后再看看官方文档,之后再做调整修改。

还有其它的第三方分享插件如:百度分享,具体选择适合自己的,方法大致一样。本文使用的是百度分享。


标签: hexoblog

License(CC)BY-NC-SA © 2017 — 2019 hadronw | Theme based on fzheng.me