纯白的小站

给你的博客增加分享按钮

发表于
使用开源项目share.js，使next主题实现一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等功能

前言

为了实现分享功能，试了一下网上找的各种方法，但是大多不能使用（对新版的Next主题）于是试着自己魔改了一下主题

原理

博客是通过主题的配置把markdown转为html，那么只需要在对应的地方都加上分享功能所需要的代码即可

实现

代码

在share.js上可以看到这个项目的使用。不过为了方便，我决定使用他提供的cdnjs

参考给的demo，设置自己的代码如下：

1
2
3
4
5
6
<div><center>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">
<div class="social-share" data-sites="weibo, qq, qzone,wechat"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>
</center></div>

找到相应插入位置

博客主体的生成是靠blog/themes/next/layout/_macro/post.swig实现的，所以只需要在相应位置插入代码即可。我希望把分享设置在文章的最底底部，所以在post.swig相对最后的位置插入：

1
2
3
4
5
6
7
8
9
10
11
12
13
  {#share#}
  {%- if not is_index %}
  <div><center>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">
  <div class="social-share" data-sites="weibo, qq, qzone,wechat"></div>
  <script src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>
  </center></div>
  {%- endif %}  
</article>
{######################}
{### END POST BLOCK ###}
{######################}

因为不想其出现在首页，所以设置了

1
{%- if not is_index %}

完成之后就hexo g&&hexo d刷新，就可以看到结果了

-------------end-------------