MyException - 我的异常网
当前位置:我的异常网» 软件设计 » 替Hexo Next主题添加分享及打赏功能

替Hexo Next主题添加分享及打赏功能

www.MyException.Cn  网友分享于:2013-10-27  浏览:0次
为Hexo Next主题添加分享及打赏功能

博客地址:往事亦如风的博客

要想先看打赏和分享功能效果,请移步我的博客

打赏功能

因为next主题自带打赏功能,所以我们只需要在next的主题配置文件中找到如下代码,image文件夹是我在blog/source下面建立的文件夹,然后把你的微信及支付宝收钱码图片拉进去,修改名字为wechatreward.pngalipayreward.png

reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
wechatpay: /image/wechatreward.png
alipay: /image/alipayreward.png

分享功能

要想集成分享功能,先要去ShareSDK注册账号和项目,然后得到项目的appkey

假如你不嫌麻烦,下面是在网页上分享按钮的代码,你可以将以下代码添加到想要显示的位置,添加完之后需要修改代码中的appkey是你之前申请的appkey

<!--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-tencentweibo"><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-renren"><p>人人网</p></li>
<li class="-mob-share-kaixin"><p>开心网</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-->      

添加到Next主题中

那么怎么添加到next主题上呢。步骤如下

创建文件

我们首先要在主题文件夹下的layout文件夹找到_partials下的share文件夹,之后添加一个名为sharesdk.swig的文件。我们可以看出来。这个文件夹下放的全部是分享的配置文件.添加的内容为上面的那一大段代码。只需要修改一部分。修改的部分为:

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

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

添加可选配置

虽然我们添加了sharesdk的分享的按钮了,但是如果有一天我们不想使用了呢。当然,很简单。只需要修改配置文件就可以了。那么如何实现呢?
首先,找到主题文件夹下的layout文件夹下的post.swig

大概在16行左右添加

<div class="post-spread">
      {% 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.sharesdk %}
        {% include '_partials/share/sharesdk.swig' %}
      {% endif %}
    </div>

添加了代码

{% elseif theme.sharesdk %}
        {% include '_partials/share/sharesdk.swig' %}
        

这段代码就是根据主题文件的配置,来为文档添加相应的swig文件。要想实现在配置文件中选择性的使用分享功能,只需要在配置文件中修改即可。

修改_config.yml

接下来就是修改项目的配置文件了。

在主题的配置文件中添加:

#Share
sharesdk: true
shareSDKappkey: appkey

如果想使用就可以设置为true并添加appkey了。当然不想使用。直接注释就可以了。

文章评论

老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
如何成为一名黑客
如何成为一名黑客
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
编程语言是女人
编程语言是女人
中美印日四国程序员比较
中美印日四国程序员比较
代码女神横空出世
代码女神横空出世
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
漫画:程序员的工作
漫画:程序员的工作
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
程序员的鄙视链
程序员的鄙视链
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
鲜为人知的编程真相
鲜为人知的编程真相
 程序员的样子
程序员的样子
旅行,写作,编程
旅行,写作,编程
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员都该阅读的书
程序员都该阅读的书
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
为什么程序员都是夜猫子
为什么程序员都是夜猫子
老程序员的下场
老程序员的下场
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员应该关注的一些事儿
程序员应该关注的一些事儿
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
程序员和编码员之间的区别
程序员和编码员之间的区别
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
一个程序员的时间管理
一个程序员的时间管理
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员必看的十大电影
程序员必看的十大电影
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
每天工作4小时的程序员
每天工作4小时的程序员
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
那些争议最大的编程观点
那些争议最大的编程观点
我的丈夫是个程序员
我的丈夫是个程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有