Hexo+Fluid实现添加百度分享按钮
本文最后更新于:2 年前
前言
很早以前,本科还是人人网盛行的时候,经常会看到分享至人人网之类的按钮,现在确实是不行了,但是分享这个功能还是很好的,博客搭建起来能够在谷歌搜索了,那么就寻思这开始分享吧。
百度分享
百度分享是一个提供网页地址收藏、分享及发送的WEB2.0按钮工具,网站的浏览者可以方便的分享到人人网、分享到开心网、分享到QQ空间、分享到新浪微博等一系列SNS站点。
以上描述引用自百度百科,但是2019年就有新闻说百度分享不能用了。好在前人折腾的时候把代码和功能都摸索了一遍,就照着来吧。
实现过程
首先在主题layout下的_partial目录里新建一个baidushare.ejs,没有此目录则新建一个。下边是我的配置,还可以参考网上别人的配置。
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_baidu" data-cmd="baidu" title="分享到百度"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ"></a>
<a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣"></a>
</div>
<script>
window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdMiniList": false,
"bdPic": "",
"bdStyle": "1",
"bdSize": "24"
},
"share": {},
"slide": {
"type": "slide",
"bdImg": "1",
"bdPos": "right",
"bdTop": "151.5"
},
};
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>
接着在layout的post.ejs合适的地方插入:
<% if (theme.post.baidushare.enable) { %>
<%- partial('_partial/baidushare') %>
<% } %>
最后在主题设置文件_config.yml里的post设置里加入:
baidushare:
enable: true
附图一张
是不是很简单?赶紧将此文章分享出去吧!!!
但是——
由于HTTPS不被百度分享支持,所以如果你的站点是https协议的话,需要将第一个baidushare.ej里的static文件放到一个可以访问的地方,具体可以参照这篇文章Hexo添加分享功能。
总结
搭建博客的时候总是希望把一切东西元素都加一遍,最后发现还是要写有意思的文章啊。或者转载也行~
还是要努力啊,技术教程,我来了。。
参考文章
[1] Hexo添加分享功能
[2] 百度分享js代码